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 Ký hiệu Material trong Biểu tượng Material Thư viện.
Trục FILL
Phần tử tô màu 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 quá trình chuyển đổi trạng thái, hãy sử dụng trục tô màu cho ảnh động hoặc hoạt động tương tác. Giá trị là 0 đối với giá trị mặc định hoặc 1 đối với giá trị được điền đầy đủ. 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). Độ đậm 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 mức điều chỉnh điểm sẽ chi tiết hơn so với các mức điều chỉnh trọng số và có tác động nhỏ đến kích thước của ký hiệu.
Điểm cũng có 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ị độ đậ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ể 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 cao (ví dụ: độ đậm 200): Để làm nổi bật một biểu tượng, hãy tăng độ đậm dương.
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 ở nhiều kích thước, độ đậm nét (độ dày) sẽ thay đổi khi kích thước biểu tượng thay đổi. 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
Các biểu tượng Material được cung cấp theo 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ể tải bộ biểu tượng Material hoàn chỉnh từ Thư viện biểu tượng Material ở định dạng SVG hoặc PNG. Các mẫu này phù hợp với web, Android và iOS hoặc với mọi công cụ thiết kế.
Kho lưu trữ Git
Kho lưu trữ git chứa bộ ký hiệu Material hoàn chỉnh ở đị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ữ Biểu tượng Material 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ữ để 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 với chỉ một vài dòng mã.
Phông chữ tĩnh bằng Google Fonts
Cách dễ nhất để thiết lập phông chữ biểu tượng để dùng trên mọi trang web là thông qua Google Phông chữ. Bao gồm nội dung này một dòng HTML:
<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 lượng ở 400, quang học kích thướ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ữ biến đổ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. 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ữ biến thể của Can I Use để biết liệu người dùng có thể tải phông chữ biến thể hay không. Rất có thể họ sẽ tải được. Dưới đây là một số ví dụ:
Hoặc thậm chí là tạo ảnh động!
Tối ưu hoá phông chữ cho biểu tượng
Lấy một tập hợp con của phông chữ để chỉ bao gồm các biểu tượng liên quan cho ứng dụng của bạn bằng cách sử dụng thông số truy vấn
&icon_names, sử dụng danh sách tên biểu tượng (liên kết) được sắp xếp theo thứ tự bảng chữ cái và phân tách bằng dấu phẩy.Không nên dùng – Việc sử dụng chế độ cài đặt mặc định sẽ tải tất cả hơn 3.800 biểu tượng. Tải trọng phông chữ: 295 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedĐược đề xuất — Chỉ định tên biểu tượng để chỉ tải các biểu tượng cần thiết. Tải trọng phông chữ: 1,7 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockTạo thực thể cho các trục phông chữ của biến để chỉ bao gồm các trục mà ứng dụng của bạn sẽ sử dụng. Hầu hết các ứng dụng chỉ cần một vài biến thể của trục.
Không nên – Thiếu cấu hình trục sẽ tải phông chữ tĩnh mặc định (độ đậm 400, cỡ quang học 24, tròn 50, cấp 0, tô 0). Việc bao gồm toàn bộ các trục phông chữ biến đổi thường là không cần thiết và làm tăng tải trọng. Trọng tải phông chữ: 7,9 MB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100Đề xuất – Sử dụng một tổ hợp trục cụ thể. Ví dụ: 'FILL' đầy đủ axis cung cấp hiệu ứng chuyển đổi CSS giữa các trạng thái và "ROND" 100 là lựa chọn thiết kế của bạn. Trọng tải phông chữ: 2,6 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Tự lưu trữ phông chữ
Lưu trữ biểu tượng
phông chữ
ở 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 để 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 tệp kiểu API Google Fonts, nhưng bạn sẽ cần thêm các quy tắc này 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 tính năng kiểu chữ được gọi là
ghép nối
, cho phép hiển thị ký tự biểu tượng bằng cách sử dụng tên văn bản của biểu tượng. Trình duyệt web tự động thay thế liên kết 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ị một biểu tượng,
thay vì . Đối với các biểu tượng khác, hãy sử dụng viết hoa kiểu snake case cho 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 các trình duyệt hiện đại trên cả thiết bị di động và máy tính. Xem Các dấu nối của tôi có thể sử dụng được không hỗ trợ để 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 Material Symbols Thư viện 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 đều có một chỉ mục điểm mã trong kho lưu trữ git của Google Fonts, cho thấy tập hợp đầy đủ tên và mã ký tự.
Định kiểu biểu tượng trong Material Design
Các biểu tượng này được thiết kế để tuân theo Material Design nguyên tắc, 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. Các kiểu 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, hãy xem Android Vector Asset Studio .
Sử dụng trong iOS
Các biểu tượng này cũng có ở định dạng Biểu tượng Apple. Để tìm hiểu thêm về các biểu tượng này, hãy xem tổng quan và hướng dẫn sử dụng chính thức về Biểu tượng của Apple.
Sử dụng trong Flutter
Chúng tôi dự định hỗ trợ Flutter cho Material Symbols. Hãy chú ý theo dõi thông tin cập nhật nhé.