Ustawienie grubości czcionki a pogrubionej rodziny czcionek w CSS, co jest bardziej poprawne?

Istnieją zasadniczo dwa sposoby pogrubienia czcionki w CSS: za pomocą font-familyatrybutu i za pomocą font-weightatrybutu.

Powiedzmy, że używam na przykład czcionki Raleway i załadowałem wariant Light, Regular, Semibold i Bold przez css. Mógłbym pogrubić prosty nagłówek, ustawiając go na h1{font-family: 'Raleway Bold'}lub do h1{font-weight: 700}.

Które z nich jest bardziej poprawne, czy oba są takie same?

Załóżmy, że załadowaliśmy wariant czcionki pogrubionej, taki jak:

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

Argumentowałbym za zastosowaniem obu tych parametrów font-familyoraz font-weightw specyfikacji Twojego stylu. Na przykład:

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

Oba zasadniczo robią to samo: powiedz nagłówkowi 1, aby był pogrubiony. Nie podwoi to śmiałości ani nic, po prostu powtarza, że ​​musi być odważny.

Powód tego jest dość prosty: jeśli plik czcionek nie jest załadowany (przeciążenie serwera, ograniczenia klienta, voodoo), wtedy odwiedzający nadal zobaczy pogrubioną czcionkę (w tym przypadku fałszywą pogrubioną czcionkę Helvetica), a tym samym może rozróżnić tytuł i treść, co nie byłoby prawdą, gdybyś tylko podał font-family.

Zobacz na tym obrazie, że najwyższy zestaw to Raleway i Raleway Italic, ale ma odpowiednią Raleway Italic ładowaną z:

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

Dno tylko ładuje Raleway. W rezultacie dolny zestaw ma kursywę Raleway i FAUX Raleway. Zwróć uwagę na różnice małymi literami „a” i „k”, na przykład między prawdziwą kursywą a faux kursywą. Dobrze zaprojektowana czcionka będzie miała różnice między czcionkami regularnymi, pogrubionymi i kursywą, których nie dostaniesz, jeśli ich nie załadujesz.

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

Chodzi o to, że jeśli zadajesz pytanie o Raleway, webfont zaprogramowany dla css, oba sposobyj działają równie dobrze. W takim przypadku należy użyć grubości czcionki, ponieważ jest to „poprawny” sposób działania, który najłatwiej będzie zmienić i kontrolować bez większych zmian w kodzie.

Teraz zaczynasz mieć problemy po samodzielnym osadzeniu czcionki, która niekoniecznie jest planowana dla css, a jej wagi mogą nie pasować do liczb.

Z tego powodu bardzo częstym błędem osadzonych czcionek, niezwykle powszechnym w czcionkach nieanglojęzycznych, jest to, że css automatycznie „pogrubia” lub „rozjaśnia” czcionkę automatycznie, a wynik jest bardzo zły.

Dlatego polecam, jeśli używasz strony internetowej takiej jak czcionki w czcionkach Google, śmiało i używaj liczb na grubości czcionki, ale kiedy osadzasz czcionkę samodzielnie, pozostań po bezpiecznej stronie i używaj rodziny czcionek dla każdej pojedynczej wagi osobno .