Các unicode-rangebất động sản trong CSS được sử dụng bởi @font-faceđể xác định những nhân vật được hỗ trợ bởi các mặt chữ.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ unicode-range: U+00-FF; /* Define the available characters */ )Nói cách khác, @font-facesẽ tham chiếu đến thuộc tính và xác định xem nó có nên tải xuống và sử dụng phông chữ hay không dựa trên việc các ký tự hoặc phạm vi ký tự có khớp với các thuộc tính trong tài liệu HTML hay không.
Khuôn mặt phông chữ: Này HTML, có ký tự nào sau đây khớp với những gì trên trang không?
HTML: Đúng vậy, rất nhiều người trong số họ có.
Font-Face: Tuyệt vời, đây là một tệp phông chữ bạn nên tải xuống để hiển thị các ký tự đó.
Sự phân biệt ngữ nghĩa quan trọng mà chúng ta nên gọi ở đây là unicode-rangexác định những ký tự mà một phông chữ có thể được sử dụng, chứ không phải những ký tự mà một phông chữ có sẵn để sử dụng. Nói cách khác, nếu chúng ta khai báo a unicode-rangeon @font-facevà các ký tự đã tải trong tài liệu HTML khớp với phạm vi đó, thì phông chữ sẽ tải xuống và được đưa vào sử dụng.
Bạn có thể tưởng tượng những lợi ích về hiệu suất mở ra với tài sản này. Ví dụ: chúng tôi có thể tải một phông chữ tùy chỉnh chỉ khi nó chứa các ký tự cụ thể thay vì luôn tải phông chữ trong mọi tình huống.
Thậm chí có một cách để kết hợp hai @font-facetập hợp trên cùng một font-facekhai báo thuộc tính, nhờ một thủ thuật hữu ích được chia sẻ bởi Jake Archibald. Ý tưởng là một @font-facetập hợp ghi đè tập hợp kia dựa trên sự phù hợp unicode-range, tối ưu hóa hiệu suất hoặc đơn giản là nâng cao kiểu chữ trên một trang.
Giá trị
Bất kỳ mã hoặc dải ký tự unicode nào đều là unicode-rangegiá trị được chấp nhận . Bạn sẽ nhận thấy rằng các điểm unicode được đứng trước bởi U+sau đó là tối đa sáu ký tự tạo nên mã ký tự. Các điểm hoặc phạm vi không tuân theo định dạng này được coi là không hợp lệ và sẽ khiến thuộc tính bị bỏ qua.
- Ký tự đơn (ví dụ
U+26) - Phạm vi ký tự (ví dụ
U+0025-00FF) - Dải ký tự đại diện (ví dụ
U+4??)
Dãy Wildcard là một trong những dãy phức tạp. Mỗi ?ký tự đại diện cho một ký tự đại diện trong đó bất kỳ giá trị nào sẽ khớp. Bạn sẽ nghĩ rằng điều đó có nghĩa là bạn có thể ký tự đại diện toàn bộ mọi thứ với một cái gì đó như sau:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Tuy nhiên, điều này sẽ không hoạt động. Lý do là vì dẫn đầu với ?ngụ ý một mã ký tự dẫn với 0, có nghĩa là có thể sử dụng tối đa năm ký tự dấu chấm hỏi mặc dù mã unicodes chấp nhận tổng cộng sáu ký tự.
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+?????; /* This works and is equivalent to U+0????? */ )Có rất nhiều tùy chọn unicode trên mạng. Tiếng Latinh cơ bản ( 0020-007F) có lẽ là phạm vi phổ biến nhất cho các trang web tiếng Anh, nhưng unicode-table.com cung cấp danh sách toàn diện tất cả các phạm vi có sẵn với mã cho các ký tự cụ thể.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Đọc thêm
- Đặc điểm kỹ thuật mô-đun Phông chữ CSS cấp 3
- Bảng Unicode: Một tài nguyên để tham chiếu các bộ ký tự và mã unicode.
- Sử dụng @ font-face: Bài đăng CSS-Tricks
@font-facetrình bày cách thức hoạt động với các kỹ thuật và ví dụ hoạt động khác nhau. - Việc khai báo thuộc tính phông chữ trên @ font-face là gì ?: Bài đăng CSS-Tricks có liên quan đến cách các giá trị phù hợp trong thuộc tính phông chữ có thể được sử dụng để xác định xem phông chữ tùy chỉnh có được tải xuống và sử dụng bởi trình duyệt hay không.