CSS - Caratteri

Questo capitolo insegna come impostare i caratteri di un contenuto, disponibile in un elemento HTML. È possibile impostare le seguenti proprietà del carattere di un elemento:

  • Il font-family viene utilizzata per modificare l'aspetto di un carattere.

  • Il font-style viene utilizzata per rendere un carattere corsivo o obliquo.

  • Il font-variant viene utilizzata per creare un effetto maiuscoletto.

  • Il font-weight viene utilizzata per aumentare o diminuire il livello di grassetto o chiaro di un carattere.

  • Il font-size viene utilizzata per aumentare o diminuire la dimensione di un carattere.

  • Il font viene utilizzata come scorciatoia per specificare una serie di altre proprietà dei caratteri.

Imposta la famiglia di caratteri

Di seguito è riportato l'esempio, che mostra come impostare la famiglia di caratteri di un elemento. Il valore possibile potrebbe essere qualsiasi nome della famiglia di caratteri.

<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>

Questo produrrà il seguente risultato:

Imposta lo stile del carattere

Di seguito è riportato l'esempio, che mostra come impostare lo stile del carattere di un elemento. I valori possibili sono normale, corsivo e obliquo .

<html>
   <head>
   </head>

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

Questo produrrà il seguente risultato:

Imposta la variante del carattere

L'esempio seguente mostra come impostare la variante del carattere di un elemento. I valori possibili sono normale e maiuscoletto .

<html>
   <head>
   </head>

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

Questo produrrà il seguente risultato:

Imposta lo spessore del carattere

L'esempio seguente mostra come impostare lo spessore del carattere di un elemento. La proprietà font-weight fornisce la funzionalità per specificare quanto è grassetto un carattere. I valori possibili potrebbero essere normale, grassetto, più chiaro, più chiaro, 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>

Questo produrrà il seguente risultato:

Imposta la dimensione del carattere

L'esempio seguente mostra come impostare la dimensione del carattere di un elemento. La proprietà font-size viene utilizzata per controllare la dimensione dei caratteri. I valori possibili potrebbero essere xx-small, x-small, small, medium, large, x-large, xx-large, più piccolo, più grande, dimensioni in pixel o in% .

<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>

Questo produrrà il seguente risultato:

Imposta la regolazione della dimensione del carattere

L'esempio seguente mostra come impostare la regolazione della dimensione del carattere di un elemento. Questa proprietà consente di regolare l'altezza della x per rendere i caratteri più leggibili. Il valore possibile potrebbe essere qualsiasi numero.

<html>
   <head>
   </head>

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

Questo produrrà il seguente risultato:

Imposta l'estensione del carattere

L'esempio seguente mostra come impostare l'estensione del carattere di un elemento. Questa proprietà si basa sul computer dell'utente per avere una versione espansa o ridotta del carattere utilizzato.

I valori possibili potrebbero essere normale, più ampio, più stretto, ultra-condensato, extra-condensato, condensato, semi-condensato, semi-espanso, espanso, extra-espanso, ultra-espanso .

<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>

Questo produrrà il seguente risultato:

Proprietà di stenografia

È possibile utilizzare la proprietà del carattere per impostare contemporaneamente tutte le proprietà del carattere. Ad esempio:

<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>

Questo produrrà il seguente risultato: