CSS @font-face
La direttiva CSS3 @font-face consente di importare font personalizzati
La direttiva @font-face permette ai web designer di usare qualsiasi font desiderato, anche se non installato nel sistema dell’utente. È un potente strumento per la personalizzazione visiva dei progetti web e garantisce compatibilità attraverso l’uso di formati multipli come .woff2, .ttf, .eot e altri.
Sintassi
font-family: 'NomeFont';
src: url('percorso/font.ttf') format('formato');
[font-weight: normal | bold | ...];
[font-style: normal | italic | oblique];
}
Significato dei principali attributi:
font-family: nome identificativo del font, usato poi nel CSS.
src: URL del file del font. Può contenere uno o più percorsi, con supporto per vari formati.
format(): specifica il formato del file (es.
'woff2','truetype','opentype').font-weight / font-style: opzionali, indicano peso e stile associato al font caricato.
Esempio proprietà: @font-face
Codice Esempio: @font-face
@font-face {
font-family: "MioFont";
src: url("https://example.com/fonts/MioFont.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}.custom-font-example {
font-family: "MioFont", sans-serif;
background-color: #eef;
padding: 20px;
text-align: center;
font-size: 22px;
border-radius: 6px;
}
Contenuto Esempio: @font-face
Esempio di utilizzo di @font-face
Nel seguente esempio, un font personalizzato viene caricato da un file .woff2 e applicato a un elemento HTML:
@font-face.
CSS e HTML per l’esempio con @font-face:
<style>
@font-face {
font-family: "MioFont";
src: url("https://example.com/fonts/MioFont.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
.custom-font-example {
font-family: "MioFont", sans-serif;
background-color: #eef;
padding: 20px;
text-align: center;
font-size: 22px;
border-radius: 6px;
}
</style>
<div class="custom-font-example">
Questo testo usa un font personalizzato caricato tramite @font-face.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
