Biểu tượng Material là gì?
Material Symbol là biểu tượng mới nhất, hợp nhất hơn 2.500 ký tự trong một phiên bản với nhiều biến thể thiết kế. Có các biểu tượng trong ba kiểu và bốn trục phông chữ có thể điều chỉnh (màu nền, độ đậm, điểm và kích thước quang học). Xem tập hợp đầy đủ các Biểu tượng Material trong Thư viện biểu tượng Material
Trục FILL
Màu nền cho phép bạn sửa đổi kiểu biểu tượng mặc định. Một biểu tượng có thể hiển thị cả trạng thái chưa được thực hiện và đã lấp đầy.
Để truyền tải hiệu ứng chuyển đổi trạng thái, hãy sử dụng trục tô màu nền cho ảnh động hoặc lượt tương tác. Các giá trị là 0 nếu mặc định hoặc 1 nếu điền hoàn toàn. Cùng với trọng số Trục, thì màu nền cũng ảnh hưở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 một khoảng trọng số giữa mỏng (100) và đậm (700). Trọng lượng cũng có thể ảnh hưởng đến kích thước tổng thể của .
Trục GRAD
Trọng số và cấp độ ảnh hưởng đến độ dày của biểu tượng. Các điều chỉnh để chấm điểm là chi tiết hơn so với việc điều chỉnh trọng số và có tác động nhỏ đến quy mô của biểu tượng.
Điểm cũng có sẵn trong một số phông chữ văn bản. Bạn có thể so khớp cấp lớp giữa văn bản và biểu tượng để tạo hiệu ứng hình ảnh hài hoà. Ví dụ: nếu phông chữ văn bản có giá trị cấp -25, các ký hiệu có thể so khớp giá trị đó với giá trị phù hợp, chẳng hạn như -25.
Bạn có thể sử dụng điểm cho các nhu cầu khác nhau:
Nhấn thấp (ví dụ: cấp -25): Để giảm độ chói cho biểu tượng sáng trên nền tối nền, hãy sử dụng điểm 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 giá trị dương điểm.
Trục opsz
Kích thước quang học nằm trong khoảng từ 20 dp đến 48 dp.
Để hình ảnh trông giống nhau ở các kích thước khác nhau, độ đậm của nét vẽ (độ dày) sẽ thay đổi khi kích thước biểu tượng tăng lên. Kích thước quang học giúp điều chỉnh độ đậm của nét vẽ khi bạn tăng hoặc giảm kích thước biểu tượng.
Lấy ký hiệu Material
Material Symbol có nhiều định dạng và phù hợp với nhiều định dạng các loại dự án và nền tảng, cho cả nhà phát triển trong ứng dụng của họ lẫn nhà thiết kế trong các bản minh hoạ hoặc nguyên mẫu của họ.
Cấp phép
Biểu tượng Material có sẵn trong Giấy phép Apache phiên bản 2.0.
Duyệt xem và tải từng biểu tượng xuống
Bạn có thể xem bộ Biểu tượng Material đầy đủ trên Thư viện biểu tượng Material ở định dạng SVG hoặc PNG. Chúng phù hợp với web, Android và iOS hoặc với bất kỳ và các công cụ dành cho nhà thiết kế.
Kho lưu trữ Git
Chiến lược phát hành đĩa đơn kho lưu trữ git chứa tập hợp đầy đủ các 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 các Biểu tượng Material vào các dự án web.
Các biểu tượng được đóng gói thành một phông chữ để nhà phát triển web có thể dễ dàng kết hợp các biểu tượng này với chỉ 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 để sử dụng trong mọi trang web là thông qua Google Fonts (Phông chữ Google). 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, thông qua tính năng trọng lượng ở mức 400, kích thước quang học ở tuổi 48, lớp tại 0 và điền sẵn (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ữ thay đổi với Google Fonts
Nếu bạn đang tạo ảnh động cho biểu tượng qua CSS hoặc muốn kiểm soát tốt hơn các tính năng biểu tượng, hãy sử dụng
phông chữ biến biểu tượng của Google. Sử dụng dải ô, theo định dạng number..number,
chúng tôi có thể tải toàn bộ phông chữ có thể thay đổi. Trả phòng
Tôi có thể sử dụng tính năng hỗ trợ phông chữ biến đổi của Google không
để biết liệu người dùng của bạn có thể tải phông chữ có thể thay đổi hay không, hầu hết
có khả năng cao. Dưới đây là một số ví dụ:
Hoặc thậm chí là tạo ảnh động cho người xem!
Tự lưu trữ phông chữ
Tổ chức
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. Cho
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ữ chính xác, hãy khai báo các quy tắc CSS để hiển thị biểu tượng. Các các quy tắc này thường được phân phát dưới dạng một phần trong biểu định kiểu API của Google Fonts API, 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ữ:
.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 tính năng kiểu chữ được gọi là
ghép nối,
cho phép kết xuất ký tự biểu tượng chỉ bằng cách sử dụng tên văn bản của biểu tượng. Chiến lược phát hành đĩa đơn
trình duyệt web tự động thay thế nối văn bản bằng vectơ biểu tượng và
sẽ cung cấp mã dễ đọc hơn tham chiếu ký tự số tương đương. Cho
ví dụ: trong HTML, bạn sẽ có arrow_forward để biểu thị một 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 con rắn của tên biểu tượng
(tức là thay 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 các trình duyệt hiện đại trên cả máy tính và thiết bị di động thiết bị. Xem Tôi có thể sử dụng tính năng hỗ trợ nối và ghép nối để xem liệu người dùng của bạn có khả năng xử lý nối nhau hay không, rất có thể họ có thể.
Nếu bạn cần hỗ trợ các trình duyệt không hỗ trợ nối, hãy chỉ định sử dụng tham chiếu ký tự số (còn gọi là điểm mã) như ví dụ bên dưới:
Tìm cả tên biểu tượng và điểm mã trên Thư viện biểu tượng Material bằng cách chọn một biểu tượng bất kỳ rồi 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 Google Fonts kho lưu trữ git hiển thị toàn 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ế để tuân thủ Nguyên tắc Material Design, và trông đẹp nhất khi dùng màu sắc và kích thước biểu tượng được đề xuất. Phong cách bên dưới giúp bạn 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.
Sử dụng trong Android
Trong Thư viện biểu tượng Material, tất cả biểu tượng đều ở định dạng Vectơ vẽ được. Người nhận hãy tìm hiểu thêm, xem Tài liệu về Android Vector Asset Studio.
Sử dụng trong iOS
Các biểu tượng cũng có sẵn ở định dạng Biểu tượng Apple. Để tìm hiểu thêm về các tính năng đó, xem các Biểu tượng Apple chính thức tổng quan 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 chú ý theo dõi thông tin cập nhật nhé.