Các font-optical-sizingthuộc tính CSS cho phép trình duyệt để điều chỉnh các phác thảo của glyphs phông chữ để dễ đọc hơn với kích thước khác nhau. Ví dụ: văn bản nhỏ hơn có thể có đường viền dày hơn để tăng độ tương phản. Mặt khác, văn bản lớn hơn có thể có nội dung “tế nhị” hơn để trích dẫn thông số kỹ thuật.
.element ( font-optical-sizing: none; )Glyphs có phác thảo?
Họ làm! Trên thực tế, tất cả các glyph đều có chúng và chúng chia tỷ lệ với kích thước của phông chữ. Vấn đề là một đường viền siêu mỏng với kích thước phông chữ nhỏ có thể không cung cấp đủ độ tương phản để dễ đọc nhất; tương tự, các đường viền dày hơn ở kích thước lớn hơn có thể có quá nhiều trọng lượng và độ tương phản. font-optical-sizingcố gắng sửa lỗi đó bằng cách cho phép trình duyệt tìm hiểu phác thảo để nó đọc tốt hơn ở các quy mô khác nhau. Kết quả sẽ là văn bản sắc nét hơn và độ dài văn bản hẹp hơn hoặc rộng hơn tùy thuộc vào kích thước phông chữ.
Điều này chỉ hoạt động trên các phông chữ hỗ trợ định cỡ quang học
Và các phông chữ hỗ trợ định cỡ quang học là các phông chữ có thể thay đổi , bao gồm Roboto Delta, một phiên bản có thể thay đổi của Roboto cổ điển của Google. Một phông chữ hỗ trợ khác là Amstelvar. Cả hai phông chữ đều được duy trì bởi Type Network.
Ngay cả khi phông chữ có thể thay đổi, nó phải hỗ trợ rõ ràng định cỡ quang học như một tính năng.
Một cách khác để kích thước phông chữ một cách quang học
Các font-optical-sizingbất động sản là cách hiệu quả nhất để quang học kích thước phông chữ hỗ trợ nó. Một cách khác là sử dụng thuộc font-variation-settingstính, cho phép bạn kiểm soát kích thước quang học opsz, là từ khóa để định kích thước quang học trên các phông chữ thay đổi hỗ trợ nó.
Lưu ý rằng việc sử dụng font-variation-settingsyêu cầu bạn phải đặt opszphù hợp với kích thước phông chữ để mọi thứ có tỷ lệ phù hợp.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Cú pháp
font-optical-sizing: auto | none;- Ban đầu:
auto - Áp dụng cho: tất cả các phần tử
- Kế thừa: có
- Giá trị được tính: từ khóa được chỉ định
- Loại hoạt ảnh: rời rạc
Giá trị
auto: Đây là giá trị mặc định. Nó cho phép các trình duyệt tối ưu hóa văn bản ở các kích thước phông chữ khác nhau để dễ đọc.none: Điều này ngăn các trình duyệt sửa đổi văn bản.
Tại đây khách còn chấp nhận giá trị từ khóa toàn cầu, bao gồm inherit, initialvà unset.
Bản giới thiệu
Hỗ trợ trình duyệt
| I E | Cạnh | Firefox | Trình duyệt Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Không | 17+ | 62+ | 79+ | 11+ | 66+ |
| Chrome dành cho Android | Android Firefox | Trình duyệt Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Tất cả |
đọc thêm
- Mô-đun Phông chữ CSS cấp độ 4 (Bản thảo của người biên tập)
- Tài liệu MDN
- Phông chữ có thể thay đổi: Kích thước quang học, trục tùy chỉnh và các tính năng tò mò khác (Kiểu chữ web đáp ứng)