Festlegen von Schriftgewicht und fetter Schriftfamilie in CSS, was ist richtiger?

Nehmen wir an, wir haben eine Bold-Schriftvariante wie folgt geladen:

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

Ich würde dafür plädieren, sowohl font-familyals auch font-weightin Ihrer Stilspezifikation zu verwenden. Zum Beispiel:

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

Beide machen im Grunde dasselbe: Sagen Sie Ihrer Überschrift1, dass sie fett sein soll. Dies verdoppelt nicht die Kühnheit oder so, es wiederholt nur, dass es mutig sein muss.

Der Grund dafür ist ziemlich einfach: Wenn Ihre Schriftdatei nicht geladen ist (Serverüberlastung, Client-Einschränkungen, Voodoo), dann sieht Ihr Besucher immer noch eine fette Schrift (in diesem Fall eine faux fette Helvetica) und kann so zwischen einem Titel unterscheiden und den Haupttext, was nicht der Fall wäre, wenn Sie nur die font-family.

Sehen Sie in diesem Bild, dass das obere Set Raleway und Raleway Italic ist, aber das richtige Raleway Italic geladen ist mit:

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

Der Boden lädt nur Raleway. Als Ergebnis hat der untere Satz Raleway und FAUX Raleway kursiv. Beachten Sie die Unterschiede in Kleinbuchstaben "a" und "k", zum Beispiel zwischen echter Kursivschrift und faux Kursivschrift. Eine gut gestaltete Schriftart weist Unterschiede zwischen Normalschrift, Fettschrift und Kursivschrift auf, die Sie nicht erhalten, wenn Sie sie nicht laden.

Während beide Wege Ihnen die richtige Ausgabe liefern, wäre der richtigere Weg, eine einzige Schriftfamilie zu verwenden, um alle verschiedenen Varianten von Strichstärken und Stilen zu gruppieren. Es ist die gleiche Art und Weise, wie Sie Systemschriftarten verwenden (von „Arial“ bis hin zu „Sans-Serif“), und wenn Sie Google-Schriftarten verwenden, um Raleway zu laden, würden Sie tatsächlich die Route mit einer einzigen Schriftfamilie verwenden.

Lassen Sie uns einige Gründe skizzieren, warum dies die richtige Methode ist.

Es reduziert die CSS-Komplexität und letztendlich die Dateigröße

Eine einzelne Schriftfamilie zu haben bedeutet, dass Sie ein ganzes umgebendes Element mit der Schriftfamilie definieren können und nur bestimmte Elemente mit unterschiedlichen Gewichten/Stilen. Nehmen Sie zum Beispiel Folgendes:

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>

Beachten Sie, wie schön und übersichtlich dieses CSS ist. Wir mussten weder „RalewayBold“ als Schriftfamilie für .bold noch „RalewayItalic“ für unsere .italic angeben. Tatsächlich müssen wir nicht einmal eine fette und kursive Variante angeben, da unsere Klassen einfach funktionieren. Wenn sich .bold in unserer .footer-Datei befindet, ist es außerdem fett Arial und nicht Raleway, weil es einfach Arial aus dem Footer-Container erbt.

So macht es der Browser.

Das obige ist im Wesentlichen, wie das browserinterne Stylesheet Schriftarten definiert, indem minimale Stile und die inhärente kaskadierende Natur von CSS verwendet werden.

Es ist die Art und Weise, wie die Industrie es tut und getan hat.

Die größten Web-Properties, -Anwendungen und -Publisher tun dies alle auf diese Weise. Google, Facebook, NYT, ESPN usw. definieren und verwenden Schriftarten auf diese Weise.

Darüber hinaus spezifizieren Benutzerschnittstellen vor dem CSS oder sogar dem Internet einzelne Schriftfamilien und wählen Varianten basierend auf unterschiedlichen Spezifikationen von Gewicht und Stil. Laden Sie Microsoft Word, KeyNote, Google Docs, sogar ein altes WordPerfect aus den späten 1990er Jahren, und öffnen Sie das Dropdown-Menü für Schriftarten. Sie sehen den Namen der Schriftfamilie „Arial“ aufgelistet; nicht "Arial" gefolgt von "Arial Bold" gefolgt von "Arial Italic" usw.

Laden Sie einfach von Google Fonts.

Wenn Sie Raleway aus dem kostenlosen Webfonts-Repository auf Google Fonts laden, sehen Sie, dass Raleway mit einem einzigen Familiennamen definiert ist:

https://fonts.googleapis.com/css?family=Raleway:400.400kursiv,500.500kursiv,700.700kursiv

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

Hier ist die Sache: Wenn Sie die Frage nach Raleway stellen, einem für CSS programmierten Webfont, funktionieren beide Wege gleich gut. Verwenden Sie in diesem Fall font-weight, da dies die "richtige" Vorgehensweise ist, die ohne größere Änderungen im Code am einfachsten zu ändern und zu kontrollieren ist.

Jetzt fangen Sie an, Probleme zu haben, wenn Sie eine Schriftart selbst einbetten, eine Schriftart, die nicht unbedingt für CSS vorgesehen ist, und die Gewichte stimmen möglicherweise nicht mit den Zahlen überein.

Aus diesem Grund besteht ein sehr häufiger Fehler bei eingebetteten Schriftarten, der bei nicht englischen Schriftarten sehr häufig vorkommt, darin, dass CSS die Schriftart automatisch "fetter" oder "aufhellt" und das Ergebnis sehr schlecht ist.

Daher empfehle ich, wenn Sie einen Webfont wie die Schriftarten von Google Fonts verwenden, die Zahlen für die Schriftstärke zu verwenden. Wenn Sie jedoch eine Schriftart selbst einbetten, bleiben Sie auf der sicheren Seite und verwenden Sie die Schriftfamilie für jede einzelne Stärke separat .