A sintaxe da propiedade Font-Family
O deseño tipográfico é unha peza de gran importancia para o deseño dun sitio web exitoso. Crear sitios con texto que sexa fácil de ler e que se vexa excelente son os obxectivos de cada profesional de deseño web. Para iso, terás que configurar as fontes específicas que desexes usar nas túas páxinas web. Para especificar a tipografía ou a familia de tipos de letra nos seus documentos web, empregará a propiedade do estilo font-family no seu CSS.
O máis sinxelo estilo de fonte-familia que podería usar incluiría só unha familia de fontes:
p {font-family: Arial; }Se aplicou este estilo a unha páxina, todos os parágrafos mostraríanse na familia de fontes "Arial". Isto é xenial e xa que "Arial" é o que se coñece como fonte "segura", o que significa que a maioría (se non a todos) a computadora tería instalada, pode descansar bastante facilmente sabendo que a súa páxina mostrarase na fonte desexada .
Entón, ¿que pasa se non se pode atopar a fonte que seleccionas? Por exemplo, se non usa unha "fonte de seguridade web" nunha páxina, que fai o axente do usuario se non ten esa fonte? Eles fan unha substitución.
Isto pode producir algunhas páxinas moi divertidas. Unha vez fun a unha páxina onde a miña computadora mostrouse completamente en "Wingdings" (un ícono-conxunto) porque o meu ordenador non tiña a fonte que especificaba o desarrollador e que o meu navegador fixera unha elección moi mala en que tipo de letra sería usar como reemplazo. A páxina era completamente ilexíbel para min. Aquí é onde entra unha pila de fontes.
Separe as familias de fontes múltiples cunha coma nunha pila de fontes
Unha "pila de fontes" é unha lista de tipos de letra que quere que use a súa páxina. Poñerás as túas opcións de letra segundo as túas preferencias e separeas por separado cunha coma. Se o navegador non ten a primeira familia de fontes na lista, probará a segunda e despois a terceira e así por diante ata que atope unha que teña no sistema.
font-family: Pussycat, algeriano, Broadway;No exemplo anterior, o navegador buscará primeiro a fonte "Pussycat", "Alxeriana" e despois "Broadway" se non se atopou ningunha das outras fontes. Isto dálle máis posibilidades de que se use polo menos un dos seus tipos de letra escollidos. Non é perfecto, é por iso que aínda temos máis que podemos engadir á nosa pila de fontes (ler máis!).
Empregue as últimas fontes xerais
Así podes crear unha pila de fontes cunha lista de fontes e aínda non tes ningunha das que o navegador pode atopar. Evidentemente, non quere que a súa páxina apareza ilexíbel se o navegador fai unha mala opción de substitución. Afortunadamente CSS ten unha solución para iso tamén: fontes xenéricas .
Sempre debería rematar a súa lista de fontes (mesmo se é unha lista de fontes de unha familia ou só segura web) cunha fonte xenérica. Hai cinco que pode usar:
- cursiva
- fantasía
- monospace
- sans-serif
- serif
Os dous exemplos anteriores pódense cambiar a:
font-family: Arial, sans-serif; font-family: Pussycat, algeriano, Broadway, fantasía;Algúns nomes de familia de fontes son dúas ou máis palabras
Se a familia de tipos de letra que quere usar é máis dunha palabra, entón ten que rodear con dúas marcas de comiñas. Mentres que algúns navegadores poden ler familias tipográficas sen comiñas, pode haber problemas se o espazo en branco está condensado ou ignorado.
font-family: "Times New Roman", serif;Neste exemplo, pode ver que o nome da fonte "Times New Roman", que é multi-palabra, está encaixado en comiñas. Isto di ao navegador que todas estas tres palabras son parte dese nome de fonte, a diferenza de tres fontes diferentes, todas con nomes dunha soa palabra.
Artigo orixinal de Jennifer Krynin. Editado o 16/12/16 por Jeremy Girard