This translation is incomplete. Please help translate this article from English.

En el primer article del mòdul, van explorar les característiques bàsiques de CSS disponibles per a l'estil de fonts i text. En aquest article anirem més lluny, explorarem les fonts web en detall, que us permetran descarregar fonts personalitzades juntament amb la vostra pàgina web, que ens donarà un estil de text més variat i personalitzat.

Requisits previs: Coneixements bàsics d'informàtica , els fonaments d'HTML (estudi Introducció a HTML ), fonaments CSS (estudi Introducció a CSS) , fonaments del text i font CSS.
Objectiu: Aprendre com aplicar fonts web a una pàgina web, utilitzant un servei de tercers o escrivint el vostre propi codi.

Recapitular les families de fonts

Com vam veure en Text fonamental i l'estil de les fonts, les fonts aplicades al vostre HTML es poden controlar utilitzant la propietat font-family. Això pren un o més noms de famílies de fonts, i el navegador recorre la llista fins que troba una font que té disponible en el sistema en què s'executa:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

Aquest sistema funciona bé, però tradicionalment les opcions de fonts del desenvolupador web eren limitades. Només hi ha un grapat de fonts que podeu garantir la seva disponibilitat en tots els sistemes comuns - les anomenades Fonts web segures (Web-safe fonts). Podeu utilitzar la pila de fonts per especificar les fonts preferibles, seguides per les alternatives segures per la web, seguides per les fonts del sistema per defecte, però això afegeix una sobrecàrrega en termes de prova per assegurar-vos que els vostres dissenys estiguin bé amb cada font, etc.

Fonts web

Però hi ha una alternativa, que funciona molt bé, de tornada a la versió 6 d'IE. Les fonts web són una característica CSS que us permet especificar els fitxers font que voleu descarregar juntament amb el vostre lloc web a mesura que s'accedeix, significa que qualsevol navegador que admeti fonts web pot tenir exactament les fonts que especifiqui, disponibles per ell. Increïble! La sintaxi necessària té una aparença similar aixó:

En primer lloc, teniu un bloc @font-face al començament del CSS, que especifica els fitxer(s) font a descarregar:

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

A continuació, podeu utilitzar el nom de la família de font especificat dins de @font-face per aplicar la vostra font personalitzada a qualsevol cosa que vulgueu, com és normal:

html {
  font-family: "Bitstream Vera Serif Bold", serif;
}

La sintaxi es torna una mica més complexa que això; Anem a entrar en més detall a continuació.

Hi ha dues coses importants a tenir en compte sobre les fonts web:

  1. Els navegadors admeten diferents formats de fonts, de manera que necessiteu diversos formats de fonts per a un suport decent del navegador. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format versions 1 i 2), el format més eficient per tot, però les versions anteriors d'IE només admeten fonts EOT (Embedded Open Type), i és possible que hagin d'incloure una versió de font SVG per donar suport a versions anteriors de navegadors iPhone i Android. Us mostrarem a continuació com generar el codi requerit.
  2. Les fonts normalment no són de lliure ús. Heu de pagar per elles i/o seguir altres condicions de la llicència, com ara acreditar el creador de la font en el codi (o al vostre lloc). No hauríeu de robar les fonts i utilitzar-les sense donar el crèdit adequat.

Nota: Les fonts web, com tecnologia, han estat compatibles amb Internet Explorer des de la versió 4!

Aprenentatge actiu: Un exemple de font web

Tenint en compte això, construïm un exemple bàsic de fonts web des dels inicis. És difícil demostrar-ho utilitzant un exemple incrustat en viu, de manera que, en lloc d'això, us agradaria seguir els passos detallats a les seccions següents, per tenir una idea del procés.

Heu d'utilitzar els fitxers web-font-start.html i web-font-start.css com a punt de partida per afegir el codi (vegeu l'exemple en execució en viu, també.) Feu una còpia d'aquests fitxers en un directori nou al vostre ordinador, ara. Al fitxer web-font-start.css trobareu un mínim de CSS per tractar el disseny bàsic i la tipografia de l'exemple.

Buscar fonts

Per a aquest exemple, utilitzarem dos fonts web, una per a les capçaleres i una per al text del cos. Per començar, hem de trobar els fitxers font que contenen les fonts. Les fonts són creades per la fusió de fonts i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs on podeu obtenir fonts:

  • Distribuïdor de fonts gratuït: aquest és un lloc web que ofereix fonts lliures, disponibles, per descarregar (encara pot haver-hi certes condicions de llicència, com ara acreditar el creador de fonts). Els exemples inclouen Font Squirrel, dafont i Everything Fonts.
  • Distribuïdor de fonts de pagament: aquest és un lloc que fa que les fonts estiguin disponibles per a un càrrec, com fonts.com o myfonts.com. També podeu comprar fonts, directament, de creadors de fonts, per exemple Linotype, Monotype o Exljbris.
  • Servei de fonts en línia: aquest és un lloc que emmagatzema i serveix les fonts, facilitant el procés sencer. Consulteu la secció Usar un servei de font en línia per obtenir-ne més detalls.

Busquem algunes fonts! Aneu a Font Squirrel i escolliu dues fonts - una font interessant, agradable per a les capçaleres (potser una visualització agradable o un bloc de font serif), i una font lleugerament menys cridanera i més llegible per als paràgrafs. Quan trobeu cada font, premeu el botó de descàrrega i deseu el fitxer dins del mateix directori que els fitxers HTML i CSS que heu desat anteriorment. No importa si són TTF (True Type Fonts) o OTF (Open Type Fonts).

En cada cas, descomprimiu el paquet de fonts (les fonts web solen ser distribuïdes en fitxers ZIP que contenen els fitxers de les fonts i la informació de la llicència). Podeu trobar diversos fitxers de fonts en el paquet - algunes fonts es distribueixen com una família amb diferents variants disponibles, per exemple, primes, mitjanes, negres, cursives, cursives fines, etc. Per a aquest exemple, només volem que us preocupeu d'un únic fitxer font per a cada elecció.

Nota: A la secció "Buscar fonts" a la columna de la dreta, podeu fer clic a les diferents etiquetes i classificacions per filtrar les opcions que es mostren.

Generació del codi necessari

Ara haureu de generar el codi necessari (i els formats de font). Per a cada font, seguiu aquests passos:

  1. Assegureu-vos que heu satisfet qualsevol requisit de llicència, si aneu a utilitzar això en un projecte comercial i/o Web.
  2. Aneu al Generador Webfont de Fontsquirrel.
  3. Carregueu els dos fitxers de fonts usant el botó Upload Fonts.
  4. Marqueu la casella de verificació etiquetada "Sí, les fonts que estic carregant són legalment aptes per a la inclusió a la web".
  5. Feu click Download your kit.

Un cop el generador hagi acabat de processar, haureu d'obtenir un fitxer ZIP per descarregar-ho - guardar-ho al mateix directori que el vostre HTML i CSS.

Implementar el codi a la nostra demo

En aquest punt, descomprimiu el webfont kit  que acabeu de generar. Dins del directori descomprimit, veureu tres elements útils:

  • Diverses versions de cada font: .eot, .svg, .ttf, .woff, .woff2. Com es va esmentar anteriorment, es necessiten múltiples fonts que són necessàries per la compatibilitat del navegador - aquesta és la forma de Fontsquirrel per assegurar-se que teniu tot el que necessiteu.
  • Un fitxer HTML de demostració per a cada font - carregueu aquests en el vostre navegador per veure com es veurà la font en diferents contextos d'ús.
  • Un fitxer stylesheet.css que conté el codi @font-face generat que necessiteu.

Per implementar aquestes fonts a la vostra demostració, seguiu aquests passos:

  1. Canvieu el nom del directori descomprimit a una cosa fàcil i senzilla, com ara fonts.
  2. Obriu el fitxer stylesheet.css i copieu els blocs @font-face continguts dins del vostre fitxer web-font-start.css - heu de posar-los a la part superior, abans de qualsevol CSS, ja que les fonts necessiten ser importades abans de poder utilitzar-les en el vostre lloc.
  3. Cadascuna de les funcions url() apunta a un fitxer font que volem importar al nostre CSS - necessitem assegurar-nos que les rutes d'accés als fitxers siguin correctes, així que afegiu fonts/ al començament de cada ruta (ajusteu-ho si és necessari).
  4. Ara podeu utilitzar aquestes fonts a les vostres piles de fonts, igual que qualsevol font segura web o font predeterminada del sistema. Per exemple:
    font-family: 'zantrokeregular', serif;

Heu d'acabar amb una pàgina de demostració amb algunes fonts agradables implementadas. Atès que diferents fonts s'han creat amb diferents mides, és possible que hagueu d'ajustar la mida, l'espaiat, etc., per ordenar l'aspecte.

Nota: Si teniu problemes per fer que funcioni, no dubteu a comparar la vostra versió amb els nostres fitxers acabats - vegeu web-font-finished.html i web-font-finished.css (executeu l'exemple acabat en directe).

Ús d'un servei de font en línia

Els serveis de fonts en línia normalment emmagatzemen i serveixen fonts per a vosaltres, de manera que no heu de preocupar-vos per escriure el codi @font-face, i generalment només cal inserir una línia simple o dos de codi al vostre lloc per fer que tot funcioni. Els exemples inclouen Typekit i Cloud.typography. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de Google Fonts, un servei gratuït útil, especialment per al treball de proves ràpides i demostracions d'escriptura.

La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no entrarem amb molt detall. Vegem ràpidament les fonts de Google, perquè pugueu fer-vos la idea. De nou, utilitzeu còpies de web-font-start.html i web-font-start.css com a punt de partida.

  1. Aneu a Google Fonts.
  2. Utilitzeu els filtres de la banda esquerra per visualitzar les fonts que voleu triar i escolliu un parell de fonts que vulgueu.
  3. Per seleccionar una font, premeu el botó Add to Collection al costat d'ell.
  4. Quan hagueu escollit les fonts, premeu el botó Use a la part inferior de la pàgina.
  5. A la pantalla resultant, primer heu de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al capdavant del vostre fitxer HTML. Posa-la per sobre de l'element <link> existent, de manera que la font s'importi abans d'intentar-la utilitzar al vostre CSS.
  6. A continuació, haureu de copiar les declaracions que figuren a la secció 4 al vostre CSS, segons correspongui, per aplicar les fonts personalitzades al vostre codi HTML.

Nota: Podeu trobar una versió completa a google-font.html i google-font.css, si necessiteu comprovar el vostre treball contra el nostre (veure-ho en directe).

@font-face amb més detall

Explorem la sintaxi @font-face generada per fontsquirrel. Això és el que sembla un dels blocs:

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

Això s'anomena "sintaxi a prova de bales @font-face", després d'una publicació de Paul Irish des del principi quan @font-face va començar a ser popular (Syntaxi Bulletproof @font-face). Passem a veure el que fa:

  • font-family: Aquesta línia especifica el nom que voleu fer referència a la font com. Podeu posar això com qualsevol cosa que us agradi, sempre que l'utilitzeu de forma coherent a tot el CSS.
  • src: Aquestes línies especifiquen les rutes d'acces als fitxers fonts que cal importar al vostre CSS (la part d'URL) i el format de cada fitxer font (la part del format). L'última part en cada cas és opcional, però és útil declarar-la perquè permet als navegadors trobar una font que poden utilitzar més ràpidament. Es poden incloure diverses declaracions, separades per comes - el navegador buscarà a través d'elles i usarà la primera que trobi que entengui - per tant, és millor posar formats nous i millors com WOFF2 abans, i formats més antics i no tan bons com TTF després. L'única excepció a això són les fonts EOT - es col·loquen en primer lloc per corregir un parell d'errors en les versions anteriors d'IE, per la qual cosa intentarà utilitzar la primera que trobi, fins i tot si no pot utilitzar la font.
  • font-weight/font-style: Aquestes línies especifiquen el pes de la font i si és cursiva o no. Si esteu important diversos pesos de la mateixa font, podeu especificar quin és el seu pes/estil i, a continuació, utilitzar valors diferents de font-weight/font-style per triar entre ells, en lloc d'haver de cridar a tots els membres diferents de la família de fonts de diferents noms. @font-face tip: definir font-weight i font-style per mantenir el vostra CSS simple per Roger Johansson, que mostra què fer amb més detall.

Nota: També podeu especificar els valors particulars font-variant i font-stretch per a les vostres fonts web. En els navegadors més nous, també podeu especificar un valor unicode-range, que és un rang específic de caràcters que voleu utilitzar fora de la font web - en els navegadors compatibles, només els caràcters especificats seran descarregats, estalviant descàrregues innecessàries. Creació de piles de fonts personalitzades amb Unicode-Range per Drew McLellan us ofereix algunes idees útils sobre com fer-ne ús.

Resum

Ara que heu treballat a través dels nostres articles sobre els fonaments de l'estil de text, és hora de provar la vostra comprensió amb la nostra avaluació per al mòdul, Tipografia d'una pàgina web de l'escola de la comunitat.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,