unicode-range

Cú pháp

/* Các giá trị <unicode-range> */
unicode-range: U+26; /* một điểm mã đơn */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* phạm vi điểm mã */
unicode-range: U+4??; /* phạm vi ký tự đại diện */
unicode-range: U+0025-00FF, U+4??; /* nhiều giá trị */

Giá trị

single code point

Một điểm mã Unicode đơn lẻ, ví dụ U+26.

code point range

Một phạm vi các điểm mã Unicode. Ví dụ, U+0025-00FF nghĩa là bao gồm tất cả ký tự trong phạm vi từ U+0025 đến U+00FF.

wildcard range

Một phạm vi điểm mã Unicode chứa ký tự đại diện, tức là dùng ký tự '?', ví dụ U+4?? nghĩa là bao gồm tất cả ký tự trong phạm vi từ U+400 đến U+4FF.

Mô tả

Mục đích của descriptor này là cho phép phân đoạn các tài nguyên font để trình duyệt chỉ cần tải về tài nguyên font cần thiết cho nội dung văn bản của một trang cụ thể. Ví dụ, một trang web có nhiều bản địa hóa có thể cung cấp các tài nguyên font riêng biệt cho tiếng Anh, tiếng Hy Lạp và tiếng Nhật. Đối với người dùng xem phiên bản tiếng Anh của trang, tài nguyên font cho tiếng Hy Lạp và tiếng Nhật không cần phải tải về, giúp tiết kiệm băng thông.

Định nghĩa chính thức

Cú pháp chính thức

unicode-range = 
  <unicode-range-token>#  

Ví dụ

Sử dụng font khác cho một ký tự đơn

Trong ví dụ này, chúng ta tạo một phần tử <div> duy nhất, với chuỗi văn bản bao gồm dấu ampersand mà chúng ta muốn tạo kiểu bằng một font khác. Để làm rõ điều này, chúng ta sẽ dùng font sans-serif, Helvetica, cho văn bản và font serif, Times New Roman, cho dấu ampersand.

Trong CSS, chúng ta thực tế đang định nghĩa một @font-face hoàn toàn riêng biệt chỉ bao gồm một ký tự duy nhất, nghĩa là chỉ ký tự này mới được tạo kiểu với font này. Chúng ta cũng có thể thực hiện điều này bằng cách bọc dấu ampersand trong một <span> và áp dụng font khác chỉ cho phần tử đó, nhưng cách đó thêm một phần tử và bộ quy tắc.

HTML

<div>Me & You = Us</div>

CSS

@font-face {
  font-family: "Ampersand";
  src: local("Times New Roman");
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: "Ampersand", "Helvetica", sans-serif;
}

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• font-display
• font-family
• font-stretch
• font-style
• font-weight
• font-feature-settings
• font-variation-settings
• src