Empregando fontes personalizadas en páxinas web
O contido de texto sempre foi unha peza importante de sitios web, pero nos primeiros días da Web, os deseñadores e desenvolvedores estaban moi limitados no control tipográfico que tiñan nas súas páxinas web. Isto incluíu unha limitación nas fontes que puideron usar de forma fiable nos seus sitios. Probablemente escoiteches o termo "fontes web seguras" mencionadas no pasado. Isto refírese ao pequeno conxunto de fontes que probablemente tiñan unha maior capacidade de incluír na computadora dunha persoa, o que significa que se o seu sitio usaba unha destas fontes, era unha aposta segura que se renderizaba correctamente no navegador dunha persoa.
Hoxe en día, os profesionais da web teñen unha serie de novas fontes e opcións de tipo para traballar, unha das cales é o formato WOFF.
Que é WOFF?
WOFF é un acrónimo que significa "Web Open Font Format". Utilízase para comprimir fontes para usar coa propiedade CSS @ font-face. É unha forma de inserir fontes nas páxinas web para que poida empregar fontes especializadas máis aló das típicas "Arial, Times New Roman, Georgia", que son algunhas das fontes seguras web anteriormente mencionadas.
WOFF foi presentado ao W3C como un estándar para fontes de envasado para páxinas web. Tornouse un proxecto de traballo o 16 de novembro de 2010. Hoxe en día temos realmente WOFF 2.0, o que mellora a compresión desde a primeira versión do formato nun 30%. Nalgúns casos, estes aforros poden ser aínda máis substancial!
Por que usar WOFF?
Os fontes web, incluídos os que se envían a través do formato WOFF, proporcionan moitas vantaxes sobre outras opcións de fonte. Tan útiles como as fontes web seguras foron, e aínda hai un lugar para esas fontes no noso traballo, é bo tamén ampliar as nosas opcións e abrir as nosas opcións tipográficas.
As fontes WOFF teñen os seguintes beneficios:
- Son máis accesibles que as fontes como imaxes. WOFF mostra un texto HTML sinxelo con CSS, dándolle acceso e control de deseño que as imaxes non permitirán.
- Os ficheiros WOFF inclúen información tipográfica como formularios contextuais e figuras de estilo antigo. Isto dá mellores tipografías ás túas páxinas web porque estás usando os personaxes correctos, non só as aproximacións.
- As fontes de WOFF poden axudar coa internacionalización porque pode inserir fontes con caracteres doutras linguas.
- Do mesmo xeito que todos os textos de estilo CSS, fontes con estilo WOFF son máis amigables para o motor de procura. Os buscadores non "ven" o texto inserido nunha imaxe e, mentres o texto ALT pode axudar, non hai substituto para o texto en si.
- Os tipos de letra WOFF están comprimidos, polo que son menores que outros tipos de ficheiros de fonte. Isto axudará á velocidade de descarga do sitio e ao rendemento xeral.
- Pode usar ficheiros WOFF para preservar a súa identidade de marca incrustando as súas fontes corporativas como ficheiros WOFF.
Soporte do navegador WOFF
WOFF ten excelente soporte para navegadores nos navegadores modernos, incluíndo:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
É esencialmente soportado a través da tarxeta nestes días, sendo a única excepción todas as versións de Opera Mini.
Como usar fontes WOFF
Para usar un ficheiro WOFF, ten que cargar un ficheiro WOFF no seu servidor web, darlle un nome á propiedade @ font-face e, a continuación, chamar á fonte no seu CSS. Por exemplo:
- Cargue a fonte chamada myWoffFont.woff no directorio / fonts do servidor web.
- No seu ficheiro CSS engada unha sección de @ font-face:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') formato ('woff');
}
- Engada o nome do novo tipo de letra (myWoffFont) á pila de fontes CSS, coma se fose algún outro nome de fonte:
p {
font-family: myWoffFont , Xenebra, Arial, Helvetica, sans-serif;
}
Onde obter fontes WOFF
Hai dous grandes lugares onde podes atopar moitas fontes WOFF que son gratuítas para uso comercial e non comercial:
- Abrir biblioteca de fontes
- Esquilo de fontes
Se ten unha licenza para usar unha fonte que non está dispoñible nun formato WOFF, pode usar un creador de WOFF como en Font Squirrel para converter os seus ficheiros de fonte en arquivos WOFF. Tamén hai unha ferramenta de liña de comandos chamada sfnt2woff que pode usar en Macintosh e Windows para converter as súas fontes TrueType / OpenType a WOFF.
Descargue o binario apropiado para o seu sistema e execúteo na liña de comandos (ou Terminal) e siga as instrucións.
Exemplo WOFF
Aquí tes algúns exemplos de ficheiros WOFF: WOFF Page en HTML5 en 24 horas.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 07/11/17