Ús de fonts personalitzades a pàgines web
El contingut del text sempre ha estat un lloc web important, però en els primers temps de la Web, els dissenyadors i desenvolupadors es van veure molt limitats en el control tipogràfic que tenien sobre les seves pàgines web. Això va incloure una limitació en els tipus de lletra que van poder utilitzar de forma fiable als seus llocs. Probablement hàgiu escoltat el terme "fonts web segures" mencionades anteriorment. Això es refereix al petit conjunt de fonts que molt probablement es van incloure a l'ordinador de la persona, el que significa que si el lloc usava una d'aquestes fonts, era una aposta segura que es representaria correctament al navegador d'una persona.
Actualment, els professionals de la web disposen d'una sèrie de fonts noves i opcions de tipus per treballar, una de les quals és el format WOFF.
Què és WOFF?
WOFF és un acrònim que significa "Web Open Font Format". S'utilitza per comprimir fonts per usar amb la propietat CSS @ font-face. És una forma d'inserir fonts a les pàgines web per tal que pugueu utilitzar fonts especialitzades més enllà de les típiques "Arial, Times New Roman, Geòrgia", que són algunes d'aquestes fonts tipogràfiques segures web abans esmentades.
WOFF es va presentar al W3C com a estàndard per a fonts d'empaquetament per a pàgines web. Es va convertir en un projecte de treball el 16 de novembre de 2010. Avui tenim WOFF 2.0, que millora la compressió des de la primera versió del format en gairebé el 30%. En alguns casos, aquests estalvis poden ser encara més substancials.
Per què utilitzar WOFF?
Els tipus de lletra web, inclosos els que s'ofereixen a través del format WOFF, ofereixen molts avantatges respecte a altres opcions de fonts. Tan útils com aquells tipus de lletres web segurs han estat, i segurament hi ha un lloc per aquestes fonts al nostre treball, és bo ampliar també les nostres opcions i obrir les nostres opcions tipogràfiques.
Els tipus de lletra WOFF tenen els següents beneficis:
- Són més accessibles que les fonts com a imatges. WOFF estrena text HTML senzill amb CSS, que us proporciona accessibilitat i control de disseny que les imatges no permetran.
- Els fitxers WOFF inclouen informació tipogràfica, com formes contextuals i figures d'estil antic. D'aquesta manera, les pàgines web ofereixen una millor tipografia perquè utilitza els caràcters correctes, no només les aproximacions.
- Els tipus de lletra WOFF poden ajudar-vos amb la internacionalització perquè podeu inserir fonts amb caràcters d'altres idiomes.
- Com tot el text amb estil CSS, les fonts amb WOFF són més amigables amb els motors de cerca. Els motors de cerca no "veuen" el text incrustat en una imatge, i mentre que el text ALT pot ajudar, no hi ha cap substitut del text en si.
- Els tipus de lletra WOFF es comprimeixen, de manera que són més petits que altres tipus de fitxers de fonts. Això ajudarà amb la velocitat de descàrrega del lloc i el rendiment general.
- Podeu utilitzar fitxers WOFF per preservar la vostra identitat de marca incrustant els tipus de lletra corporatius com a fitxers WOFF.
Suport del navegador WOFF
WOFF té un excel·lent suport per al navegador en navegadors moderns, incloent:
- Chrome 6+
- Firefox 3.6 o superior
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1 o superior
És essencialment compatible en general en aquests dies, amb l'única excepció de totes les versions d'Opera Mini.
Com utilitzar fonts WOFF
Per utilitzar un fitxer WOFF, heu de carregar un fitxer WOFF al vostre servidor web, donar-li un nom a la propietat @ font-face i, a continuació, truqueu a la font al vostre CSS. Per exemple:
- Carregueu la font anomenada myWoffFont.woff al directori / fonts del servidor web.
- En el vostre fitxer CSS, afegiu una secció de @ font-face:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') format ('woff');
}
- Afegiu el nom del tipus de lletra nou (myWoffFont) a la vostra pila de fonts CSS, igual que qualsevol altre nom de font:
p {
font-family: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
On obtenir fonts WOFF
Hi ha dos llocs fantàstics on podeu trobar moltes fonts de WOFF que són gratuïtes per a ús comercial i no comercial:
- Obre la biblioteca de fonts
- Font Esquirol
Si teniu una llicència per utilitzar una font que no està disponible en format WOFF, podeu utilitzar un creador de WOFF com a Font Squirrel per convertir els vostres fitxers de font en fitxers WOFF. També hi ha una eina de línia d'ordres anomenada sfnt2woff que podeu utilitzar a Macintosh i Windows per convertir els tipus de lletra TrueType / OpenType a WOFF.
Baixeu el binari apropiat al vostre sistema i executeu-lo a la línia d'ordres (o Terminal) i seguiu les instruccions.
Exemple WOFF
Aquests són alguns exemples d'arxius WOFF: pàgina WOFF a HTML5 en 24 hores.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 11/07/17