Share
Fonturile web au ajutat la inspirarea vieții în desene și modele, ajutându-ne să evităm implicațiile sistemului atât de răspândite în primele zile ale designului web. Cu atât de multe opțiuni disponibile astăzi, noi avem la fel de multe trucuri până la mâneci, pentru a servi și a personaliza fonturi personalizate. Nivelul 4 al modulului Fonturi CSS conturează mai multe opțiuni interesante pe care le veți iubi, inclusiv câteva proprietăți interesante, cum ar fi font-min / max-size. Acest articol nu va descoperi ultima etapă a nivelului 4, dar va scoate în evidență părțile interesante aflate încă în fază incipientă. Aventura începe acum!
În prezent se află între două nivele de specificații. Pe de o parte avem nivelul 3; un spec. care a fost la "Recomandarea candidatului" din octombrie 2013. Privind în perspectivă, avem nivelul 4; o spec. care se odihnește la "Proiectul de lucru" din iulie 2017. Dacă aveți nevoie de un memento cu privire la ordinea etapelor specificațiilor W3C, să luăm un moment pentru a le examina:
Acum, că înțelegem etapele de specificare, să ne aruncăm în bucăți de nivelul 4 și să scoatem la lumină câteva dintre caracteristicile cunoscute și documentate noi acestui modul.
Părțile din nivelul 3 care au devenit standardizate vor fi portate în nivelul 4, dar nivelul 4 va include și adăugările lor unice. Secțiuni precum Variațiile fonturilor, Comenzile de redare a fonturilor, Suportul fontului color, Proprietățile de bază ale fontuluișiResursele de fonturi vor conține elemente noi, pe care mulți dezvoltatori le vor găsi utile.
Partea specifică a fontului redată este determinată de familie de fonturi și alte proprietăți ale fontului care se aplică unui element dat, cum ar fi grosimea fontului și stilul fontului de exemplu. Această structură permite setările să varieze independent unul de celălalt și de ceea ce cuprinde Proprietățile fonturilor de bază. Deci, ce este planificat pentru acest grup?
.element font-min-size: 0.875rem; font-max-size: 5rem;
Din toate cele prezentate la nivelul 4, aceste două proprietăți sunt preferate pentru că ambele vor permite un element marimea fontului pentru a deveni "fixat" între valorile furnizate. Aceasta este cu siguranță o veste super minunată pentru fanii de design receptivi. Valorile pot fi o dimensiune absolută, o dimensiune relativă sau un procentaj de lungime.
În acest moment nu există nicio documentație care să menționeze modul în care evenimentul de redimensionare a browserului declanșează fie proprietatea, și dacă dorești să experimentezi această funcție utilizând parametrul experimental al platformei web din Chrome, nu ai noroc.
Majoritatea elementelor prezentate în această secțiune ajută la controlul aspectelor care se referă la preluarea, referirea și afișarea familiei font-urilor alese de dvs..
@ font-face font-display: auto | bloc | swap | fallback | opțională;
Această proprietate determină modul în care este afișată o față a fontului, bazată pe dacă și când a fost descărcată și gata de utilizare de către browser. De asemenea, este destinat utilizării în cadrul dvs. @ Font-face sau @ font-feature-valori declaraţie.
Accentsconagua
auto: Politica de afișare a fonturilor este definită de utilizator (adică browserul), cu excepția cazului în care este definită explicit în CSS.bloc: Oferă fontului o scurtă perioadă de blocare (în majoritatea cazurilor se recomandă 3s) și o perioadă de schimbare infinită.schimb: Conferă fontului o perioadă de blocare 0s și o perioadă de swap infinită.da înapoi: Conferă fontului o perioadă de bloc extrem de mică (în cele mai multe cazuri se recomandă 100 ms sau mai puțin) și o perioadă scurtă de swap (în majoritatea cazurilor se recomandă 3 s).facultativ: Oferă fontului o perioadă extrem de mică de blocare (în cele mai multe cazuri este recomandată o valoare de 100ms sau mai mică) și o perioadă de schimbare 0s.Pentru oricine acordă o atenție deosebită performanței fonturilor web și care este ocupat în dezbateri zilnice főút sau Foit, atunci această proprietate vă va face extrem de mulțumit.
@ font-feature-values font-display: auto | bloc | swap | fallback | opțională;
Cand font-display este omis în a @ Font-face regula, agentul utilizator utilizează font-display valoarea setată prin @ font-feature-valori pentru relevante familie de fonturi dacă este setat, altfel este implicit font-display: auto. Vezi explicația anterioară privind font-display valorile.
Setul de reguli este perfect pentru cazurile când un font este difuzat prin intermediul unei terțe părți și nu aveți control asupra acestuia @ Font-face dar sunt încă în măsură să stabilească o valoare implicită font-display pentru politica furnizată familie de fonturi. Aceasta este o veste bună pentru acele site-uri de construcție cu acțiuni non-stop terțe părți.
@ font-feature-values font-family: "Font personalizat", sans-serif; font-display: fallback;
În timp ce sunt încă noi și puțin vagi, nu pot să-mi asum doar pentru a controla un anumit familie de fonturi comportamentul de afișare, dezvoltatorul trebuie să utilizeze familie de fonturi proprietate în cadrul acestui set de reguli pentru a viza fontul dorit. Din nou, aceasta nu este decât o presupunere din partea mea și nu este reală prin nici un mijloc.
Această secțiune este 100% nouă și specifică nivelului 4. Cele mai multe dintre caracteristicile documentate în prezent se referă la dimensiunea și setările fiecărei fețe a fontului.
Această proprietate este utilizată pentru a menține trăsăturile stilistice și pentru a îmbunătăți lizibilitatea la diferite dimensiuni optice. Cu tipul digital avem capacitatea de a scala un font de orice dimensiune, dar acest lucru nu ia în considerare aspectul tipului la aceste dimensiuni diferite.
"Textul redat la diferite dimensiuni beneficiază adesea de reprezentări vizuale ușor diferite. De exemplu, pentru a ajuta cititul la dimensiuni mici, loviturile sunt adesea mai groase, cu serifi mari. Textul mai mare are adesea o figură mai delicată, cu un contrast mai mare între loviturile mai groase și mai subțiri. "~ Proiectul de lucru de nivel 4
.element font-optic-dimensioning: auto | nici unul
auto: Agentul de utilizator poate modifica forma glifurilor bazate pe marimea fontului și densitatea pixelilor ecranului. Pentru fonturile OpenType și TrueType care utilizează variante de fonturi, acest lucru se face adesea utilizând opsz variația fontului.nici unul: Agentul utilizator nu trebuie să modifice forma glifurilor pentru mărimea optică..element font-variation-settings: normal []
Această proprietate oferă un nivel scăzut al controlului asupra variațiilor de fonturi OpenType sau TrueType. Se intenționează ca o modalitate de a oferi acces la variațiile de fonturi care nu sunt utilizate pe scară largă, dar sunt necesare pentru un caz special de utilizare.
normal: Textul este stabilit utilizând setările implicite. .element / * numele axei cu patru litere și numărul * / font-variation-settings: "opsz" 0.5;
Valoarea șirului folosit în codul de mai sus este cunoscută sub denumirea de axă cu patru litere care descrie caracteristica pe care doriți să o modificați, împreună cu valoarea variației care variază în mod obișnuit de la 0 la 1, dar poate fi, de asemenea, valori negative atunci când este necesar. Variațiile permise vor depinde întotdeauna de fața fontului aleasă.
Fonturile de culoare sunt noi la nivelul 4 și permit fișierelor de fonturi să descrie nu doar contururile care descriu marginile glifurilor, ci și culorile prezente în interiorul glifurilor. De ce doriți să utilizați oricare dintre aceste funcții? Vă sugerez să citiți acest articol de către Grace Fussell pentru a obține până la viteză:
.element font-paletă: normal | lumina | intuneric |;
Multe formate de fișiere de fonturi color permit parametrizarea culorilor în glif. În aceste fonturi, culorile sunt menționate de index atunci când se descrie geometria fiecărui glif. Acești indicatori sunt rezolvați într-o paletă activă curentă utilizând un tabel de căutare prezent în interiorul fontului. Cu toate acestea, multe fonturi conțin mai multe palete, fiecare conținând un set de culori complementare alese de designerul de fonturi pentru a oferi rezultate vizuale plăcute. Dezvoltatorii pot defini o paletă utilizând @ font-paleta-valori regula menționată în secțiunea următoare.
/ * Sintaxă * / @ font-paletă-valori/ * Exemplu * / @ font-paletă-valori Augusta font-family: Handover Sans; paleta de bază: 3; 1: rgb (43, 12, 9); 3: var (- evidențiere);
Aceasta reprezintă o paletă de culori folosită într-un font. Definește o paletă de culori și asociază paleta de culori cu un anumit font. Acest lucru permite unui autor de web să aleagă culori arbitrare pe care să le folosească în interiorul unui font de culoare, în loc să se limiteze la paletele preexistente din interiorul fișierelor de fonturi
base-paletă: Acest descriptor specifică o paletă în font, pe care rulează regulile valorii @ paletă-valori-paletă care utilizează valoarea inițială. Daca nu .element font-family: 'Font personalizat'; font-prezentare: auto | text | emoticonuri;
Această proprietate permite autorilor web să selecteze dacă prezentarea emoji sau prezentarea textului este utilizată pentru anumite puncte de cod emodi. O imensă victorie pentru fanaticii emoji 😎
Există, desigur, o mulțime de noi caracteristici interesante care coboară pe conducta pentru fonturile web și vă încurajez să începeți să experimentați cu favoritele pe măsură ce devin disponibile. Dacă aveți un favorit special de la nivelul 4 sau chiar nivelul 3, anunțați-ne în comentarii, inclusiv opiniile pe care le puteți avea cu privire la caracteristicile pe care le-am discutat.
!
