Mentres as imaxes obtén gran parte do amor cando se trata de sitios web, é a palabra escrita que atrae aos buscadores e realiza o contido da maioría dos sitios. Como tal, o deseño tipográfico é unha parte críticamente importante do deseño do sitio web. Coa importancia do texto dun sitio vén a necesidade de asegurar que se vexa ben e sexa fácil de ler. Isto faise co estilo CSS (Cascading Style Sheets).
Seguindo o estándar de deseño web moderno, cando desexa dictar o aspecto do contido de texto dun sitio web, o fará usando CSS. Isto separa o estilo CSS da estrutura HTML dunha páxina. Por exemplo, se quería configurar a fonte dunha páxina para "Arial", podería facelo engadindo a seguinte regra de estilo ao seu CSS (nota: isto probablemente sería feito nunha folla de estilo CSS externa que impulsa os estilos para cada páxina do sitio web):
corpo {font-family: Arial; }Esta fonte está definida para o "corpo", polo que a fona en cascada CSS aplicará o estilo a todos os outros elementos da páxina. Isto ocorre porque cada outro elemento HTML é un fillo do elemento "corpo", os estilos CSS como a familia de fontes ou a cor van en cascada do pai ao elemento secundario. Este será o caso a menos que se engada un estilo máis específico para determinados elementos. O único problema con este CSS é que só se especifica unha única fonte. Se esa fonte non se pode atopar por algún motivo, o navegador substituirá outro no seu lugar. Isto é malo porque non ten control sobre o tipo de letra que se emprega: o navegador escollerá para ti, e pode que non queira o que decidiu usar. Aquí é onde entra unha pila de fontes.
Unha pila de fontes é unha lista de fontes na declaración de letra-familia CSS. Os tipos de letra están listados por orde de preferencia que desexa que aparezan no sitio web en caso de que non se cargue un tipo de fonte. Unha pila de fontes permite que un diseñador controle o aspecto das fontes na páxina web aínda que a computadora non teña a fonte inicial que pediu.
Entón, como se ve unha fonte de pila? Aquí tes un exemplo:
corpo {font-family: Georgia, "Times New Roman", serif; }Hai algunhas cousas para notar aquí.
En primeiro lugar, verá que separamos os distintos nomes de fonte cunha coma. entre cada un Pode engadir tantos tipos de letra como desexa, sempre que estean separados por unha coma. O navegador tentará cargar primeiro a fonte especificada primeiro. Se iso falla, executarase a liña probando cada tipo de letra ata atopar un que poida usar. Neste exemplo estamos usando fontes web seguras e "Georgia" probablemente atoparase na computadora da persoa que está a visitar o sitio (nota - o navegador busca no seu computador as fontes especificadas na páxina, polo que o sitio está realmente dicindo a computadora que fontes cargar do sistema). Se por algún motivo non se atopou esta fonte, baixaríase da pila e tentaríame especificar a seguinte fonte.
En termos da seguinte fonte, observe como está escrito na pila. O nome de "Times New Roman" está encadrado en comiñas dobres. Isto ocorre porque o nome da fonte ten varias palabras. Calquera tipo de letra con máis dunha palabra (Trebuchet MS, Courier New, etc.) debe ter o nome en comiñas dobres para que o navegador saiba que todas esas palabras forman parte dun nome de fonte.
Finalmente, finalizamos a pila de fontes con "serif", que é unha clasificación genérica de fontes. Na instancia improbable de que ningún dos tipos de letra que nomeou na pila está dispoñible, o buscador simplemente atopará unha fonte que polo menos caia na clasificación adecuada que escolleu. Por exemplo, se está usando fontes sans-serif como Arial e Verdana, que pechar unha pila de fontes coa clasificación de "sans-serif" polo menos manterá a fonte nesa familia en xeral se hai un problema de carga. Hai que recoñecer que é moi raro que un navegador non poida atopar ningunha das fontes indicadas na pila e que, no seu lugar, use esta clasificación xenérica, é unha boa práctica incluíla de todos os xeitos para ser dobremente segura.
Font Stacks e fontes web
Moitos sitios hoxe usan fontes web que están incluídos no sitio xunto con outros recursos (como imaxes do sitio, arquivo Javascript, etc.) ou ligados a unha localización de fontes externas como Google Fonts ou Typekit. Aínda que estes tipos de letra deben cargarse xa que está ligando aos propios ficheiros, aínda quere utilizar unha pila de fontes para garantir que teña algún control sobre os problemas que poidan xurdir. O mesmo sucede coas fontes "seguras na web" que deben estar na computadora de alguén (observe que as fontes que usamos como exemplos neste artigo, incluíndo Arial, Verdana, Georgia e Times New Roman, son fontes web seguras que deben ser na computadora dunha persoa). Aínda que a probabilidade de que falla unha fonte sexa moi baixa, especificar unha pila de fontes axudará o deseño tipográfico dun sitio ao máximo posible.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 09/08/17