Podczas gdy oba sposoby zapewnią poprawne wyjście, bardziej poprawnym sposobem byłoby użycie jednej rodziny czcionek do grupowania wszystkich różnych wariantów grubości i stylów. W ten sam sposób używasz czcionek systemowych (od „Arial” do „sans-serif”), a jeśli używasz czcionek Google do ładowania Raleway, używałbyś trasy pojedynczej rodziny czcionek.
Podajmy kilka powodów, dla których jest to poprawna metoda.
Zmniejsza złożoność CSS i ostatecznie rozmiar pliku
Posiadanie jednej rodziny czcionek oznacza, że możesz zdefiniować cały element zawierający rodzinę czcionek i tylko niektóre elementy o różnej gramaturze / stylu. Weźmy na przykład:
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>
Zauważ, jak miły i pocieszający jest ten CSS. Nie musieliśmy określać „RalewayBold” jako rodziny czcionek dla .bold ani „RalewayItalic” dla naszego .italic. W rzeczywistości nie musimy nawet określać odważnego i kursywnego wariantu, ponieważ nasze klasy po prostu będą działać. Ponadto, jeśli .bold znajduje się w naszym .footer, będzie pogrubiony Arial, a nie Raleway, ponieważ po prostu dziedziczy Arial z kontenera stopki.
Tak robi to przeglądarka.
Powyżej jest zasadniczo to, jak wewnętrzny arkusz stylów przeglądarki definiuje czcionki przy użyciu minimalnych stylów i nieodłącznej kaskadowej natury CSS.
Jest to sposób, w jaki robi to przemysł.
Największe usługi internetowe, aplikacje i wydawcy robią to w ten sposób. Google, Facebook, NYT, ESPN itp. Wszystkie definiują i używają czcionek w ten sposób.
Nie tylko to, ale interfejsy użytkownika przed CSS lub nawet w Internecie określają pojedyncze rodziny czcionek i wybierają warianty w oparciu o inną specyfikację wagi i stylu. Załaduj Microsoft Word, KeyNote, Dokumenty Google, a nawet stary WordPerfect z końca lat 90. i otwórz listę rozwijaną czcionek; Zobaczysz nazwę rodziny czcionek „Arial”; nie „Arial”, po których następuje „Arial Bold”, po których następuje „Arial Italic” itp.
Wystarczy załadować z czcionek Google.
Jeśli załadujesz Raleway z bezpłatnego repozytorium webfonts na Google Fonts, zobaczysz, że Raleway jest zdefiniowany z jedną nazwą rodziny:
https://fonts.googleapis.com/css?family=Raleway:400,400italic 500,00 500italic 700,0000italic
@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');
}
