La modification d'une police «standard» avec un poids de police en CSS la rend-elle réellement en gras? (c'est-à-dire un autre fichier de police)

Je suis développeur web et je travaille sur un projet qui utilise Quicksand Light / Regular / Bold comme police. La police standard de l'application Web est Quicksand regular mais il y a aussi du texte plus léger et plus audacieux.

En tant que développeur Web, j'appliquerais normalement un style CSS simple comme ceci:

font-weight: bold; // or 400, 600, 800

Est-ce une astuce valable pour éviter de définir la police sur chaque élément qui n'est pas "régulier"? Sinon, y a-t-il des polices qui fonctionnent comme ça? (c'est-à-dire les modifier via CSS pour obtenir une police différente)

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-weightet font-stylesur chacun est réglé sur normal et chacun a un font-familynom unique . Cela signifie que chaque fois que vous définissez un font-weightou font-styleautre 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 strongest 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-weightet font-stylecorrespondez-y correctement et tous utilisent le même font-familynom. Déclarer vos polices de cette manière signifie que vous pouvez utiliser font-weightet font-styledans 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-facedé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-familynom. 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-weightet font-styledans 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-facecorrectement 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-facen'utilisera que les polices installées sur l'ordinateur des utilisateurs. Ceux - ci doivent respecter tout font-weightet font-stylestyles 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.