Sintaxi de la propietat Font-Família
El disseny tipogràfic és una peça críticament important d'un disseny de llocs web reeixit. La creació de llocs amb text fàcil de llegir i que es veu bé són els objectius de cada professional de disseny web. Per aconseguir-ho, haureu de poder establir els tipus de lletra específics que voleu utilitzar a les vostres pàgines web. Per especificar la tipografia o la família de tipus de lletra en els vostres documents web, utilitzareu la propietat d'estil de font-família al vostre CSS.
L'estil més senzill de font-família que podeu utilitzar inclouria només una família de fonts:
p {font-family: Arial; }Si heu aplicat aquest estil a una pàgina, tots els paràgrafs es mostraran a la família de fonts "Arial". Això és genial i ja que "Arial" és el que es coneix com una "font segura per a la web", el que significa que la majoria de l'equip (si no tot) ho hauria instal·lat, podeu descansar bastant fàcilment sabent que la vostra pàgina es mostrarà a la font desitjada .
Llavors, què passa si la font que seleccioneu no es pot trobar? Per exemple, si no utilitza una "font segura web" en una pàgina, què fa l'agent d'usuari si no té aquesta font? Fan una substitució.
Això pot donar lloc a algunes pàgines molt divertides. Una vegada vaig anar a una pàgina on el meu ordinador ho mostrava completament a "Wingdings" (un conjunt d'icones) perquè el meu ordinador no tenia la font que el desenvolupador havia especificat, i el meu navegador va fer una molt mala elecció en quina font ús com a reemplaçament. La pàgina era completament il·legible per a mi. Aquí és on hi ha una pila de fonts.
Separeu les famílies de fonts múltiples amb coma en una pila de fonts
Una "font stack" és una llista de fonts que voleu que la vostra pàgina s'utilitzi. Poseu les vostres opcions de tipus de lletra segons les vostres preferències i separeu cadascuna amb una coma. Si el navegador no té la primera família de fonts a la llista, provarà la segona i la tercera i així successivament fins que trobi una que tingui al sistema.
font-family: Pussycat, algerià, Broadway;A l'exemple anterior, el navegador buscarà en primer lloc el tipus de lletra "Pussycat", després "algerià" i després "Broadway" si no s'ha trobat cap de les altres fonts. Això us dóna més possibilitats que s'utilitzi almenys una de les vostres fonts seleccionades. No és perfecte, per això encara tenim més coses que podem afegir a la nostra pila de fonts (llegiu-ne més!).
Utilitza les fonts genèriques Darrera
Per tant, podeu crear una pila de fonts amb una llista de tipus de lletra i encara no teniu cap d'el que el navegador pot trobar. Evidentment, no voleu que la vostra pàgina es mostri il·legible si el navegador fa una mala elecció de substitució. Afortunadament, CSS té una solució per a això també: fonts genèriques .
Sempre haureu d'acabar la vostra llista de fonts (fins i tot si és una llista d'una família o només fonts web segures) amb una font genèrica. Hi ha cinc que podeu utilitzar:
- cursiva
- fantasia
- monospace
- sans-serif
- Serif
Els dos exemples anteriors es poden canviar per:
font-family: Arial, sans-serif; font-family: Pussycat, algerià, Broadway, fantasia;Alguns noms de la família de fonts són dues o més paraules
Si la família de tipus de lletra que voleu utilitzar és més d'una paraula, haureu d'envoltar-la amb marques de cometes dobles. Si bé alguns navegadors poden llegir famílies de fonts sense les cometes, pot haver-hi problemes si l'espai en blanc es condensa o ignora.
font-family: "Times New Roman", serif;En aquest exemple, podeu veure que el nom del tipus de lletra "Times New Roman", que és multi-paraula, està tancat en cometes. Això indica al navegador que aquestes tres paraules formen part d'aquest nom de font, a diferència de tres fonts diferents, totes amb noms de paraula.
Article original de Jennifer Krynin. Editat el 16/12/16 per Jeremy Girard