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');
}
