Caratteri CSS | Aspose.Font per .NET
L’obiettivo di questo articolo è spiegare i caratteri HTML/CSS e le loro proprietà, illustrando con esempi di codice come lavorare con essi. Imparerai a rendere il testo in grassetto o semigrassetto, a cambiare la dimensione del carattere o la famiglia di caratteri in CSS e molto altro ancora.
Vedrai anche la differenza tra le proprietà dei caratteri CSS e la classificazione comune delle proprietà dei caratteri. Questi concetti fondamentali sono descritti nell’articolo Che cos’è un carattere?.
Caratteri CSS
Il carattere in CSS è una risorsa che contiene una rappresentazione visiva dei glifi. In parole semplici, contiene informazioni che associano i glifi ai rispettivi codici.
Le risorse dei caratteri possono essere configurate localmente su un dispositivo sul quale viene eseguito un browser. Per tali caratteri, le informazioni descrittive possono essere ottenute direttamente dalla risorsa del carattere (ad esempio da un file Montserrat.ttf). Per i caratteri Web, tali informazioni sono collegate tramite un link alla risorsa del carattere.
Proprietà dei caratteri CSS
Il CSS fornisce diverse proprietà per controllare l’aspetto e il comportamento dei caratteri sulle pagine Web. Esse possono essere utilizzate singolarmente o combinate per ottenere gli effetti tipografici desiderati. Non tutte sono supportate da tutti i browser, quindi è essenziale considerare la compatibilità tra browser quando si utilizzano queste proprietà.
Diamo un’occhiata ad alcune delle proprietà più utilizzate:
font-family(Famiglia di caratteri)font-weight(Peso/Grossetto del carattere)font-stretch(Allungamento del carattere)font-style(Stile del carattere)font-size(Dimensione del carattere)font(Proprietà abbreviata)font-synthesis(Sintesi dei caratteri)text-decoration(Decorazione del testo)text-transform(Trasformazione del testo)letter-spacing(Spaziatura lettere)line-height(Altezza linea)word-spacing(Spaziatura parole)
Famiglia di caratteri CSS (font-family)
I caratteri con un design comune sono generalmente raggruppati in una famiglia di caratteri. All’interno della famiglia, i glifi possono variare in larghezza, inclinazione o peso.
La proprietà CSS font-family viene utilizzata per scegliere il tipo di carattere. È consigliabile specificare tutte le variazioni dei caratteri di un tipo, poiché è difficile prevedere se un carattere specifico sia disponibile o meno sul computer dell’utente. In questo caso, il browser ne verificherà la presenza, testando i caratteri specificati uno ad uno fino a trovarne uno disponibile.
La proprietà font-family viene ereditata.
In CSS, la proprietà font-family accetta i seguenti valori:
- Nome della famiglia di caratteri: (
Verdana,Montserrat,Courier). - Famiglia generica: Qui è necessario indicare uno dei cinque
tipi di carattere:
serif,sans-serif,cursive(equivalente ai caratteri script),fantasy(equivalente ai caratteri decorativi) omonospace. initial: Imposta i valori predefiniti.inherit: Eredita i valori dall’elemento padre.
Esempio di utilizzo:
Nel seguente esempio sono impostati i parametri corrispondenti:
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
font-family: | Lobster, Pacifico, cursive; | Audiowide, fantasy; | Courier, monospace; |
Sintassi:
1// testo 1
2.text1 {
3 font-family: Lobster, cursive;
4}
5// testo 2
6.text2 {
7 font-family: Audiowide, fantasy;
8}
9// testo 3
10.text3 {
11 font-family: Courier, monospace;
12}Il risultato dell’applicazione sarà il seguente (si noti che la dimensione del carattere e il colore sono stati impostati allo stesso modo per tutti e tre i testi nel <body>):
Peso del carattere CSS (font-weight)
La proprietà font-weight è responsabile dello spessore dei tratti del carattere.
La proprietà font-weight viene ereditata.
In HTML/CSS, font-weight può avere i seguenti valori:
normal: Valore predefinito, equivalente a 400.bold: Rende il carattere in grassetto, equivalente al peso 700.bolder: Imposta un peso più pesante rispetto a quello dell’elemento padre.lighter: Imposta un peso più leggero rispetto a quello dell’elemento padre.100, 200, 300, 400, 500, 600, 700, 800, 900: Dove100è il carattere più leggero e900è quello più pesante (grassetto).initial: Imposta i valori predefiniti.inherit: Eredita i valori dall’elemento padre.
Esempio di utilizzo:
Rappresentiamo i testi con i seguenti parametri di font-weight:
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
font-weight: | 900; | 500; | 200; |
Sintassi:
1// testo 1
2.text1 {
3 font-weight: 900;
4}
5// testo 2
6.text2 {
7 font-weight: 500;
8}
9// testo 3
10.text3 {
11 font-weight: 200;
12}Il risultato dell’applicazione apparirà così (con dimensione e colore identici per i tre testi). È importante ricordare che il carattere utilizzato deve avere le variazioni di peso necessarie. La maggior parte dei caratteri è disponibile solo nei pesi normal e bold (o semi-bold). Il carattere Segoe UI utilizzato nell’esempio ha sufficienti variazioni di peso per permettere al testo di essere rappresentato con tutti i valori impostati nell’esempio.
Allungamento del carattere CSS (font-stretch)
La proprietà font-stretch consente di scegliere una versione normale, condensata o espansa della famiglia di caratteri. Questa proprietà non funziona per ogni carattere; solo alcuni caratteri appositamente progettati che includono varianti di allungamento nella loro famiglia possono visualizzare correttamente questa proprietà.
La proprietà font-stretch viene ereditata.
I valori di font-stretch in CSS possono essere i seguenti:
ultra-condensed: Per il font più condensato.extra-condensed: Seconda versione più condensata.condensed: Font condensato.semi-condensed: Font leggermente condensato.normal: Valore predefinito.semi-expanded: Font leggermente espanso.expanded: Testo espanso.extra-expanded: Seconda versione più espansa.ultra-expanded: Font più espanso.initial: Imposta i valori predefiniti.inherit: Eredita il valore dall’elemento padre.
Esempio di utilizzo:
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
font-stretch: | condensed; | normal; | expanded; |
Sintassi:
1// testo 1
2.text1 {
3 font-stretch: condensed;
4}
5// testo 2
6.text2 {
7 font-stretch: normal;
8}
9// testo 3
10.text3 {
11 font-stretch: expanded;
12}Il risultato sarà il seguente:
Stile del carattere CSS (font-style)
Questa proprietà regola l’inclinazione del carattere.
La proprietà font-style viene ereditata.
La proprietà font-style di HTML/CSS può avere i seguenti valori:
normal: Valore predefinito che imposta l’inclinazione normale del carattere.italic: Contrassegna il testo in corsivo.oblique: Imposta la versione inclinata del carattere (quando disponibile nella famiglia).initial: Imposta i valori predefiniti.inherit: Eredita il valore dall’elemento padre.
Esempio di utilizzo:
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
font-style: | normal; | italic; | oblique; |
Sintassi:
1// testo 1
2.text1 {
3 font-style: normal;
4}
5// testo 2
6.text2 {
7 font-style: italic;
8}
9// testo 3
10.text3 {
11 font-style: oblique;
12}Il risultato apparirà così:
Potresti aver notato che i risultati per italic e oblique sembrano identici. Questo accade perché il valore oblique funziona pienamente solo quando il carattere possiede una specifica variazione obliqua; in caso contrario, il browser può applicare un’inclinazione simulata simile al corsivo.
Dimensione del carattere CSS (font-size)
Questa proprietà imposta l’altezza dei glifi del carattere.
La proprietà font-size viene ereditata.
Il font-size di CSS ha i seguenti valori:
- Dimensione assoluta: Può essere
xx-small,x-small,small,medium,large,x-largeoxx-large. Il valore predefinito èmedium. - Dimensione relativa: Rispetto all’elemento padre. Può essere
smallerolarger. - Unità di misura: Definita in pixel (
px) o Ems (em). L’emè un’unità scalabile; 1em equivale alla dimensione corrente del carattere. Se la dimensione del carattere del documento è 14pt, 1em equivale a 14pt. - Percentuale (%): Valore calcolato rispetto al carattere dell’elemento padre.
- Larghezza del viewport (vw): Consente al carattere di adattarsi alle dimensioni della finestra del browser utilizzato. 1vw = 1% della larghezza del viewport.
initial: Imposta i valori predefiniti.inherit: Eredita il valore dall’elemento padre.
Esempio di utilizzo:
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
font-size: | 7vw; | 70px; | 2em; |
Sintassi:
1// testo 1
2.text1 {
3 font-size: 7vw;
4}
5// testo 2
6.text2 {
7 font-size: 70px;
8}
9// testo 3
10.text3 {
11 font-size: 2em;
12}Risultato:
Proprietà abbreviata CSS (font)
La proprietà CSS font viene utilizzata per accorciare il codice, permettendo di impostare diverse proprietà relative al carattere in una sola riga. Le proprietà che possono essere specificate sono:
font-style, font-variant, font-weight, font-stretch, font-size/line-height e font-family. Possono anche essere inclusi i valori di font-variant come normal o small-caps. Per ulteriori informazioni su small-caps, consulta il paragrafo
Variante carattere dell’articolo
Che cos’è un carattere?.
Esempio di utilizzo:
| Proprietà | Valore per il testo 1 | Valore per il testo 2 | Valore per il testo 3 |
|---|---|---|---|
font: | 6vw Arial; | 60pt Courier, monospace; | - |
Sintassi:
1// testo 1
2.text1 {
3 font: 6vw Arial;
4}
5// testo 2
6.text2 {
7 font: 60pt Courier, monospace;
8}
9// testo 3
10.text3 {
11}Il risultato è mostrato nell’immagine seguente. Poiché non abbiamo impostato alcun valore per il terzo testo, è stato renderizzato con i parametri predefiniti.
Sintesi dei caratteri CSS (font-synthesis)
Questa proprietà definisce se i browser possono sintetizzare stili di grassetto o inclinati se assenti nella famiglia di caratteri. Se font-weight o font-style non sono presenti nel file del carattere, il browser può “simularli” a meno che questa proprietà non lo proibisca.
La proprietà font-synthesis viene ereditata.
Valori accettati:
none: Proibisce la sintesi.weighte/ostyle: Le proprietà indicate possono essere sintetizzate.initial: Imposta i valori predefiniti.inherit: Eredita il valore dall’elemento padre.
Esempio di utilizzo:
| Proprietà | Value for text 1 | Value for text 2 | Value for text 3 |
|---|---|---|---|
font-synthesis: | weight; | style; | none; |
font-weight: | 900; | - | 900; |
font-style: | - | oblique; | oblique; |
Sintassi:
1// testo 1
2.text1 {
3 font-synthesis: weight;
4 font-weight: 900;
5}
6// testo 2
7.text2 {
8 font-synthesis: style;
9 font-style: oblique;
10}
11// testo 3
12.text3 {
13 font-synthesis: none;
14 font-weight: 900;
15 font-style: oblique;
16}Il risultato è mostrato nell’immagine seguente. Poiché abbiamo impostato il valore none per il terzo testo, il browser non ha sintetizzato gli stili richiesti.
Pile di caratteri (Font Stacks)
Le pile di caratteri (font stacks) si riferiscono a un elenco di caratteri definiti in CSS utilizzati come opzioni di fallback nel caso in cui un carattere specifico manchi o non sia presente sul dispositivo dell’utente. Esse garantiscono ai web designer la coerenza tipografica su diverse piattaforme e browser.
Per specificare le famiglie di caratteri, è comune definire una pila elencando più caratteri in ordine di preferenza. Se la prima opzione non è disponibile, il browser prova la successiva, e così via.
Ecco un esempio: qui il carattere preferito è “Helvetica Neue”. Se non è disponibile, il browser proverà con “Arial”. Se anche “Arial” fallisce, utilizzerà il carattere generico sans-serif.
1 font-family: "Helvetica Neue", Arial, sans-serif;Specificare una famiglia di caratteri generica (sans-serif, serif o monospace) come ultima opzione della pila è considerata una buona pratica, per assicurare che il browser abbia sempre un’alternativa adatta.
Caratteri Web-Safe
I caratteri Web-Safe, noti anche come caratteri di sistema o predefiniti, sono una raccolta di caratteri generalmente disponibili su vari sistemi operativi e dispositivi. Essi sono considerati sicuri per il web design in quanto ampiamente supportati.
All’inizio dello sviluppo web, le opzioni erano limitate e i designer dipendevano da un insieme principale di caratteri installati sulla maggior parte dei computer.
Esempi di caratteri Web-Safe:
- Arial
- Helvetica
- Times New Roman
- Georgia
- Courier New
- Verdana
- Tahoma
- Trebuchet MS
Tuttavia, con l’avanzamento tecnologico e l’uso di caratteri personalizzati (tramite Google Fonts, Adobe Fonts, ecc.), la dipendenza dai caratteri Web-Safe è diminuita, offrendo maggiore flessibilità visiva ai designer.
Come usare caratteri esterni in CSS?
Per utilizzare caratteri esterni, si impiega la regola @font-face. Essa permette di specificare un carattere personalizzato e renderlo accessibile nella tua pagina. Ecco come fare:
Ottieni i file del carattere:
- Trova i file nei formati desiderati, come
WOFF,WOFF2,TTFoEOT. - Puoi ottenerli da servizi come Google Fonts o scaricarli da fonti affidabili.
- Trova i file nei formati desiderati, come
Carica i file:
- Carica i file sul tuo server web o in una cartella del tuo progetto.
Definisci la regola @font-face:
- Nel tuo file CSS, specifica il nome della famiglia e il percorso ai file, includendo molteplici formati per la compatibilità con diversi browser.
Esempio:
1 @font-face {
2 font-family: 'IlMioCaratterePersonalizzato';
3 src: url('percorso/font.woff2') format('woff2'),
4 url('percorso/font.woff') format('woff');
5 /* Aggiungi altri formati se disponibili */
6 }- Applica il carattere:
- Dopo aver definito
@font-face, puoi usare il nome scelto nella proprietàfont-family. Se il carattere personalizzato fallisce, il browser utilizzerà l’alternativa generica.
- Dopo aver definito
1 body {
2 font-family: 'IlMioCaratterePersonalizzato', sans-serif;
3 }- Testa e verifica su diversi browser e dispositivi.
Alcune parole sulla tipografia responsiva
La tipografia responsiva è la pratica di progettare e implementare la tipografia di un sito in modo che si adatti a diverse dimensioni di schermo e dispositivi. Essa implica l’aggiustamento di fattori come la dimensione del carattere, la lunghezza della linea e la spaziatura.
Aspetti chiave:
- Unità relative: Invece di dimensioni fisse, si usano percentuali,
emsoremsper ridimensionare i testi proporzionalmente. - Media Queries: Consentono l’adattamento degli stili di carattere in base a larghezze di schermo specifiche.
- Unità di viewport (Viewport Units): Come
vwevh, che ridimensionano i caratteri in relazione alle dimensioni della finestra del browser. - Lunghezza riga e leggibilità: Regolare il numero di caratteri per riga e la spaziatura verticale (
line-height) per evitare testi troppo serrati o troppo distanziati. - Gerarchia chiara: Garantire che titoli e corpo del testo siano ben differenziati sui piccoli schermi.
- Accessibilità: Considerare il contrasto tra testo e sfondo e consentire regolazioni flessibili delle dimensioni.
Conclusione
Le proprietà dei caratteri CSS rappresentano blocchi fondamentali nello sviluppo di interfacce. Poiché la maggior parte del contenuto web è testuale, padroneggiare queste proprietà è essenziale per garantire un aspetto di alta qualità, una buona leggibilità e scalabilità.
Alcune proprietà funzionano facilmente con qualsiasi carattere, ma altre richiedono caratteri che supportino variazioni specifiche. Ad esempio, il carattere Inconsolata dispone di 8 varianti di peso, mentre altri possono avere solo normal e bold.
Se hai in mente un carattere ma non lo hai installato, puoi provare a cercarlo e scaricarlo tramite le applicazioni Web gratuite di Aspose. Inoltre, il Visore di caratteri ti fornirà tutti i dettagli tecnici necessari di cui potresti aver bisogno durante lo sviluppo.