CSS - Fontes

Este capítulo ensina como definir as fontes de um conteúdo, disponíveis em um elemento HTML. Você pode definir as seguintes propriedades de fonte de um elemento -

o font-family propriedade é usada para alterar a face de uma fonte.
o font-style propriedade é usada para tornar uma fonte itálica ou oblíqua.
o font-variant propriedade é usada para criar um efeito de versalete.
o font-weight propriedade é usada para aumentar ou diminuir o quão em negrito ou claro uma fonte aparece.
o font-size propriedade é usada para aumentar ou diminuir o tamanho de uma fonte.
o font propriedade é usada como uma abreviação para especificar várias outras propriedades de fonte.

Definir a família da fonte

A seguir está o exemplo, que demonstra como definir a família da fonte de um elemento. O valor possível pode ser qualquer nome de família de fonte.

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Defina o estilo da fonte

A seguir está o exemplo, que demonstra como definir o estilo da fonte de um elemento. Os valores possíveis são normal, itálico e oblíquo .

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Definir a variante da fonte

O exemplo a seguir demonstra como definir a variante da fonte de um elemento. Os valores possíveis são normais e versaletes .

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Defina o peso da fonte

O exemplo a seguir demonstra como definir a espessura da fonte de um elemento. A propriedade font-weight fornece a funcionalidade para especificar o quão negrito é uma fonte. Os valores possíveis podem ser normal, negrito, negrito, mais claro, 100, 200, 300, 400, 500, 600, 700, 800, 900 .

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Defina o tamanho da fonte

O exemplo a seguir demonstra como definir o tamanho da fonte de um elemento. A propriedade font-size é usada para controlar o tamanho das fontes. Os valores possíveis podem ser xx-pequeno, x-pequeno, pequeno, médio, grande, x-grande, xx-grande, menor, maior, tamanho em pixels ou em% .

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Definir o ajuste do tamanho da fonte

O exemplo a seguir demonstra como definir o ajuste do tamanho da fonte de um elemento. Esta propriedade permite ajustar a altura x para tornar as fontes mais legíveis. O valor possível pode ser qualquer número.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Definir o alongamento da fonte

O exemplo a seguir demonstra como definir a extensão da fonte de um elemento. Esta propriedade depende do computador do usuário para ter uma versão expandida ou condensada da fonte que está sendo usada.

Os valores possíveis podem ser normal, mais amplo, mais estreito, ultracondensado, extracondensado, condensado, semi-condensado, semi-expandido, expandido, extra-expandido, ultra-expandido .

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Propriedade abreviada

Você pode usar a propriedade font para definir todas as propriedades da fonte de uma vez. Por exemplo -

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -

↰ Previous page Next page ↱