I caratteri personalizzati sono tra gli aspetti più interessanti del CSS3 per i progettisti. Con la regola del carattere, è possibile eseguire il rendering di qualsiasi font in linea nel testo della pagina Web, indipendentemente dal fatto che l'utente lo abbia installato o meno.
Come con la maggior parte delle tecniche CSS3, il codice di base è piuttosto semplice, ma la realtà pratica è un po 'più complessa.
In questo breve tutorial, illustreremo le basi per includere caratteri personalizzati nelle tue pagine.
Innanzitutto, assicurati che il font che desideri utilizzare sia concesso in licenza per l'uso web. Quasi tutti i font gratuiti possono essere utilizzati su un sito Web e molti font premium sono disponibili con una licenza che copre l'utilizzo del web.
Successivamente carica il carattere scelto sul tuo server. Si potrebbe desiderare di memorizzarlo in una directory "tipi di carattere" dedicata, ma questo è facoltativo.
Ricordati di includere i file per qualsiasi variante del font che intendi utilizzare, come grassetto o corsivo. È possibile utilizzare i file EOT (Embedded OpenType) per Internet Explorer e OTF (OpenType) o TTF (TrueType) per il resto. (Le opzioni aggiuntive includono WOFF (Web Open Font Format) e SVG (Scalable Vector Graphics), ma qui rimarremo tipi più comuni.)
Prendi nota di dove sono memorizzati i file dei font sul tuo server.
Apri il file HTML o CSS per la pagina con cui stai lavorando. Aggiungi una dichiarazione font-face al codice dello stile:
@font-face {}Prima all'interno della sezione font-face , dai al font un nome che puoi usare in seguito per riferirti ad esso:
font-family: 'lovelyFont';Successivamente, sempre all'interno della sezione font-face , fornire la posizione del file EOT:
src: url('fonts/lovely_font.eot');Modificare la posizione e il nome del carattere secondo necessità. Successivamente aggiungi un font OTF e / o TTF:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Questo è il nudo del codice necessario, che sarà sufficiente in molti casi. Tuttavia, ci sono ulteriori passaggi che possiamo fare per rendere il codice più affidabile. Estendere innanzitutto questa sezione per includere un indicatore del tipo di file del font:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Come un'altra misura opzionale di efficienza, possiamo ottenere che il browser controlli una copia locale del font nel caso in cui l'utente lo abbia già. Estendi nuovamente il codice come segue, aggiungendo la sezione locale prima di specificare l'URL, in modo che il carattere venga scaricato solo se necessario:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');L'aggiunta è la stessa per OTF e TTF. Specifichiamo il nome del carattere dopo la parola chiave locale .
In questo caso abbiamo due righe che specificano il carattere locale perché il nome del font contiene più di una parola. La versione sillabata si riferisce al modo in cui i nomi dei font sono memorizzati su determinati sistemi operativi - questa linea aggiuntiva non è necessaria se il font ha una sola parola nel suo nome. Se sai che un font può avere nomi diversi su sistemi diversi, includi ognuna delle possibilità nella tua sezione locale .
Finalmente possiamo applicare il font agli elementi della pagina. Nel codice CSS per un particolare elemento o gruppo di elementi, specifica semplicemente il nome del font che hai usato, inclusi eventuali fallback che scegli:
div { font-family: 'lovelyFont', sans-serif; }Se, per esempio, vuoi usare anche una versione in grassetto del tuo font, includi semplicemente un'altra sezione font-face con l'URL del file font in grassetto e una dichiarazione di "font-weight: bold;". Specifica il peso del carattere in grassetto per ogni elemento con il carattere personalizzato applicato e il browser renderà automaticamente la versione in grassetto:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }Questo è tutto!
Usi CSS3 per espandere il tipo di facce a tua disposizione? Usi un servizio come il Typekit di Adobe o i Webfonts di Google? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di caratteri via Shutterstock.