Scritto da
Venerdì, 21 Marzo 2014

Regola CSS @font-face

 L’HTML si sa, è indispensabile per chi mastica il linguaggio di internet, ed insieme al CSS è praticamente il DNA del web. Per i programmatori è un gran passo avanti soprattutto per la leggerezza con cui ora si può scrivere un buon codice di un sito, e quindi, velocizzare i processi di navigazione, cosa che di conseguenza giova i visitatori che navigano con più facilità. Immaginate un sito ricco di video in flash? Abbastanza pesante direi! Invece lo stesso sito con gli stessi video, ma realizzati in HTML5… tutta un’altra storia!


@font-face

Ma la cosa formidabile è l’accoppiamento HTML5/CSS3. Il CSS3 non scherza mica! Eppure anch’esso si usa da un bel po’ ma c’è sempre qualche regola di cui non sappiamo l’esistenza, ne sbucano di nuove e ignote di tanto in tanto, che ci semplificano la vita! :D

Ne volevo condividere alcune con voi.

1. @font-face: Integrare una font nel proprio sito
A meno che non si tratti di una Google Web Font dove basta semplicemente inserire la stringa che viene data da google all’interno dell’head del proprio sito e richiamare poi nel CSS il nome della font, nella voce “font-family: .. “ allora bisogna procedere in questo modo:

Nel nostro foglio di stile inserire questa regola: 

@font-face { 
font-family: Cookie; 
src: url(/fonts/Cookie.eot) ; 
src: local(Cookie), url (/fonts/Cookie.ttf) format(“truetype”); 

Sintassi della regola

font-family: Cookie; - Attribuiamo un nome a questo font in modo da poterlo assegnare successivamente alla proprietà font-family o font.

src: url(/fonts/Cookie.eot); - Questo è il percorso al file dei caratteri secondo il formato Embedded OpenType. È l’unico formato che Internet Explorer sa interpretare, per cui provvederà a scaricare il file Cookie.eot. Gli alti browsers non daranno conto a questo formato.

src: local(Cookie), url (/fonts/Cookie.ttf) ) format(“truetype”); - Con local chiediamo al browser di cercare un tipo di carattere che abbia il nome “Cookie” tra quelli che abbiamo sul computer.

Letto 769 volte
Vota questo articolo
(0 Voti)

Forse ti possono interessare anche questi articoli:

Lascia un commento

Assicurati di inserire (*) le informazioni necessarie ove indicato.
Codice HTML non è permesso.