Padronizar para a fonte do sistema de um determinado sistema operacional pode aumentar o desempenho porque o navegador não precisa baixar nenhum arquivo de fonte, está usando um que já tinha. Isso é verdade para qualquer fonte “segura para a web”, no entanto. A beleza das fontes do “sistema” é que elas correspondem ao que o sistema operacional atual usa, portanto, podem ter uma aparência confortável.
Quais são essas fontes do sistema? No momento da redação deste artigo, ele se divide da seguinte forma:
| SO | Versão | Fonte do sistema |
|---|---|---|
| Mac OS X | o capitão | São Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida grande |
| janelas | Vista | Segoe UI |
| janelas | XP | Tahoma |
| janelas | 3,1 para mim | Microsoft Sans Serif |
| Android | Sanduíche de Sorvete (4.0) + | Roboto |
| Android | Cupcake (1.5) para Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Todas versões | Ubuntu |
Pegue o trecho, já!
O motivo do prefácio é que ele mostra o quão profundo você pode precisar voltar para dar suporte às fontes do sistema. Além disso, ajuda a mostrar que com novas versões do sistema, surgem novas fontes e, portanto, a possibilidade de precisar atualizar sua pilha de fontes.
Método 1: Fontes do sistema no nível do elemento
O Chrome e o Safari lançaram recentemente “system-ui” que é uma família de fontes genérica que pode ser usada no lugar de “-apple-system” e “BlinkMacSystemFont” nos exemplos a seguir. Gorjeta de chapéu para JJ pela informação.Um método para aplicar fontes do sistema é chamá-las diretamente em um elemento usando a font-familypropriedade.
O GitHub usa esse método em seu site, aplicando fontes do sistema no bodyelemento:
/* System Fonts as used by GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )Tanto o administrador do Medium quanto do WordPress usam uma abordagem semelhante, com uma ligeira variação, principalmente o suporte para Oxygen Sans (criado para o sistema operacional GNU + Linux) e Cantarell (criado para o sistema operacional GNOME). Este snippet também descarta o suporte para certos tipos de emoji e símbolos:
/* System Fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )Observação: este método só deve ser usado na font-familypropriedade, e não na fontabreviação. Booking.com publicou um artigo completo sobre os avisos que gera devido à fonte principal parecer ser um prefixo do fornecedor.
Método 2: pilhas de fontes do sistema
A limitação do primeiro método é que você precisa chamar a pilha completa de fontes cada vez que ela é usada em um elemento e isso pode se tornar complicado e inchar seu código, dependendo de onde e como é usado.
Jonathan Neal oferece um método alternativo onde as fontes do sistema são declaradas usando @font-face.
O benefício aqui é que você pode declarar as fontes uma vez e então isso se torna o que você pode na font-familypropriedade em vez da longa lista de fontes todas as vezes.
/* Define the "system" font family */ @font-face ( font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); ) /* Now, let's apply it on an element */ body ( font-family: "system"; )Observe que o exemplo completo de Jonathan ilustra a capacidade de definir variações da systemfamília da fonte que foi definida no trecho acima para considerar itálico, negrito e pesos adicionais.
Relacionado
- Fontes específicas do sistema operacional em CSS - que inclui um método JavaScript para testar a fonte em uso.
- Fontes do sistema em SVG
- Implementando fontes do sistema no Booking.com - uma lição aprendida - o Booking.com compartilha como eles aprenderam usando uma pilha de fontes do sistema na forma
fontabreviada que não funciona conforme o esperado.