Html giảm khoảng cách dòng

Các biểu tượng hệ thống thiết kế vật liệu đơn giản, hiện đại, thân thiện và đôi khi kỳ quặc. Mỗi biểu tượng được tạo bằng cách sử dụng các nguyên tắc thiết kế của chúng tôi để mô tả ở dạng đơn giản và tối thiểu các khái niệm chung được sử dụng phổ biến trong toàn bộ giao diện người dùng. Đảm bảo tính dễ đọc và rõ ràng ở cả kích thước lớn và nhỏ, các biểu tượng này đã được tối ưu hóa để hiển thị đẹp mắt trên tất cả các nền tảng và độ phân giải màn hình phổ biến

Xem trọn bộ material design icon tại Thư viện Material Icons

Nhận biểu tượng

Các biểu tượng có sẵn ở một số định dạng và phù hợp với các loại dự án và nền tảng khác nhau, dành cho nhà phát triển trong ứng dụng của họ và dành cho nhà thiết kế trong mô hình hoặc nguyên mẫu của họ

cấp phép

Chúng tôi đã cung cấp các biểu tượng này để bạn kết hợp chúng vào các sản phẩm của mình theo Giấy phép Apache Phiên bản 2. 0. Vui lòng phối lại và chia sẻ lại các biểu tượng và tài liệu này trong các sản phẩm của bạn. Chúng tôi muốn ghi nhận tác giả trong phần giới thiệu về ứng dụng của bạn, nhưng điều đó không bắt buộc

Duyệt và tải xuống các biểu tượng riêng lẻ

Bộ biểu tượng vật liệu đầy đủ có sẵn trên thư viện biểu tượng vật liệu. Các biểu tượng có sẵn để tải xuống ở định dạng SVG hoặc PNG, phù hợp với các dự án web, Android và iOS hoặc để đưa vào bất kỳ công cụ thiết kế nào

Đang tải xuống mọi thứ

Lấy kho lưu trữ zip ổn định mới nhất (~310MB) của tất cả các biểu tượng hoặc phiên bản mới nhất từ ​​chính

Kho lưu trữ Git

Các biểu tượng vật liệu có sẵn từ kho git chứa bộ biểu tượng hoàn chỉnh bao gồm tất cả các định dạng khác nhau mà chúng tôi đang cung cấp

$ git clone https://github.com/google/material-design-icons/

---

Phông chữ biểu tượng cho web

Phông chữ biểu tượng vật liệu là cách dễ nhất để kết hợp các biểu tượng vật liệu với các dự án web. Chúng tôi đã đóng gói tất cả các biểu tượng quan trọng thành một phông chữ duy nhất tận dụng khả năng kết xuất kiểu chữ của các trình duyệt hiện đại để các nhà phát triển web có thể dễ dàng kết hợp các biểu tượng này chỉ với một vài dòng mã

Sử dụng phông chữ không chỉ là phương pháp thuận tiện nhất mà còn hiệu quả và trông rất đẹp

• Hơn 900 biểu tượng tất cả từ một tệp nhỏ, duy nhất
• Được cung cấp từ các máy chủ Google Web Font hoặc có thể tự lưu trữ
• Được hỗ trợ bởi tất cả các trình duyệt web hiện đại
• Tô màu, định cỡ và định vị hoàn toàn bằng CSS
• dựa trên véc tơ. Trông tuyệt vời ở mọi tỷ lệ, màn hình retina, màn hình hiển thị độ phân giải thấp

Phông chữ biểu tượng chỉ nặng 42KB ở định dạng woff2 nhỏ nhất và 56KB ở định dạng woff tiêu chuẩn. Để so sánh, các tệp SVG được nén bằng gzip thường sẽ có kích thước khoảng 62KB, nhưng điều này có thể giảm đáng kể bằng cách chỉ biên dịch các biểu tượng bạn cần thành một tệp SVG duy nhất với các họa tiết biểu tượng

Phương pháp thiết lập 1. Sử dụng qua Google Fonts

Cách dễ nhất để thiết lập phông chữ biểu tượng để sử dụng trong bất kỳ trang web nào là thông qua Google Fonts. Tất cả những gì bạn cần làm là bao gồm một dòng HTML

Tương tự như các Phông chữ web khác của Google, CSS chính xác sẽ được cung cấp để kích hoạt phông chữ 'Biểu tượng vật liệu' dành riêng cho trình duyệt. Một lớp CSS bổ sung sẽ được khai báo có tên là

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

2. Bất kỳ phần tử nào sử dụng lớp này sẽ có CSS ​​chính xác để hiển thị các biểu tượng này từ phông chữ web

Phương pháp thiết lập 2. tự lưu trữ

Đối với những người muốn tự lưu trữ phông chữ web, một số thiết lập bổ sung là cần thiết. Lưu trữ phông chữ biểu tượng ở một vị trí, ví dụ như

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

3 và thêm quy tắc CSS sau

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

Ngoài ra, các quy tắc CSS để hiển thị biểu tượng sẽ cần được khai báo để hiển thị đúng phông chữ. Các quy tắc này thường được cung cấp như một phần của biểu định kiểu Phông chữ web của Google, nhưng sẽ cần được đưa vào dự án của bạn theo cách thủ công khi tự lưu trữ phông chữ

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Sử dụng các biểu tượng trong HTML

Thật dễ dàng để kết hợp các biểu tượng vào trang web của bạn. Đây là một ví dụ nhỏ

đối mặt

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

4

Ví dụ này sử dụng một tính năng typographic được gọi là chữ ghép, cho phép hiển thị một biểu tượng glyph đơn giản bằng cách sử dụng tên văn bản của nó. Việc thay thế được thực hiện tự động bởi trình duyệt web và cung cấp mã dễ đọc hơn so với tham chiếu ký tự số tương đương

Tính năng này được hỗ trợ trong hầu hết các trình duyệt hiện đại trên cả máy tính để bàn và thiết bị di động

Trình duyệtPhiên bản hỗ trợ chữ ghépGoogle Chrome11Mozilla Firefox3. 5Apple Safari5Microsoft IE10Microsoft Edge18Opera15Apple MobileSafariiOS 4. 2Trình duyệt Android3. 0

Đối với các trình duyệt không hỗ trợ chữ ghép, hãy quay lại chỉ định các biểu tượng bằng tham chiếu ký tự số như ví dụ bên dưới



Bình thường

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

5

Tìm cả tên biểu tượng và điểm mã trên thư viện biểu tượng vật liệu bằng cách chọn bất kỳ biểu tượng nào và mở bảng phông chữ biểu tượng. Mỗi phông chữ biểu tượng có một chỉ mục điểm mã trong kho lưu trữ git của chúng tôi hiển thị bộ tên và mã ký tự hoàn chỉnh (tại đây)

Biểu tượng phong cách trong thiết kế vật liệu

Các biểu tượng này được thiết kế để tuân theo các nguyên tắc thiết kế material design và chúng trông đẹp nhất khi sử dụng các kích thước và màu sắc biểu tượng được đề xuất. Các kiểu bên dưới giúp dễ dàng áp dụng kích thước, màu sắc và trạng thái hoạt động được đề xuất của chúng tôi

________số 8

định cỡ

Mặc dù các biểu tượng trong phông chữ có thể được thu nhỏ theo bất kỳ kích thước nào, theo nguyên tắc về biểu tượng thiết kế material design, chúng tôi khuyên bạn nên hiển thị chúng ở 18, 24, 36 hoặc 48px. Mặc định là 24px

Quy tắc CSS cho nguyên tắc định cỡ thiết kế material design tiêu chuẩn

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Các biểu tượng vật liệu trông đẹp nhất ở 24px, nhưng nếu một biểu tượng cần được hiển thị ở một kích thước khác, thì việc sử dụng các quy tắc CSS ở trên có thể hữu ích

đối mặt

18px

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

6

đối mặt

24px

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

7

đối mặt

36px

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

8

đối mặt

48px

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

9

tô màu

Sử dụng phông chữ biểu tượng cho phép dễ dàng tạo kiểu biểu tượng bằng bất kỳ màu nào. Theo các nguyên tắc về biểu tượng thiết kế material design, đối với các biểu tượng đang hoạt động, chúng tôi khuyên bạn nên sử dụng màu đen ở độ mờ 54% hoặc màu trắng ở độ mờ 100% khi hiển thị các biểu tượng này trên nền sáng hoặc tối tương ứng. Nếu một biểu tượng bị tắt hoặc không hoạt động, sử dụng màu đen ở mức 26% hoặc màu trắng ở mức 30% tương ứng cho nền sáng và tối

Dưới đây là một số ví dụ, sử dụng các kiểu CSS vật liệu được mô tả ở trên

4

Ví dụ để vẽ biểu tượng trên nền sáng với màu nền trước tối

đối mặt

Bình thường

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

0

đối mặt

Tàn tật

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

1

Ví dụ để vẽ biểu tượng trên nền tối với màu nền trước sáng

đối mặt

Bình thường

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

2

đối mặt

Tàn tật

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

3

Để đặt màu biểu tượng tùy chỉnh, hãy xác định quy tắc CSS chỉ định màu mong muốn cho phông chữ

9

và sau đó sử dụng lớp khi đề cập đến biểu tượng

đối mặt

Bình thường

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

4

---

Hình ảnh biểu tượng cho web

Các biểu tượng vật liệu cũng có sẵn dưới dạng hình ảnh thông thường, cả ở định dạng PNG và SVG

SVG

Các biểu tượng vật liệu được cung cấp dưới dạng SVG phù hợp với các dự án web. Các biểu tượng riêng lẻ có thể tải xuống từ thư viện biểu tượng vật liệu. Các SVG cũng có sẵn từ kho lưu trữ git của các biểu tượng thiết kế vật liệu theo đường dẫn

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

1

Ví dụ: các biểu tượng cho bản đồ nằm trong src/maps

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

2

Nếu nhiều biểu tượng được sử dụng trên một trang web, nên tạo các biểu tượng sprite từ các hình ảnh. Để biết thêm thông tin, hãy tham khảo tài liệu trong thư mục sprites của kho git

PNG

PNG là cách truyền thống nhất để hiển thị các biểu tượng trên web. Các bản tải xuống của chúng tôi từ thư viện biểu tượng vật liệu cung cấp cả mật độ đơn và kép cho mỗi biểu tượng. Chúng được gọi lần lượt là

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

5 và

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

6 trong phần tải xuống. Các biểu tượng cũng có sẵn trong kho git bên dưới

0

Nếu nhiều biểu tượng được sử dụng trên một trang web, nên tạo các biểu tượng sprite từ các hình ảnh. Để biết thêm thông tin, hãy tham khảo các đề xuất trong thư mục sprites trong kho git

---

Biểu tượng cho Android

PNG phù hợp với Android có sẵn từ thư viện biểu tượng vật liệu. Chúng có tất cả các mật độ màn hình được hỗ trợ để chúng trông đẹp mắt trên mọi thiết bị

Các biểu tượng cũng có sẵn trong kho lưu trữ git của các biểu tượng thiết kế vật liệu trong cùng một sự kết hợp màu sắc và kích thước được đặt tên như sau

Vector Drawable hiện chỉ khả dụng dưới dạng biểu tượng 24dp màu đen. Điều này là để tương thích với kích thước biểu tượng tiêu chuẩn nhất của chúng tôi. Để hiển thị biểu tượng bằng một màu khác, hãy sử dụng pha màu có thể vẽ được trên Android Lollipop

Khi sử dụng Vector Drawable, có thể không cần bao gồm PNG mật độ xxxhdpi vì không chắc thiết bị hỗ trợ mật độ màn hình đó không hỗ trợ Vector Drawables

---

Biểu tượng cho iOS

Các biểu tượng vật liệu cũng hoạt động tốt trong các ứng dụng iOS. Trong cả thư viện biểu tượng vật liệu và kho lưu trữ git, các biểu tượng này được đóng gói trong bộ hình ảnh Xcode sẽ hoạt động dễ dàng với Danh mục tài sản Xcode (xcassets). Các bộ hình ảnh này có thể được thêm vào bất kỳ Danh mục nội dung Xcode nào bằng cách kéo chúng vào Xcode trên danh mục nội dung hoặc bằng cách sao chép thư mục vào thư mục xcasset

Bộ hình ảnh chứa các hình ảnh mật độ đơn, đôi và gấp ba (1x, 2x, 3x) để chúng hoạt động trên tất cả các mật độ màn hình iOS đã biết. Cả hai biểu tượng màu đen và trắng đều được cung cấp, nhưng chúng tôi khuyên bạn nên sử dụng imageWithRenderingMode của UIImage với UIImageRenderingModeAlwaysTemplate, điều này sẽ cho phép hình ảnh được sử dụng làm mặt nạ alpha có thể được tô màu theo bất kỳ màu nào có thể

Ví dụ về mục tiêu-C

1

Ví dụ Swift

2

---

Các biểu tượng trong RTL

Các ngôn ngữ như tiếng Ả Rập và tiếng Do Thái được đọc từ phải sang trái (RTL). Đối với các ngôn ngữ RTL, giao diện người dùng phải được phản chiếu để hiển thị hầu hết các thành phần trong RTL. Khi giao diện người dùng được phản chiếu cho RTL, một số biểu tượng cũng sẽ được phản chiếu. Khi văn bản, bố cục và biểu tượng được phản chiếu để hỗ trợ giao diện người dùng từ phải sang trái, mọi thứ liên quan đến thời gian sẽ được mô tả là di chuyển từ phải sang trái. Ví dụ: chuyển tiếp chỉ sang trái và ngược lại chỉ sang phải. Tuy nhiên, hãy lưu ý rằng ngữ cảnh mà biểu tượng được đặt cũng ảnh hưởng đến việc biểu tượng có nên được phản chiếu hay không

Các biểu tượng chỉ nên được nhân đôi nếu hướng của chúng khớp với các thành phần giao diện người dùng khác trong chế độ RTL. Khi một biểu tượng đại diện cho các tính năng trực quan của trang web của bạn khác trong RTL, thì biểu tượng đó cũng phải được phản chiếu trong RTL. Ví dụ: nếu các số trong danh sách được đánh số nằm ở bên phải trong ngôn ngữ RTL, thì các số đó phải ở bên phải của biểu tượng được nhân đôi

Ghi chú. Các biểu tượng bao gồm dấu hỏi phải được phản chiếu bằng tiếng Ả Rập và tiếng Ba Tư, nhưng không phải bằng tiếng Do Thái. Để có hướng dẫn chuyên sâu về chủ đề này, vui lòng đọc bài viết thông số kỹ thuật thiết kế vật liệu hai chiều.

Biểu tượng RTL trên Android

Bài viết dành cho nhà phát triển Android này mô tả chuyên sâu cách triển khai giao diện người dùng RTL. Theo mặc định trên Android, các biểu tượng không được phản chiếu khi hướng bố cục được phản chiếu. Bạn cần phản chiếu cụ thể các biểu tượng thích hợp khi cần, bằng cách cung cấp nội dung chuyên dụng cho ngôn ngữ RTL hoặc sử dụng chức năng khung để phản chiếu nội dung

Để cung cấp nội dung chuyên biệt cho các ngôn ngữ RTL, bạn có thể sử dụng từ hạn định

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

7 trên các thư mục tài nguyên, chẳng hạn như

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

8. Tài nguyên bên trong các thư mục như vậy sẽ chỉ được sử dụng cho các ngôn ngữ RTL. Đối với các thiết bị chạy Android API 19 trở lên, khung cũng cung cấp thuộc tính autoMirrored cho Drawables. Khi thuộc tính này được đặt thành true, drawable sẽ tự động được phản chiếu trên các ngôn ngữ RTL

Sử dụng autoMirrored

3

Nếu sử dụng autoMirrored hoặc cung cấp các tài nguyên Drawable thay thế không phải là một tùy chọn, thì thuộc tính ImageView scaleX cũng có thể được sử dụng để phản chiếu các drawable (ví dụ: bằng cách cung cấp bố cục dành riêng cho RTL trong thư mục

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

9)

Phản chiếu trong tệp bố cục

4

Cuối cùng, drawables có thể được nhân đôi theo chương trình

Kiểm tra thủ công hướng bố cục bằng getLayoutDirection

5

Phản chiếu nội dung ImageView theo chương trình

6

Biểu tượng RTL trên iOS

iOS có khái niệm về UISemanticContentAttribute được đính kèm với mỗi chế độ xem. Đây có thể là

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

0,

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

1,

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

2,

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

3 hoặc

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

4. iOS sử dụng giá trị này và cài đặt (từ trái sang phải (LTR)/RTL của thiết bị hiển thị giao diện để xác địnhHướng bố cục hiệu quả của chế độ xem. Hiệu quảLayoutDirection này xác định có phản chiếu hình ảnh khi nó được hiển thị hay không

Theo mặc định, nội dung ngữ nghĩa của hình ảnh được đặt thành

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

0. Điều này khiến chúng được nhân đôi trong chế độ RTL. Nếu bạn không muốn một biểu tượng được nhân đôi, bạn cần đặt rõ ràng biểu tượng đó là

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

1. Apple chỉ ra một số trường hợp ngoại lệ không được sao chép, chẳng hạn như phát lại phương tiện (Tua đi nhanh, tua lại, v.v. ), nốt nhạc, hình ảnh chỉ thời gian trôi qua, v.v.

Ví dụ về mục tiêu-C

7

ví dụ nhanh

8

Để biết thêm tài liệu chuyên sâu về cách triển khai RTL trên iOS và macOS, vui lòng xem lại tài liệu RTL của Apple

Nội dung ngữ nghĩa đã được thêm vào trong iOS 9. Nếu bạn đang hỗ trợ các phiên bản iOS cũ hơn, khung quốc tế hóa vật liệu sẽ chuyển một số chức năng sang iOS 8

Biểu tượng RTL trên web

Chúng tôi đề xuất bài viết sau đây để làm cơ sở cho RTL trên web. https. // hack. mozilla. org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https. // hack. mozilla. org/2015/10/building-rtl-aware-web-apps-websites-part-2

Theo mặc định trên web, các biểu tượng không được phản chiếu khi hướng bố cục được phản chiếu. Bạn cần phản chiếu cụ thể các biểu tượng thích hợp khi cần

Ví dụ dưới đây cho thấy cách triển khai quy tắc RTL CSS đơn giản. Bạn cũng có thể xem nó trên codepen

trang. html

9

trang. css

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

0

Tạo các biểu tượng RTL của riêng bạn bằng ImageMagick

Nếu phản chiếu các biểu tượng trong mã không phải là một tùy chọn, bạn có thể sử dụng ImageMagick để phản chiếu hình ảnh theo chiều ngang