Web-fonts
Ci sono 2 modi in cui puoi definire i font web @font-face. Il primo, e probabilmente il più comune (credo che la maggior parte dei generatori, ad esempio Font Squirrel , produrrà questo risultato) è definire ogni file di font (cioè ogni peso e stile) con il proprio nome di famiglia univoco.
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontBold';
src: url('your_font_bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontItalic';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Si noti che font-weighte font-stylesu ognuno è impostato su normale e ognuno ha un font-familynome univoco . Ciò significa che ogni volta che si imposta uno font-weighto font-stylequalcosa di diverso dal normale si ottengono stili "falsi" implementati dal browser, non gli stili dal file di caratteri corretto. Questo può anche portare a "doppio" grassetto o corsivo se non ripristini gli stili CSS del browser predefiniti su "normale". Per esempio:
strong {
font-family: 'YourFontBold';
}
Senza ripristinare il font-weightnormale, ciò renderà più audace di quanto dovrebbe dal momento che il browser sta caricando il file di caratteri in grassetto e aggiungendo il proprio stile grassetto falso poiché lo stile predefinito strongè font-weight: bold;.
Un modo migliore:
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
Notare la definizione font-weighte font-stylecorrispondere correttamente al file del carattere e tutti usano lo stesso font-familynome. Dichiarare i tuoi caratteri in questo modo significa che puoi usare font-weighte font-styleovunque nel tuo CSS esattamente come ti aspetteresti e otterrai il carattere corretto, senza stili "falsi".
Solo le parole chiave "grassetto" e "corsivo" sono probabilmente comprese da tutti i browser, quindi è necessario utilizzare il numero di peso specifico del carattere. Inoltre, tieni presente che i browser di solito non arrotondano bene i pesi dei caratteri, quindi specifica esattamente il peso che desideri e assicurati che corrispondano alla tua @font-facedichiarazione e agli stili CSS.
Il problema con questo metodo è che Internet Explorer 8 o versioni precedenti non riconoscono più stili e pesi che usano lo stesso font-familynome. Credo che ciò abbia causato problemi anche nelle versioni precedenti di iOS
Google Fonts aggira questo problema servendo condizionalmente IE 8 o versioni precedenti con solo il carattere normale e lasciando che IE "falsi" gli altri stili. Non ideale
Questo articolo su smashingmagazine.com suggerisce di aggiungere condizionalmente gli stili separatamente per Internet Explorer, che dovrebbe aggirare il problema di pesi e stili multipli:
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->
Quindi, se si desidera utilizzare font-weighte font-stylenel proprio CSS senza preoccuparsi del nome del font effettivo, non fare affidamento sui generatori di font Web e impostare la @font-facedichiarazione correttamente da soli, e tenere presente che causerà problemi nei browser più vecchi.
Font desktop
La dichiarazione di caratteri che non sono incorporati utilizzando @font-faceutilizzerà solo i caratteri installati sul computer degli utenti. Questi dovrebbero rispettare qualsiasi font-weighte font-stylestile e caricare i caratteri corretti (tutti i miei test su Chrome e Firefox su OS X funzionano come previsto), ma ciò potrebbe dipendere dal browser e dal sistema operativo e dipenderà dalla denominazione dei caratteri all'interno dei file dei caratteri stessi —Cose su cui non hai alcun controllo.