HTML5 - Trabalhando com Fontes - Parte 1

Um dos aspectos fundamentais ao trabalhar com texto em HTML são as mudanças de imagem que podem ocorrer apenas com a mudança da fonte das letras, porém existem dois aspectos dos profissionais que trabalham nesse sentido, os designers que querem mudar todos os aspectos da tipografia e os programadores que, embora queiram trabalhando com eles, eles não querem fazer mudanças tão profundas nisso.
Propriedades da fonte
Antes de trabalhar com as fontes, faremos uma revisão de suas propriedades para conhecer o histórico disso:

• família de fontes: Especifica a família da fonte para um bloco de texto.
• tamanho da fonte: Especifica o tamanho da fonte para um bloco de texto.
• estilo de fonte: Especifica o estilo da fonte, pode ser normal, itálico, oblíquo.
• variante da fonte: Especifica se o texto do bloco pode ou não ser exibido em fonte smallcaps, seus valores possíveis são smallcaps e normal.
• espessura da fonte: Especifica o peso da fonte para um bloco de texto, ou seja, sua espessura, seus valores podem ser normal, negrito, mais negrito, mais claro.
• Fonte: Atalho que permite especificar a fonte em uma única linha.

Selecionando uma fonte
A propriedade família de fontes Determinamos o grupo de fontes que será utilizado estabelecendo uma ordem de preferência para que, se não houver uma disponível, seja passada para a seguinte em ordem de preferência. O navegador começa com a primeira fonte da lista e continua tentando para cada uma das fontes na ordem estabelecida até que haja uma que possa usar.
Isso ocorre porque podemos exigir o uso de fontes instaladas no PC de um usuário ou que pertençam a um sistema operacional específico, de forma que, se outro usuário não atender aos requisitos, possamos controlar como isso afetará nosso documento.
Por fim, vamos ver uma lista de fontes genéricas que devem estar disponíveis de forma padrão para todos os sistemas e com as quais não devemos ter problemas.

• serifa
• sem serifa
• letra cursiva
• fantasia
• monoespaço

Muito bom já que abordamos o aspecto teórico do que é o manuseio de fontes vamos ver exemplos com código que é onde obteremos nosso conhecimento de como colocar em prática tudo o que estudamos:

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.

Neste código, vemos que uma fonte não convencional foi definida na família de fontes, pois é uma fonte proprietária HelveticaNeue Condensed e então como uma segunda preferência colocamos monoespaço Vamos ver como podemos ver isso no navegador, para cada um dos casos definidos.
[anexo = 861: html5fuentes.jpg.webp]
À esquerda da imagem temos o caso em que não existe a fonte que foi colocada como primeira escolha, ou seja, a fonte monoespaço, no lado direito vemos a fonte proprietária.
Com isso finalizamos o tutorial, conhecendo os fundamentos teóricos e colocando-os em prática, agora podemos brincar um pouco com as fontes de nossa aplicação e conseguir resultados visualmente mais atraentes e em linha com o que queremos.
Você pode continuar lendo a Parte 2 deste Tutorial.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo