Polices Web
Il existe 2 façons de définir des polices Web avec @font-face
. Le premier, et probablement le plus courant (je pense que la plupart des générateurs, Font Squirrel par exemple, produira cela) est de définir chaque fichier de police (c'est-à-dire chaque poids et style) avec son propre nom de famille unique.
@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;
}
Notez que le font-weight
et font-style
sur chacun est réglé sur normal et chacun a un font-family
nom unique . Cela signifie que chaque fois que vous définissez un font-weight
ou font-style
autre chose que la normale, vous obtenez des "faux" styles mis en œuvre par le navigateur, pas les styles du fichier de police correct. Cela peut également conduire à un "double" gras ou italique si vous ne réinitialisez pas les styles CSS par défaut du navigateur à "normal". Par exemple:
strong {
font-family: 'YourFontBold';
}
Sans réinitialiser le font-weight
à la normale, cela rendra plus audacieux qu'il ne le devrait puisque le navigateur charge le fichier de police en gras et ajoute son propre faux style gras puisque le style par défaut de strong
est font-weight: bold;
.
Une meilleure façon:
@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;
}
Notez la définition du fichier de polices font-weight
et font-style
correspondez-y correctement et tous utilisent le même font-family
nom. Déclarer vos polices de cette manière signifie que vous pouvez utiliser font-weight
et font-style
dans n'importe où dans votre CSS exactement comme vous vous y attendez et vous obtiendrez la police correcte, sans style "faux".
Seuls les mots clés "gras" et "italique" sont susceptibles d'être compris par tous les navigateurs, vous devez donc utiliser le numéro de poids de police spécifique à la place. Gardez également à l'esprit que les navigateurs n'arrondissent généralement pas bien le poids des polices, alors spécifiez le poids que vous voulez exactement et assurez-vous qu'ils correspondent dans votre @font-face
déclaration et les styles CSS.
Le problème avec cette méthode est qu'Internet Explorer 8 ou inférieur ne reconnaît pas plusieurs styles et poids qui utilisent le même font-family
nom. Je crois que cela a également causé des problèmes dans les anciennes versions d'iOS
Google Fonts contourne ce problème en servant conditionnellement IE 8 ou une version antérieure avec uniquement la police standard et en laissant IE "truquer" les autres styles. Pas idéal.
Cet article sur smashingmagazine.com suggère d'ajouter conditionnellement les styles séparément pour Internet Explorer, ce qui devrait contourner le problème des poids et styles multiples:
<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]-->
Donc, si vous souhaitez utiliser font-weight
et font-style
dans votre CSS sans vous soucier du nom de la police réelle, ne vous fiez pas aux générateurs de polices Web et configurez @font-face
correctement la déclaration vous-même, et sachez que cela causera des problèmes dans les anciens navigateurs.
Polices de bureau
La déclaration des polices qui ne sont pas incorporées à l'aide @font-face
n'utilisera que les polices installées sur l'ordinateur des utilisateurs. Ceux - ci doivent respecter tout font-weight
et font-style
styles et charger les polices correctes (Tous mes tests dans Chrome et Firefox sur le travail OS X comme prévu), mais cela peut dépendre de navigateur et système d' exploitation, et dépendront de la désignation des polices dans les fichiers de police eux - mêmes - des choses sur lesquelles vous n'avez pas vraiment de contrôle.