O que são fontes seguras para a web?
Fontes seguras para web são um subconjunto de fontes que têm grande probabilidade de estarem instaladas em um computador ou dispositivo. Eles são amplamente suportados em diferentes sistemas operacionais e navegadores web, então é muito provável que sejam renderizados e exibidos de forma consistente. Vamos ver como isso funciona.
Os navegadores são responsáveis por interpretar e exibir fontes em um site. Quando o navegador precisa renderizar uma fonte, ele tenta encontrar o arquivo da fonte no sistema do usuário. Mas se a fonte não for encontrada, geralmente será usada uma fonte padrão do sistema. Isso garante que o conteúdo ainda seja legível, mesmo que a fonte específica que deve ser renderizada no site esteja ausente.
No entanto, a fonte de fallback selecionada pelo navegador pode parecer muito diferente da fonte que originalmente deveria ser renderizada. Isso pode ter um impacto crítico no design geral e na experiência do usuário. Para evitar isso, você deve usar fontes web-safe sempre que possível. Você tem duas opções. Você pode usá-las como suas fontes principais ou pode usar fontes personalizadas com uma fonte web-safe como opção de fallback. Dessa forma, você pode controlar como o site ficará caso a fonte personalizada não seja encontrada.
Vamos conferir alguns exemplos de fontes seguras para web. In a previous lesson, you learned that sans-serif fonts are commonly used for web development because they don't have small "feet" or lines at the end of the characters, so they're easy to read on screen. Alguns exemplos de fontes sans-serif seguras para web são:
Arial
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-1.png" alt="The text 'Hello, World!' displayed in Arial, a clean geometric sans-serif font with uniform stroke width" />
Verdana
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-2.png" alt="The text 'Hello, World!' displayed in Verdana, a wide sans-serif font with large open letterforms and a tall x-height" />
Trebuchet MS
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-3.png" alt="The text 'Hello, World!' displayed in Trebuchet MS, a humanist sans-serif font with slightly rounded letterforms" />
Em contraste, as fontes serifadas têm pequenos "pés" no final dos caracteres, por isso são comumente usadas para impressão tradicional. Mas se você alguma vez precisar usá-las para fins de desenvolvimento web, as fontes serif seguras para web incluem:
Times New Roman
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-4.png" alt="The text 'Hello, World!' displayed in Times New Roman, a classic serif font with strong contrast between thick and thin strokes" />
Georgia
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-5.png" alt="The text 'Hello, World!' displayed in Georgia, a serif font with wider letterforms and stroke contrast optimized for screen readability" />
Ao usar fontes web-safe, você pode garantir que seu design tenha uma aparência consistente em dispositivos e plataformas. Eles também podem melhorar a acessibilidade para usuários com deficiências visuais, já que são simples e fáceis de ler. E finalmente, fontes web-safe podem reduzir o tempo de carregamento da página, já que não precisam ser baixadas se já estiverem instaladas.
Agora que você sabe o que são fontes web-safe, pode começar a usá-las e atribuí-las como fallbacks para criar experiências de usuário confiáveis em diferentes navegadores e plataformas.
Este módulo não possui perguntas. Marque como concluído.