Folosind @ font-face - CSS-Tricks

Anonim

@font-faceRegula permite fonturi personalizate care urmează să fie încărcate pe o pagină web. Odată adăugată la o foaie de stil, regula instruiește browserul să descarce fontul de unde este găzduit, apoi să îl afișeze așa cum se specifică în CSS.

Fără regulă, proiectele noastre se limitează la fonturile care sunt deja încărcate pe computerul unui utilizator, care variază în funcție de sistemul utilizat. Iată o detaliere frumoasă a fonturilor de sistem existente.

Cel mai profund suport posibil pentru browser

Aceasta este metoda cu cel mai profund sprijin posibil chiar acum. @font-faceRegula ar trebui să fie adăugate la foaia de stil înainte de orice stiluri.

@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )

Apoi utilizați-l pentru a stiliza elemente de genul acesta:

body ( font-family: 'MyWebFont', Fallback, sans-serif; )

Nivel practic de asistență pentru browser

Lucrurile se îndreaptă puternic către WOFF și WOFF 2, așa că probabil putem scăpa de:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )
Crom Safari Firefox Operă IE Android iOS
5+ 5.1+ 3.6+ 11.50+ 9+ 4.4+ 5.1+

Suport pentru browser ușor mai profund

Dacă aveți nevoie de un fel de mediu fericit între suport complet și suport practic, acesta va acoperi câteva alte baze:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )
Crom Safari Firefox Operă IE Android iOS
3.5+ 3+ 3.5+ 10.1+ 9+ 2.2+ 4.3+

Suport pentru browser super progresiv

Dacă jucăm ferma pe WOFF, atunci ne putem aștepta ca lucrurile să se deplaseze către WOFF2 la un moment dat. Asta înseamnă că putem trăi pe marginea sângerării cu:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )
Crom Safari Firefox Operă IE Android iOS
36+ Nu 35+ cu steag 23+ Nu 37 Nu

Tehnici alternative

@import

Deși @font-faceeste excelent pentru fonturile care sunt găzduite pe propriile noastre servere, pot exista situații în care o soluție de font găzduită este mai bună. Google Fonts oferă acest lucru ca o modalitate de a utiliza fonturile lor. Următorul este un exemplu de utilizare @importa încărcării fontului Open Sans din Google Fonts:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Apoi îl putem folosi pentru a stiliza elemente:

body ( font-family: 'Open Sans', sans-serif; )

Dacă deschideți adresa URL pentru font, puteți vedea de fapt toată @font-facemunca care se face în culise.

Un avantaj al utilizării unui serviciu găzduit este că este probabil să includă toate variantele de fișiere ale fontului, ceea ce asigură o compatibilitate profundă între browser fără a fi nevoie să găzduim singuri toate aceste fișiere.

Consultați stiloul folosind @import pentru fonturi personalizate de CSS-Tricks (@ css-tricks) pe CodePen.

ing o foaie de stil

În mod similar, ați putea face legătura cu același material ca orice alt fișier CSS, în documentul HTML și nu în CSS. Folosind același exemplu din Google Fonts, iată ce am folosi:

Apoi, putem stiliza elementele noastre ca și celelalte metode:

body ( font-family: 'Open Sans', sans-serif; )

Din nou, acesta este importul @font-faceregulilor, dar, în loc să le injectăm în foaia de stil, acestea sunt adăugate în HTML .

Consultați Pen-ul folosind fonturi personalizate de CSS-Tricks (@ css-tricks) pe CodePen.

Este vorba despre același lucru ... ambele tehnici descarcă activele necesare.

Înțelegerea tipurilor de fișiere de fonturi

Fragmentul original din partea de sus a acestui post face referire la o mulțime de fișiere cu extensii ciudate. Să trecem peste fiecare și să înțelegem mai bine ce înseamnă.

WOFF / WOFF2

Reprezintă: Web Open Font Format.

Creată pentru utilizare pe web și dezvoltată de Mozilla împreună cu alte organizații, fonturile WOFF se încarcă adesea mai repede decât alte formate, deoarece utilizează o versiune comprimată a structurii utilizate de fonturile OpenType (OTF) și TrueType (TTF). Acest format poate include metadate și informații despre licență în fișierul de fonturi. Acest format pare a fi câștigătorul și către toate browserele.

WOFF2 este următoarea generație de WOFF și are o compresie mai bună decât originalul.

SVG / SVGZ

Stabilește pentru: Grafică vectorială scalabilă (font)

SVG este o recreere vectorială a fontului, care îl face mult mai ușor în dimensiunea fișierului și îl face, de asemenea, ideal pentru utilizarea mobilă. Acest format este singurul permis de versiunea 4.1 și mai jos a Safari pentru iOS. Fonturile SVG nu sunt acceptate în prezent de Firefox, IE sau IE Mobile. Firefox a amânat implementarea la nesfârșit pentru a se concentra asupra WOFF.

SVGZ este versiunea zip a SVG.

EOT

Stabilește pentru: tip deschis deschis.

Acest format a fost creat de Microsoft (inovații inițiali ai @font-face) și este un standard de fișiere proprietar acceptat numai de IE. De fapt, este singurul format pe care IE8 și mai jos îl vor recunoaște atunci când îl utilizați @font-face.

OTF / TTF

Reprezintă: Font OpenType și Font TrueType.

Formatul WOFF a fost inițial creat ca o reacție la OTF și TTF, în parte, deoarece aceste formate ar putea fi copiate cu ușurință (și ilegal), cu toate acestea, OpenType are capabilități de care ar putea fi interesați mulți designeri (ligaturi și altele).

O notă privind performanța

Fonturile web sunt excelente pentru proiectare, dar este important să înțelegem și impactul lor asupra performanței web. Fonturile personalizate fac adesea ca site-urile să aibă o performanță, deoarece fontul trebuie descărcat înainte de a fi afișat.

Un simptom obișnuit a fost un moment scurt în care fonturile se încarcă mai întâi ca rezervă, apoi clipesc cu fontul descărcat. Paul Irish are o postare mai veche despre aceasta (denumită „FOUT”: Flash Of Unstyled Text).

În aceste zile, browserele ascund, în general, textul înainte ca fontul personalizat să se încarce în mod implicit. Mai bine sau mai rău? Tu decizi. Puteți exercita un anumit control asupra acestui lucru prin diferite tehnici. Un pic în afara domeniului de aplicare al acestui articol, dar iată un trifecta de articole ale lui Zach Leatherman pentru a vă ajuta să începeți în gaura iepurelui:

  • Better @ font-face cu Font Load Events
  • Cum folosim fonturile web în mod responsabil sau, evitând @ font-face-palm
  • Flash of Faux Text - și mai multe despre încărcarea fonturilor

Iată câteva alte considerații la implementarea fonturilor personalizate:

Urmăriți dimensiunea fișierului

Fonturile pot fi surprinzător de grele, deci înclinați-vă spre opțiuni care oferă versiuni mai ușoare. De exemplu, favorizați un set de fonturi care este de 50 KB față de unul care cântărește 400 KB.

Limitați setul de caractere, dacă este posibil

Chiar aveți nevoie de greutățile îndrăznețe și negre pentru un singur font? Limitarea seturilor de fonturi pentru a încărca numai ceea ce este folosit este o idee bună și există câteva sfaturi bune despre asta aici.

Luați în considerare fonturile de sistem pentru ecrane mici

Multe dispozitive sunt blocate pe conexiuni mizerabile. Un truc ar putea fi să vizați ecrane mai mari atunci când încărcați fontul personalizat folosind @media.

În acest exemplu, ecranele mai mici de 1000 pixeli vor primi în schimb un font de sistem, iar ecranele care sunt largi și mai sus vor primi fontul personalizat.

@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )

Servicii de fonturi

Există o serie de servicii care vor găzdui fonturi și vor oferi acces și la fonturi cu licență comercială. Avantajele utilizării unui serviciu se reduc adesea la livrarea eficientă a unei selecții largi de fonturi legale (de exemplu, servirea lor pe un CDN rapid).

Iată câteva servicii de fonturi găzduite:

  • Tipografie Cloud
  • Typekit
  • Fontdeck
  • Tip web
  • Fontspring
  • Tipotică
  • Fonts.com
  • Google Fonts
  • Font Squirrel

Cum rămâne cu Icon Fonts?

Este adevărat, @ font-face poate încărca un fișier de font plin de pictograme care pot fi utilizate pentru un sistem de pictograme. Cu toate acestea, cred că este mult mai bine să folosiți SVG ca sistem de pictograme. Iată o comparație a celor două metode.

Mai multe resurse

  • Bazele API-ului Google Font
  • Familii de fonturi CSS