The unicode-rangeharta di CSS digunakan oleh @font-faceuntuk menentukan watak-watak yang disokong oleh muka 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 kepada harta tanah dan menentukan apakah ia harus memuat turun dan menggunakan font berdasarkan apakah watak atau julat watak sesuai dengan yang ada dalam dokumen HTML.
Font Face: Hai HTML, adakah watak berikut sesuai dengan yang terdapat di halaman?
HTML: Ya, sebilangan besar mereka lakukan.
Font-Face: Hebat, berikut adalah fail fon yang harus anda muat turun untuk memaparkan watak-watak tersebut.
Perbezaan semantik penting yang harus kita sebutkan di sini adalah unicode-rangemenentukan watak apa yang boleh digunakan oleh fon, dan bukannya watak apa yang tersedia untuk digunakan. Dengan kata lain, jika kita menyatakan unicode-rangeon @font-facedan karakter yang telah dimuat dalam dokumen HTML sesuai dengan julat, maka font akan diunduh dan akan digunakan.
Anda dapat membayangkan faedah prestasi yang muncul dengan harta tanah ini. Sebagai contoh, kita dapat memuat font khusus hanya jika memuatkan watak tertentu daripada selalu memuatkan fon dalam semua situasi.
Bahkan ada kaedah untuk menggabungkan dua @font-faceset pada font-facepengisytiharan harta yang sama , berkat helah berguna yang dikongsi oleh Jake Archibald. Idenya adalah bahawa satu @font-faceset mengatasi yang lain berdasarkan prestasi yang sesuai unicode-range, mengoptimumkan, atau hanya meningkatkan tipografi pada halaman.
Nilai
Mana-mana kod atau julat watak unicode adalah unicode-rangenilai yang boleh diterima . Anda akan melihat bahawa titik unicode didahului U+diikuti oleh hingga enam watak yang membentuk kod watak. Titik atau julat yang tidak mengikuti format ini dianggap tidak sah dan akan menyebabkan harta benda diabaikan.
- Watak Tunggal (contohnya
U+26) - Julat Perwatakan (contohnya
U+0025-00FF) - Julat Kad Wild (contohnya
U+4??)
Wildcard Range adalah salah satu yang sukar. Masing-masing ?mewakili wildcard di mana nilai akan sepadan. Anda fikir ini bermakna anda boleh memasukkan wildcard secara keseluruhan dengan perkara 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! */ )Walau bagaimanapun, ini tidak akan berjaya. Sebabnya ialah memimpin dengan ?menyiratkan kod aksara yang dipimpin dengan 0, yang bermaksud bahawa hingga lima watak tanda tanya dapat digunakan walaupun unikod menerima hingga enam karakter.
@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????? */ )Terdapat banyak pilihan unicode di luar sana. Bahasa Latin Asas ( 0020-007F) mungkin rentang yang paling biasa untuk laman web Inggeris, tetapi unicode-table.com menyediakan senarai lengkap semua rentang yang tersedia dengan kod untuk watak tertentu.
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Bacaan lanjut
- Spesifikasi Modul Font CSS Tahap 3
- Jadual Unicode: Sumber untuk merujuk set dan kod watak unicode.
- Menggunakan @ font-face: catatan CSS-Tricks yang merangkumi cara
@font-facekerja dengan teknik dan contoh kerja yang berbeza. - Apa kesepakatan dengan menyatakan sifat fon di @ font-face ?: Posting CSS-Tricks yang berkaitan sejauh mana nilai yang sesuai dalam sifat fon dapat digunakan untuk menentukan sama ada fon khusus dimuat turun dan digunakan oleh penyemak imbas.