The unicode-rangeproperti di CSS digunakan oleh @font-faceuntuk menentukan karakter yang didukung oleh font.
@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 */ )Dengan kata lain, @font-faceakan merujuk ke properti dan menentukan apakah harus mengunduh dan menggunakan font berdasarkan apakah karakter atau rentang karakter cocok dengan yang ada di dokumen HTML.
Jenis Huruf: Hai HTML, apakah salah satu karakter berikut cocok dengan yang ada di halaman?
HTML: Ya, banyak dari mereka melakukannya.
Font-Face: Bagus, berikut adalah file font yang harus Anda unduh untuk menampilkan karakter tersebut.
Perbedaan semantik penting yang harus kita sebutkan di sini adalah yang unicode-rangemenentukan karakter apa yang dapat digunakan font, daripada karakter apa yang tersedia untuk digunakan font. Dengan kata lain, jika kita mendeklarasikan unicode-rangeon @font-facedan karakter yang dimuat dalam dokumen HTML cocok dengan kisaran itu, maka font akan diunduh dan digunakan.
Anda dapat membayangkan manfaat kinerja yang terbuka dengan properti ini. Misalnya, kita dapat memuat font khusus hanya jika ia mengakomodasi karakter tertentu daripada selalu memuat font di semua situasi.
Bahkan ada cara untuk menggabungkan dua @font-faceset pada font-facedeklarasi properti yang sama , berkat trik praktis yang dibagikan oleh Jake Archibald. Idenya adalah bahwa satu @font-faceset menimpa yang lain berdasarkan kecocokan unicode-range, mengoptimalkan kinerja, atau hanya meningkatkan tipografi pada halaman.
Nilai
Kode atau rentang karakter unicode apa pun adalah unicode-rangenilai yang dapat diterima . Anda akan melihat bahwa titik unicode diawali dengan U+diikuti hingga enam karakter yang membentuk kode karakter. Titik atau rentang yang tidak mengikuti format ini dianggap tidak valid dan akan menyebabkan properti diabaikan.
- Karakter Tunggal (mis.
U+26) - Rentang Karakter (misalnya
U+0025-00FF) - Rentang Karakter Pengganti (mis.
U+4??)
Rentang Wildcard adalah yang paling rumit dari kelompok itu. Masing-masing ?mewakili karakter pengganti di mana setiap nilai akan cocok. Anda akan berpikir itu berarti Anda dapat memberi wildcard semuanya dengan sesuatu seperti ini:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Namun, ini tidak akan berhasil. Alasannya adalah bahwa memimpin dengan ?menyiratkan kode karakter yang mengarah dengan 0, yang berarti bahwa hingga lima karakter tanda tanya dapat digunakan meskipun unicode menerima hingga enam karakter total.
@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????? */ )Ada banyak opsi unicode di luar sana. Bahasa Latin Dasar ( 0020-007F) mungkin adalah rentang yang paling umum untuk situs berbahasa Inggris, tetapi unicode-table.com menyediakan daftar lengkap semua rentang yang tersedia dengan kode untuk karakter tertentu.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Bacaan lebih lanjut
- Spesifikasi CSS Fonts Module Level 3
- Tabel Unicode: Sumber daya untuk mereferensikan kumpulan karakter dan kode unicode.
- Menggunakan @ font-face: CSS-Trik posting yang membahas bagaimana
@font-facebekerja dengan berbagai teknik dan contoh kerja. - Apa masalahnya dengan mendeklarasikan properti font di @ font-face ?: Posting CSS-Tricks yang terkait sejauh bagaimana nilai yang cocok dalam properti font dapat digunakan untuk menentukan apakah font kustom diunduh dan digunakan oleh browser.