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)


8

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)


1
Grande question. La réponse est que cela devrait mais cela dépend (en particulier avec les polices web). J'essaierai d'écrire une réponse plus complète plus tard quand j'aurai plus de temps.
Cai

Réponses:


4

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.


merci pour votre réponse. pouvez-vous préciser si «YourFontBold» utilise réellement une police différente (que YourFont)? si oui, quel était le but d'ajouter un attribut de poids de police? REMARQUE: ma question suppose l'utilisation de polices Web (par exemple de Google CDN)
dragonmnl

Oui, YourFontBold utilisera la police en gras, vous définissez l'attribut font-weight essentiellement comme une réinitialisation pour empêcher les navigateurs d'appliquer des styles "faux". Mais avec cette méthode, vous ne pouvez pas simplement définir les styles dans votre CSS, vous devez définir à font-family: YourFontBold; font-weight:normal;chaque fois. Vous devez donc utiliser l'autre méthode.
Cai

Si vous utilisez la première méthode, vous ne devez définir le poids / style comme normal. Vous pouvez utiliser des noms de famille uniques et un poids / style approprié, alors vous devriez avoir des remplacements de style / poids corrects. Mais vous devez toujours déclarer le nom de famille et le poids, etc. dans votre CSS. Comme ça .
Cai
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.