Définir le poids de police par rapport à la famille de polices en gras en CSS, ce qui est plus correct?

9

Il existe essentiellement deux façons de rendre une police en gras en CSS: via l' font-familyattribut et via l' font-weightattribut.

Supposons que j'utilise la police Raleway par exemple et que j'ai chargé une variante Light, Regular, Semibold et Bold via css. Je pourrais mettre une simple rubrique en gras en la définissant sur h1{font-family: 'Raleway Bold'}ou sur h1{font-weight: 700}.

Laquelle de celles-ci est la plus correcte, ou sont-elles toutes les deux identiques?

css web-fonts html pooja
la source
J'ai un doute, que soit écrire "font-weight" en css soit correct, quand vous avez toutes les options dans la famille de polices. par exemple: la police Raleway a toutes les options, de claire à extra-grasse. Alors, quelle est la manière appropriée d'utiliser toutes les polices de la famille, afin que nous ne puissions pas perdre le caractère de la police.
pooja
1
Questions et réponses très liées .
Cai
@poojaa, j'ai pris la liberté de modifier votre question pour rendre le formatage plus clair et mettre la question réelle au premier plan. Si vous sentez que j'ai changé le sens, vous pouvez toujours le modifier vous-même.
PieBie

Réponses:

6

Disons que nous avons chargé une variante de police en gras comme ceci:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

Je plaiderais en faveur de l'utilisation des deux font-familyet font-weightdans votre spécification de style. Par exemple:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

Les deux font essentiellement la même chose: dites à votre rubrique1 d'être en gras. Cela ne doublera pas l'audace ou quoi que ce soit, il répète simplement qu'il doit être audacieux.

La raison en est assez simple: si votre fichier de police n'est pas chargé (surcharge du serveur, restrictions client, vaudou), votre visiteur verra quand même une police en gras (dans ce cas un Helvetica en faux gras) et pourra ainsi distinguer un titre et le corps du texte, ce qui ne serait pas le cas si vous aviez seulement spécifié le font-family.

Voir dans cette image l'ensemble supérieur est Raleway et Raleway Italic mais a le bon Raleway Italic chargé avec:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

Le fond ne charge que Raleway. En conséquence, le jeu inférieur a Raleway et FAUX Raleway italic. Notez les différences en minuscules "a" et "k" par exemple entre le vrai italique et le faux italique. Une police bien conçue aura des différences entre les caractères réguliers, les caractères gras et l'italique que vous n'obtiendrez pas si vous ne les chargez pas.

entrez la description de l'image ici

PieBie
la source
Utiliser un seul nom de famille et ne définir que des poids vous donnera toujours le poids correct dans le cas où les fichiers de polices ne se chargent pas. La seule raison d'utiliser les deux serait pour des raisons de compatibilité.
Cai
1
Vous êtes confus. Votre exemple de police Google ne se réfère pas seulement à l'italique Raleway comme juste font-family: 'Raleway'(en contradiction avec votre exemple audacieux ci-dessus) mais, en outre, indépendamment du fait de nommer toute la famille Ralewayou chaque variante individuellement avec des noms de famille de polices différents, cela n'a absolument aucune incidence sur l'application de faux ou non . Même votre propre exemple le prouve est une méthode incorrecte, que votre condition font-family: 'Raleway Bold', Helvetica, Arial, sans;ne dispose Helvetica Boldet Arial Boldindividuellement parce que c'est juste la façon incorrecte des variantes font en cascade.
rgthree
1

Alors que les deux façons vous donneront la sortie correcte, la manière la plus correcte serait d'utiliser une seule famille de polices pour regrouper toutes les différentes variantes de poids et de styles. C'est de la même manière que vous utilisez les polices système (de 'Arial' à 'sans-serif') et, en fait, si vous utilisez des polices Google pour charger Raleway, vous utiliseriez la route de famille de polices unique.

Décrivons plusieurs raisons pour lesquelles c'est la bonne méthode.

Il réduit la complexité CSS et, finalement, la taille du fichier

Avoir une seule famille de polices signifie que vous pouvez définir un élément contenant entier avec la famille de polices, et seulement certains éléments avec différents poids / styles. Prenons l'exemple suivant:

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

Remarquez à quel point ce CSS est agréable et agréable. Nous n'avions pas besoin de spécifier "RalewayBold" comme famille de polices pour .bold, ni "RalewayItalic" pour notre .italic. En fait, nous n'avons même pas besoin de spécifier une variante en gras et en italique, car nos classes fonctionneront simplement. De plus, si .bold est à l'intérieur de notre .footer, ce sera Arial en gras et non Raleway, car il hérite simplement Arial du conteneur de pied de page.

C'est la façon dont le navigateur le fait.

Ce qui précède est essentiellement la façon dont la feuille de style interne du navigateur définit les polices en utilisant des styles minimaux et la nature en cascade inhérente de CSS.

C'est la façon dont l'industrie le fait et l'a fait.

Les plus grandes propriétés Web, applications et éditeurs le font tous de cette façon. Google, Facebook, NYT, ESPN, etc. définissent et utilisent tous des polices de cette manière.

Non seulement cela, mais les interfaces utilisateur avant le CSS ou même Internet spécifient des familles de polices uniques et choisissent des variantes basées sur des spécifications différentes de poids et de style. Chargez Microsoft Word, KeyNote, Google Docs, même un ancien WordPerfect de la fin des années 1990 et ouvrez le menu déroulant des polices; Vous verrez le nom de la famille de polices "Arial" répertorié; pas "Arial" suivi de "Arial Bold" suivi de "Arial Italic" etc.

Il suffit de charger à partir de Google Fonts.

Si vous chargez Raleway à partir du référentiel de polices Web gratuites sur Google Fonts, vous verrez que Raleway est défini avec un seul nom de famille:

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
rgthree
la source
Cette méthode n'ignore-t-elle pas les variations entre les styles de police pour les faux?
Ryan
@Ryan Pas du tout. En fait, le nom de la famille de polices (regroupant correctement la famille comme Ralewayavec les variantes de poids / style ou définissant incorrectement les variantes individuelles Raleway Boldet Raleway Italiccomme familles de polices individuelles) n'a aucune incidence sur l'application de fausses variations ou non. En fait, regrouper correctement la famille sous le même nom aide le navigateur à choisir une variante plus proche pour appliquer un faux style tout en nommant incorrectement chaque variante séparément, le navigateur reste dans le noir des polices disponibles pour appliquer des variantes si la police souhaitée n'est pas chargée.
rgthree
(1) Il suffit de charger à partir des polices Google : pour les sites Web, bien sûr, mais il y a beaucoup d'autres cas où html / css est utilisé où une connexion Internet n'est pas garantie et vous devez charger les polices localement, (2) Cela réduit la complexité CSS une taille de fichier, en fin de compte : vous raserez donc 1 Ko sur un site ou une application de plusieurs dizaines de Mo, le client sera étonné de la vitesse à laquelle votre application se charge, (3) c'est la façon dont le navigateur / l'industrie le fait : les navigateurs défaut à faux, et de toute façon, «l'industrie» n'est pas toujours correcte ni ne suit les meilleures pratiques (il suffit de regarder flexbox)
PieBie
les navigateurs par défaut à faux Quoi? Vous ne savez clairement pas de quoi vous parlez. Lorsque vous spécifiez font-family:Arial; font-weight:bold;(ce qui, encore une fois, est la bonne façon de le faire, que ce soit Arial ou Raleway) pensez-vous que le navigateur applique un faux gras à une police Arial normale? Incorrect. Le navigateur charge le visage de la police ArialBold comme le système le définit et ce n'est que si aucune police exacte n'est disponible qu'il appliquera un faux style à la meilleure police correspondante en fonction du nom de la famille de polices, c'est pourquoi elles doivent être les mêmes! Je ne peux pas dire "Faites ça pour Arial, mais pas pour Raleway".
rgthree
0

Voici la chose, si vous posez la question sur Raleway, une police Web programmée pour CSS, les deux méthodes fonctionnent également bien. Dans ce cas, utilisez le poids de la police car c'est la ligne de conduite "correcte" qui sera plus facile à modifier et à contrôler sans changements majeurs dans le code.

Maintenant, vous commencez à avoir des problèmes une fois que vous avez incorporé une police vous-même, une police qui n'est pas nécessairement prévue pour CSS et les poids peuvent ne pas correspondre aux chiffres.

Pour cette raison, un bogue très courant sur les polices incorporées, extrêmement courant dans les polices non anglaises, est que css "boldens" ou "éclaircit" la police automatiquement et le résultat est très mauvais.

Par conséquent, je recommande que si vous utilisez une police Web comme les polices sur les polices Google, allez-y et utilisez les chiffres sur le poids de la police, mais lorsque vous incorporez une police vous-même, restez prudent et utilisez la famille de polices pour chaque poids séparément .

Naty
la source