Come utilizzare i caratteri Web esterni in CSS
Se desideri aggiungere un carattere sul tuo sito Web che non è presente sul computer dell'utente per impostazione predefinita, puoi utilizzare la regola CSS @Font-Face per farlo. La regola di Font-Face specifica per prima cosa, è necessario fornire un certo nome al carattere personalizzato e successivamente puntare al file del carattere. In questo articolo, stabilirai una comprensione di come utilizzare i caratteri Web esterni in CSS. Questo tutorial copre i seguenti argomenti.
- Formati di carattere
- Come aggiungere caratteri Web esterni usando CSS
- Formati di carattere e supporto del loro browser.
Cominciamo.
Formati di carattere
Prima di immergerci nei dettagli su come aggiungere caratteri web esterni, dobbiamo prima stabilire una comprensione di base dei diversi formati di carattere che abbiamo spiegato in dettaglio di seguito.
Caratteri TrueType
I caratteri TrueType o TTF sono un formato di carattere standard che è stato fondato da Microsoft e Apple alla fine degli anni '80, quindi è compatibile con entrambi i sistemi operativi. È altamente adatto per l'espansione del supporto per i vecchi browser, in particolare sugli smartphone.
Caratteri Opentype
I caratteri Opentype o OTF sono un formato di carattere inventato da Microsoft sugli stessi schemi di quello dei caratteri TrueType. Questo formato è ampiamente utilizzato sulla maggior parte dei sistemi informatici.
Formato del carattere aperto Web
Il formato del carattere Woff è nato nel 2009 come formato che copre sia i formati TTF che OTF. Questo formato compatta i file ed è compatibile con tutti i browser moderni. Ha due versioni, la seconda viene definita Woff 2.0 e compatta i file in modo migliore della versione precedente.
Caratteri Opentype incorporati
I caratteri Opentype incorporati, più comunemente indicato come EOT sono un formato che è una compressione di OTF sviluppato da Microsoft. Questo formato viene utilizzato come caratteri incorporati sui siti Web.
Fonti SVG
Un formato di caratteri SVG consente di visualizzare SVG sotto forma di grafica vettoriale. Ciò significa che vari personaggi verranno visualizzati in diversi colori o animazioni.
Ora che abbiamo appreso i vari formati di carattere, considera i passaggi seguenti per comprendere l'intera procedura di aggiunta di caratteri esterni al tuo sito Web.
Come aggiungere caratteri Web esterni usando CSS
Di seguito ti abbiamo fornito una guida passo-passo su come aggiungere caratteri esterni usando CSS.
Passaggio 1: scarica caratteri personalizzati
Il primo passo sarebbe scaricare i caratteri desiderati nel formato dei caratteri TrueType (.TTF) o il formato dei caratteri OpenType (.spesso) da qualsiasi repository di caratteri. Ad esempio, qui stiamo scaricando i caratteri "Dancing Script" da Google Fonts.
Fai clic sulla "famiglia scarica" per scaricare caratteri personalizzati.
Passaggio 2: estrarre file dalla cartella ZIP
Una volta scaricato, estrarre file dalla cartella ZIP.
I caratteri sono nel .formato TTF. Ora seleziona uno di questi caratteri che appartengono alla famiglia dei caratteri "Dancing Script".
Nota: Assicurati che i file scaricati siano presenti nella stessa cartella del file Web.
Il file font è presente nella stessa cartella del file Web.
Passaggio 3: aggiungi caratteri nel tuo file CSS
Ai tuoi caratteri esterni nel tuo file CSS, usa la regola @font-face. La regola @Font-Face specifica per prima cosa, è necessario fornire un certo nome al carattere personalizzato e successivamente puntare al file del carattere dando l'URL all'attributo SRC.
Abbiamo assegnato il nome "CustomFonts" alla famiglia del carattere, quindi abbiamo fornito l'URL del file di carattere all'attributo SRC. Infine, stiamo assegnando la famiglia dei caratteri alla nostra voce e dandogli un po 'di colore.
Passaggio 4: collega il tuo file CSS al file HTML
E infine, aggiungi il tuo foglio di stile al tuo file HTML.
Stiamo collegando esternamente il nostro file CSS al file HTML.
Produzione
È stato aggiunto con successo un carattere web personalizzato esterno.
Formati di carattere e supporto del loro browser
La tabella seguente mostra tutti i formati di carattere e il loro supporto per il browser pertinente.
| Formato di carattere | Microsoft Edge | Google Chrome | Firefox | Safari | musica lirica |
|---|---|---|---|---|---|
| Ttf | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| Otf | 9.0 | 4.0 | 3.5 | 3.1 | 10.0 |
| Woff | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| Woff2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| EOT | 6.0 | Non supportato | Non supportato | Non supportato | Non supportato |
| Svg | Non supportato | Non supportato | Non supportato | 3.2 | Non supportato |
Conclusione
Per utilizzare i caratteri esterni in CSS, scarica i caratteri desiderati da qualsiasi repository di caratteri e aggiungili al file CSS usando la regola @font-face che specifica un certo nome al carattere personalizzato e indica il file del carattere dando l'URL all'SRC attributo. Questo tutorial è progettato per spiegare sull'uso di diversi formati di carattere e su come i caratteri Web esterni possono essere utilizzati in CSS.