font-optical-sizingCSS özelliği farklı büyüklüklerde Daha okunaklı olmaları için yazı tipi glif ana hattını ayarlamak için tarayıcı sağlar. Örneğin, daha küçük metin kontrastını artırmak için daha kalın bir anahat alabilir. Kapak tarafında, daha büyük metin, spesifikasyonu alıntılamak için daha "hassas" bir şey alabilir.
.element ( font-optical-sizing: none; )Gliflerin ana hatları var mı?
Onlar yapar! Aslında, tüm glifler bunlara sahiptir ve yazı tipinin boyutuna göre ölçeklenirler. Sorun şu ki, küçük bir yazı tipi boyutunda süper ince bir çerçeve, en iyi okunabilirlik için yeterli kontrast sağlamayabilir; benzer şekilde, daha büyük boyutlarda daha kalın ana hatların çok fazla ağırlığı ve kontrastı olabilir. font-optical-sizingtarayıcının ana hatlarla oynamasına izin vererek bunu düzeltmeye çalışır, böylece farklı ölçeklerde daha iyi okuyabilir. Sonuç, yazı tipi boyutuna bağlı olarak daha net metin ve daha dar veya daha geniş metin uzunlukları olacaktır.
Bu yalnızca optik boyutlandırmayı destekleyen yazı tiplerinde çalışır
Ve optik boyutlandırmayı destekleyen yazı tipleri , Google'ın klasik Roboto'sunun değişken bir versiyonu olan Roboto Delta da dahil olmak üzere değişken yazı tipleridir . Diğer bir destekleyici yazı tipi Amstelvar'dır. Her iki yazı tipi de Type Network tarafından korunur.
Bir yazı tipi değişken olsa bile, bir özellik olarak optik boyutlandırmayı açıkça desteklemesi gerekir.
Yazı tiplerini optik olarak boyutlandırmanın başka bir yolu
font-optical-sizingMülkiyet optik boyutuna bir yazı olduğunu destekler bunun en etkili yoludur. Diğer bir yol, onu destekleyen değişken yazı tiplerinde optik boyutlandırma için anahtar kelime olan font-variation-settingsoptik boyutlandırmayı kontrol etmenize olanak tanıyan özelliği kullanmaktır opsz.
Kullanmanın , yazı tipi boyutuna göre font-variation-settingsayarlamanızı gerektirdiğine dikkat edin, opszböylece her şey doğru şekilde ölçeklenir.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sözdizimi
font-optical-sizing: auto | none;- İlk:
auto - Şunlar için geçerlidir: tüm öğeler
- Devralındı: evet
- Hesaplanan değer: belirtilen anahtar kelime
- Animasyon türü: ayrık
Değerler
auto: Bu varsayılan değerdir. Tarayıcıların okunaklılık için farklı yazı tipi boyutlarında metni optimize etmesine olanak tanır.none: Bu, tarayıcıların metni değiştirmesini engeller.
Özellik ayrıca inherit, initialve dahil olmak üzere genel anahtar kelime değerlerini de kabul eder unset.
Demo
Tarayıcı desteği
| IE | Kenar | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Hayır | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android Tarayıcı | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Herşey |
daha fazla okuma
- CSS Yazı Tipleri Modülü Seviye 4 (Editörün Taslağı)
- MDN belgeleri
- Değişken yazı tipleri: Optik boyut, özel eksenler ve diğer merak edilenler (Duyarlı Web Tipografisi)