Ký hiệu Material là gì?
Biểu tượng Material là các biểu tượng mới nhất của chúng tôi, hợp nhất hơn 2.500 ký tự trong một tệp phông chữ duy nhất với nhiều biến thể thiết kế. Các biểu tượng có sẵn ở 3 kiểu và 4 trục phông chữ có thể điều chỉnh được (màu tô, độ đậm, cấp độ và kích thước quang học). Xem bộ đầy đủ các biểu tượng Material trong Thư viện biểu tượng Material.
Trục FILL
Màu tô cho phép bạn sửa đổi kiểu biểu tượng mặc định. Một biểu tượng duy nhất có thể hiển thị cả trạng thái không được lấp đầy và trạng thái đã lấp đầy.
Để thể hiện chuyển đổi trạng thái, hãy sử dụng trục tô màu cho ảnh động hoặc tương tác. Giá trị là 0 cho giá trị mặc định hoặc 1 nếu được điền hoàn toàn. Cùng với trục trọng số, màu nền cũng tác động đến giao diện của biểu tượng.
Trục wght
Trọng số xác định độ đậm nét của biểu tượng, với phạm vi trọng số từ mỏng (100) đến đậm (700). Trọng số cũng có thể ảnh hưởng đến kích thước tổng thể của biểu tượng.
Trục GRAD
Trọng số và cấp độ ảnh hưởng đến độ dày của biểu tượng. Các nội dung điều chỉnh để chấm điểm chi tiết hơn so với việc điều chỉnh trọng số và có tác động nhỏ đến kích thước của biểu tượng.
Điểm cũng có ở một số phông chữ văn bản. Bạn có thể khớp mức điểm giữa văn bản và ký hiệu để có hiệu ứng hình ảnh hài hoà. Ví dụ: nếu phông chữ văn bản có giá trị điểm -25, thì các ký hiệu có thể khớp với giá trị phù hợp, chẳng hạn như -25.
Bạn có thể dùng điểm cho nhiều nhu cầu:
Nhấn thấp (ví dụ: -25 điểm): Để giảm độ chói cho biểu tượng ánh sáng trên nền tối, hãy sử dụng cấp độ thấp.
Nhấn mạnh (ví dụ: cấp 200): Để làm nổi bật một biểu tượng, hãy tăng cấp độ dương.
Trục opsz
Kích thước quang học dao động từ 20 dp đến 48 dp.
Để hình ảnh trông giống nhau ở nhiều kích thước, trọng số nét (độ dày) sẽ thay đổi khi kích thước biểu tượng theo tỷ lệ. Kích thước quang học có cách tự động điều chỉnh độ đậm nét khi bạn tăng hoặc giảm kích thước biểu tượng.
Lấy ký hiệu Material
Biểu tượng Material có sẵn ở một số định dạng và phù hợp với nhiều loại dự án và nền tảng, cho cả nhà phát triển trong ứng dụng lẫn nhà thiết kế trong bản minh hoạ hoặc nguyên mẫu.
Cấp phép
Biểu tượng Material có trong Giấy phép Apache phiên bản 2.0.
Duyệt qua và tải từng biểu tượng xuống
Bộ ký hiệu Material hoàn chỉnh có trong Thư viện biểu tượng Material ở định dạng SVG hoặc PNG. Các định dạng này phù hợp với web, Android và iOS hoặc với bất kỳ công cụ nào dành cho nhà thiết kế.
Kho lưu trữ Git
Kho lưu trữ git chứa toàn bộ Biểu tượng Material ở định dạng SVG.
$ git clone https://github.com/google/material-design-icons
Sử dụng ký hiệu Material
Sử dụng trong web
Phông chữ Material Symbols là cách dễ nhất để kết hợp Material Symbols vào các dự án web.
Các biểu tượng được đóng gói thành một phông chữ duy nhất để nhà phát triển web có thể dễ dàng kết hợp các biểu tượng này chỉ bằng một vài dòng mã.
Phông chữ tĩnh với Google Fonts
Cách dễ nhất để thiết lập phông chữ biểu tượng để dùng trong mọi trang web là thông qua Google Fonts. Bao gồm một dòng HTML sau:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Đoạn mã trên bao gồm cấu hình mặc định cho mỗi Trục, với trọng số ở mức 400, kích thước quang học ở mức 48, cấp ở mức 0 và fill (cũng là 0).
Sử dụng API CSS phông chữ để định cấu hình các giá trị trục khác nhau. Hãy xem các ví dụ sau:
Phông chữ biến đổi với Google Fonts
Nếu bạn đang tạo ảnh động cho biểu tượng thông qua CSS hoặc muốn kiểm soát tốt hơn các tính năng của biểu tượng, hãy sử dụng phông chữ biến đổi Biểu tượng Google. Bằng cách sử dụng các dải ô, ở định dạng number..number,
chúng ta có thể tải toàn bộ phông chữ biến. Hãy xem phần Hỗ trợ phông chữ thay đổi của tôi có thể sử dụng không để tìm hiểu xem người dùng của bạn có thể tải phông chữ biến đổi được không (rất có thể là được). Sau đây là một số ví dụ:
Hoặc thậm chí tạo ảnh động cho ảnh!
Tự lưu trữ phông chữ
Lưu trữ
phông chữ biểu tượng
ở một vị trí mà bạn kiểm soát, để quyết định thời điểm cập nhật tài sản. Ví dụ: nếu URL là https://example.com/material-symbols.woff, hãy thêm quy tắc CSS sau:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Để hiển thị phông chữ đúng cách, hãy khai báo các quy tắc CSS về việc hiển thị biểu tượng. Các quy tắc này thường được phân phát dưới dạng một phần của biểu định kiểu API Google Fonts, nhưng sẽ cần được đưa vào dự án theo cách thủ công khi tự lưu trữ:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
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;
}
Sử dụng các biểu tượng trong HTML
Các ví dụ được cung cấp ở trên sử dụng một tính năng chính tả có tên là ghép nối, cho phép hiển thị ký tự biểu tượng chỉ bằng tên văn bản. Trình duyệt web tự động thay thế dấu gạch nối văn bản bằng vectơ biểu tượng và cung cấp mã dễ đọc hơn so với tham chiếu ký tự số tương đương. Ví dụ: trong HTML, bạn sẽ có arrow_forward để biểu thị biểu tượng thay vì . Đối với các biểu tượng khác, hãy sử dụng kiểu viết hoa rắn của tên biểu tượng (tức là thay thế dấu cách bằng dấu gạch dưới).
Tính năng này được hỗ trợ trong hầu hết trình duyệt hiện đại trên cả máy tính và thiết bị di động. Hãy xem phần Hỗ trợ dấu gạch nối của tôi có thể sử dụng không để xem người dùng của bạn có thể xử lý dấu gạch nối hay không. Có nhiều khả năng là họ có thể xử lý dấu gạch nối này.
Nếu bạn cần hỗ trợ các trình duyệt không hỗ trợ dấu gạch nối, hãy chỉ định các biểu tượng bằng cách sử dụng tham chiếu ký tự số (còn gọi là điểm mã) như ví dụ dưới đây:
Tìm cả tên biểu tượng và điểm mã trong Thư viện biểu tượng Material bằng cách chọn một biểu tượng bất kỳ và mở bảng điều khiển 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 Google Fonts hiển thị toàn bộ bộ tên và mã ký tự.
Tạo kiểu biểu tượng trong Material Design
Các biểu tượng này được thiết kế theo nguyên tắc thiết kế Material Design và hiển thị đẹp nhất khi sử dụng màu và kích thước biểu tượng được đề xuất. Các kiểu dưới đây giúp bạn dễ dàng áp dụng các kích thước, màu sắc và trạng thái hoạt động được đề xuất.
Sử dụng trong Android
Trong Thư viện biểu tượng Material, tất cả các biểu tượng đều ở định dạng Vectơ vẽ được. Để tìm hiểu thêm, hãy xem tài liệu về Android Vector Asset Studio.
Sử dụng trong iOS
Các biểu tượng này cũng có sẵn ở định dạng Biểu tượng Apple. Để tìm hiểu thêm về biểu tượng Apple, vui lòng xem thông tin tổng quan chính thức về biểu tượng Apple và hướng dẫn sử dụng.
Sử dụng trong Flutter
Chúng tôi đã lên kế hoạch hỗ trợ Flutter cho Material Symbols. Hãy luôn cập nhật.