Grazie per aver seguito Google I/O. Guarda i contenuti on demand.

Questa pagina è stata tradotta dall'API Cloud Translation.

Testo e tipografia

The CSS Podcast - 036: Testo e tipografia

Il testo è uno degli elementi fondamentali del web.

Quando crei un sito web, non devi necessariamente definire lo stile del testo: il codice HTML in realtà presenta uno stile predefinito piuttosto ragionevole.

Tuttavia, è probabile che il testo costituisca la maggior parte del tuo sito web, quindi vale la pena aggiungere alcuni stili per migliorarlo. Modificando alcune proprietà di base, puoi migliorare notevolmente l'esperienza di lettura per i tuoi utenti.

In questo modulo inizieremo con la regola @font-face, che consente di importare caratteri personalizzati nelle tue pagine web. In questo modo avrai la tipografia esatta di cui hai bisogno, indipendentemente dai caratteri installati dall'utente.

Successivamente, illustreremo le proprietà dei caratteri CSS essenziali, tra cui font-family, font-style, font-weight e font-size. Queste nozioni di base gettano le basi per manipolare il testo sia per lo stile che per la leggibilità.

Parleremo anche delle proprietà specifiche dei paragrafi, come text-indent e word-spacing, prima di concludere con argomenti avanzati come caratteri variabili e pseudo-elementi, che perfezionano ulteriormente il controllo tipografico.

Verranno forniti esempi pratici e suggerimenti per consolidare la tua comprensione e applicazione di queste tecniche CSS.

Regola `@font-face`

La regola at @font-face CSS è fondamentale nel web design, in quanto ti consente di specificare e utilizzare caratteri personalizzati per visualizzare il testo. La bellezza di @font-face sta nella sua versatilità: ti consente di recuperare i caratteri da un server remoto o da un carattere installato sul dispositivo dell'utente.

Sintassi

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Descrittori

ascent-override: Personalizza la metrica di ascensione, influenzando lo spazio sopra la base di riferimento.
descent-override: Regola la metrica della discesa, che influisce sullo spazio sotto la linea di base.
font-display: Controlla il comportamento di visualizzazione del carattere in base allo stato del download.
font-family: Assegna un nome al carattere da utilizzare all'interno delle relative proprietà.
font-stretch: Imposta una scalabilità orizzontale accettabile, specificata come singolo valore o intervallo.
font-style: Definisce lo stile del carattere, supportando intervalli di inclinazione per gli stili obliqui.
font-weight: Determina lo spessore o l'intervallo di spessori disponibili del carattere.
font-feature-settings: Consente l'accesso alle funzionalità per i caratteri OpenType.
font-variation-settings: Offre un controllo accurato sulle impostazioni dei caratteri variabili.
line-gap-override: Sostituisce l'intervallo tra le righe predefinito del carattere.
size-adjust: Applica un fattore di scala alla struttura e alle metriche del carattere.
src: Definisce l'origine del carattere, locale o remota. Questo è obbligatorio per la regola @font-face. La combinazione di url() e local() all'interno di src è una strategia comune che utilizza un carattere locale, se disponibile, tornando a un file di caratteri remoto come opzione di riserva. I browser danno la priorità alle risorse in base all'ordine di dichiarazione, quindi local() in genere deve precedere url().
unicode-range: Limita i caratteri per i quali deve essere utilizzato questo carattere.

Descrizione

@font-face libera i designer dai vincoli dei caratteri "adatti al web" consentendo loro di utilizzare la tipografia personalizzata. La possibilità della funzione local() di cercare un carattere sul dispositivo dell'utente offre un'esperienza fluida che non dipende necessariamente da una connessione a internet.

Tipi MIME dei caratteri

Formato	Tipo MIME
TrueType	`font/ttf`
OpenType	`font/otf`
Formato carattere Web Open	`font/woff`
Web Open Font Format 2	`font/woff2`

La differenza tra @font-face e font-family

In CSS, @font-face e font-family vengono spesso confusi, ma hanno scopi diversi.

Come abbiamo discusso, @font-face è una regola utilizzata per definire i caratteri personalizzati che vuoi utilizzare nella tua applicazione web. Indica al browser dove scaricare il carattere, come visualizzarlo durante il caricamento (con la proprietà font-display) e specifica quale sottoinsieme di caratteri scaricare (con font-display).

Al contrario, font-family è una proprietà CSS utilizzata all'interno di una regola CSS per assegnare un determinato carattere o un elenco di caratteri a un elemento. I caratteri elencati in font-family possono essere caratteri web-safe, caratteri di sistema o caratteri personalizzati definiti con @font-face.

Riassumendo, @font-face dichiara un carattere e gli assegna un nome, quindi font-family applica il carattere dichiarato agli elementi HTML.

Ecco un esempio di utilizzo di entrambi:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

In questo esempio, @font-face definisce "CustomFont" e indica al browser dove trovarlo. La proprietà font-family lo applica quindi all'elemento body, con Arial come riserva se "CustomFont" non è disponibile.

Modificare il carattere tipografico

Supporto dei browser

Testo e tipografia

The CSS Podcast - 036: Testo e tipografia

Regola @font-face

Sintassi

Descrittori

Descrizione

Tipi MIME dei caratteri

La differenza tra @font-face e font-family

Modificare il carattere tipografico

Utilizzare caratteri in corsivo e obliqui

Mettere il testo in grassetto

Modificare le dimensioni del testo

Modificare lo spazio tra le righe

Modificare lo spazio tra i caratteri

Modificare lo spazio tra le parole

font stenografia

Modificare le maiuscole/minuscole del testo

Aggiungere sottolineature, linee superiori e linee passanti al testo

Aggiungere un rientro al testo

Gestire i contenuti nascosti o in eccesso

Controllare gli spazi vuoti

Controllare il modo in cui le parole vengono suddivise

Modificare l'allineamento del testo

Modificare la direzione del testo

Modificare il flusso del testo

Modificare l'orientamento del testo

Aggiungere un'ombra al testo

Caratteri variabili

Pseudo-elementi

Pseudo-elementi ::first-letter e ::first-line

Pseudoelemento ::selection

font-variant

Verificare di aver compreso

Risorse

Regola `@font-face`

`font` stenografia

Pseudo-elementi `::first-letter` e `::first-line`

Pseudoelemento `::selection`