CSS'deki unicode-rangeözellik @font-face, yazı tipi yüzü tarafından desteklenen karakterleri tanımlamak için kullanılır .
@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 */ )Başka bir deyişle, @font-faceözelliğe atıfta bulunacak ve karakterlerin veya karakter aralığının HTML belgesindekilerle eşleşip eşleşmediğine bağlı olarak fontu indirip kullanmaması gerektiğini belirleyecektir.
Yazı Tipi Yüzü: Hey HTML, aşağıdaki karakterlerden herhangi biri sayfadakilerle eşleşiyor mu?
HTML: Evet, birçoğu yapıyor.
Font-Face: Harika, işte bu karakterleri görüntülemek için indirmeniz gereken bir font dosyası.
Burada belirtmemiz gereken önemli anlamsal ayrım, unicode-rangebir yazı tipinin hangi karakterlerin kullanılabileceğinden ziyade bir yazı tipinin hangi karakterler için kullanılabileceğini belirlemesidir. Başka bir deyişle, bir unicode-rangeaçık @font-faceolarak bir HTML belgesine yüklenen karakterlerin bu aralıkla eşleştiğini bildirirsek, yazı tipi indirilecek ve kullanılacaktır.
Bu özellik ile ortaya çıkan performans avantajlarını hayal edebilirsiniz. Örneğin, her durumda yazı tipini her zaman yüklemek yerine, yalnızca belirli karakterleri barındırıyorsa özel bir yazı tipi yükleyebiliriz.
Jake Archibald tarafından paylaşılan kullanışlı bir numara sayesinde @font-faceaynı font-facemülk beyanında iki seti birleştirmenin bir yolu bile var . Buradaki fikir, bir @font-facesetin eşleşmeye unicode-range, performansı optimize etmeye veya bir sayfadaki tipografiyi geliştirmeye dayalı olarak diğerini geçersiz kılmasıdır.
Değerler
Herhangi bir unicode karakter kodu veya aralığı kabul edilebilir bir unicode-rangedeğerdir. Unicode noktalarının önünde, U+ardından karakter kodunu oluşturan en fazla altı karakter olduğunu fark edeceksiniz . Bu biçime uymayan noktalar veya aralıklar geçersiz kabul edilir ve özelliğin göz ardı edilmesine neden olur.
- Tek Karakter (örneğin
U+26) - Karakter Aralığı (örneğin
U+0025-00FF) - Joker Karakter Aralığı (ör.
U+4??)
Joker Karakter Aralığı, gruplardan en zor olanıdır. Her biri ?, herhangi bir değerin eşleşeceği bir joker karakteri temsil eder. Bunun, şunun gibi bir şeyle her şeyi joker karakter kullanabileceğiniz anlamına geldiğini düşünürsünüz:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Ancak bu işe yaramayacaktır. Bunun nedeni, ile satır başının, ?ile yol açan bir karakter kodunu ifade etmesidir 0, yani unicodes toplam altı karaktere kadar kabul etmesine rağmen en fazla beş soru işareti karakteri kullanılabilir.
@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????? */ )Orada bir ton unicode seçeneği var. Temel Latince ( 0020-007F), muhtemelen İngilizce siteler için en yaygın aralıktır, ancak unicode-table.com, belirli karakterler için kodlarla birlikte mevcut tüm aralıkların kapsamlı bir listesini sağlar.
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Daha fazla okuma
- CSS Yazı Tipleri Modül Seviye 3 Spesifikasyonu
- Unicode Tablosu: Unicode karakter kümelerine ve kodlarına başvurmak için bir kaynak.
- @ Font-face kullanma: CSS-Tricks
@font-face, farklı teknikler ve çalışma örnekleriyle nasıl çalıştığını anlatan bir gönderi . - @ Font-face'de yazı tipi özelliklerinin bildirilmesiyle ilgili sorun nedir ?: CSS-Tricks, özel bir yazı tipinin tarayıcı tarafından indirilip kullanılıp kullanılmadığını belirlemek için yazı tipi özelliklerindeki eşleşen değerlerin nasıl kullanılabileceğiyle ilgili.