unicode-rangeProprietatea în CSS este utilizat de @font-facea defini caracterele care sunt acceptate de fata fontului.
@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 */ )Cu alte cuvinte, @font-facese va referi la proprietate și va determina dacă ar trebui să descarce și să utilizeze fontul în funcție de caracterele sau gama de caractere care se potrivesc cu cele din documentul HTML.
Față a fontului: Hei HTML, vreunul dintre următoarele caractere se potrivește cu ceea ce este pe pagină?
HTML: Da, o grămadă dintre ei o fac.
Font-Face: Excelent, iată un fișier de font pe care ar trebui să îl descărcați pentru a afișa acele caractere.
Distincția semantică importantă pe care ar trebui să o numim aici este că unicode-rangedetermină pentru ce caractere poate fi utilizat un font, mai degrabă decât pentru ce caractere este disponibil un font. Cu alte cuvinte, dacă declarăm un unicode-rangeon @font-faceși caracterele care au fost încărcate într-un document HTML se potrivesc cu acel interval, atunci fontul se va descărca și va fi folosit.
Vă puteți imagina beneficiile de performanță care se deschid cu această proprietate. De exemplu, putem încărca un font personalizat numai dacă acesta găzduiește caractere specifice, mai degrabă decât încărcarea întotdeauna a fontului în toate situațiile.
Există chiar o modalitate de a combina două @font-faceseturi pe aceeași font-facedeclarație de proprietate, datorită unui truc la îndemână împărtășit de Jake Archibald. Ideea este că un @font-faceset îl anulează pe celălalt pe baza unicode-rangeperformanței potrivite , optimizând sau pur și simplu îmbunătățind tipografia pe o pagină.
Valori
Orice cod sau interval de caractere Unicode este o unicode-rangevaloare acceptabilă . Veți observa că punctele Unicode sunt precedate de un U+urmat de până la șase caractere care alcătuiesc codul caracterului. Punctele sau intervalele care nu respectă acest format sunt considerate nevalide și vor face ca proprietatea să fie ignorată.
- Personaj unic (de ex.
U+26) - Gama de caractere (de ex.
U+0025-00FF) - Intervalul wildcard (de exemplu
U+4??)
Gama Wildcard este cea mai complicată a grupului. Fiecare ?reprezintă un wildcard în care se va potrivi orice valoare. Ai crede că asta înseamnă că poți să-l joci cu wildcard-ul cu așa ceva:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )Cu toate acestea, acest lucru nu va funcționa. Motivul este că conducerea cu ?implică un cod de caractere care conduce cu 0, ceea ce înseamnă că până la cinci caractere de semn de întrebare pot fi utilizate în ciuda faptului că unicodurile acceptă până la șase caractere în 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????? */ )Există o mulțime de opțiuni Unicode acolo. 0020-007FLatinul de bază ( ) este probabil cea mai comună gamă pentru site-urile în limba engleză, dar unicode-table.com oferă o listă cuprinzătoare a tuturor gamelor disponibile, cu coduri pentru caractere specifice.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Lecturi suplimentare
- Specificații pentru modulul Fonturi CSS Nivelul 3
- Tabel Unicode: o resursă pentru a face referință la seturi și coduri de caractere Unicode.
- Folosind @ font-face: CSS-Tricks post care acoperă modul în care
@font-facefuncționează cu diferite tehnici și exemple de lucru. - Care este treaba cu declararea proprietăților fontului pe @ font-face ?: CSS-Tricks post care este legat de modul în care valorile potrivite din proprietățile fontului pot fi utilizate pentru a determina dacă un font personalizat este descărcat și utilizat de browser.