Skip to main content

A tag da fonte versus folhas de estilo em cascata (CSS)

Curso de HTML e CSS - Font e Font-Family [Aula 17] (Abril 2025)

Curso de HTML e CSS - Font e Font-Family [Aula 17] (Abril 2025)
Anonim

Você já olhou para um site muito antigo e viu uma tag incomum dentro do HTML? Muitos anos atrás, os web designers definiam as fontes de suas páginas dentro do próprio HTML, mas a separação entre estrutura (HTML) e estilo (CSS) acabou com essa prática há algum tempo.

No web design de hoje, a tag foi reprovada. Isso significa que a tag não faz mais parte da especificação HTML. Embora alguns navegadores ainda suportem essa tag depois que ela foi descontinuada, ela não é mais suportada em HTML5, que é a iteração mais recente do idioma. Isso significa que a tag não deve mais ser encontrada em seus documentos HTML.

A alternativa para a tag de fonte

Se você não puder definir a fonte de texto dentro da página HTML com a tag, o que você deve usar? Folhas de estilo em cascata (CSS) são como você define os estilos de fonte (e todos os estilos visuais) nos sites hoje. CSS pode fazer as mesmas coisas que a tag poderia fazer, além de muito mais. Vamos examinar o que a tag poderia fazer quando era uma opção para nossas páginas HTML (lembre-se, ela não é mais suportada por mais tempo, portanto, não é uma opção) e compare como fazer isso com CSS.

Alterando a Família de Fontes

A face da fonte é a face ou a família da fonte. Com a tag font, você usaria o atributo "face" e precisaria colocar isso em um documento muitas e muitas vezes para definir as fontes individuais de cada seção do texto. Se você precisasse fazer uma mudança radical para essa fonte, você teria que alterar cada uma dessas tags individuais. Por exemplo:

esta fonte não é sans-serif

Em CSS, em vez da fonte "face", é chamada de fonte "family". Você escreve um estilo CSS que define a fonte. Por exemplo, se você quisesse definir todo o texto em uma página para Garamond, você poderia adicionar esse estilo visual como este:

corpo {font-family: Garamond, Times, serif; }

Esse estilo CSS aplicaria a família de fontes de Garamond a tudo na página da Web, pois cada elemento no documento é um descendente da página da Web.

Alterando a cor da fonte

Como no rosto, você usa o atributo "cor" e códigos hexadecimais ou nomes de cores para alterar a cor do texto. Anos atrás, você também configuraria isso individualmente em elementos de texto, como uma tag de cabeçalho.

esta fonte é roxa

Hoje, você apenas escreveria uma linha de CSS.

Isso é muito mais flexível. Se você precisava mudar o

Em todas as páginas do seu site, você poderia fazer uma alteração no seu arquivo CSS e cada página que usa esse arquivo seria atualizada.

Fora com o velho

Usar o CSS para ditar estilos visuais tem sido um padrão de web designer por muitos anos, então se você está realmente olhando para uma página que ainda usa a tag, então é uma página muito antiga e precisa ser redesenhada para se adaptar à web atual melhores práticas de design e padrões modernos da web.

Editado por Jeremy Girard