Festlegen der Schriftgröße im Vergleich zur fetten Schriftfamilie in CSS, was ist korrekter?

9

Grundsätzlich gibt es zwei Möglichkeiten, eine Schrift in CSS fett zu machen: über das font-familyAttribut und über das font-weightAttribut.

Angenommen, ich verwende zum Beispiel die Schriftart Raleway und habe eine Light-, eine Regular-, eine Semibold- und eine Bold-Variante über CSS geladen. Ich könnte eine einfache Überschrift fett machen, indem ich sie auf h1{font-family: 'Raleway Bold'}oder auf setze h1{font-weight: 700}.

Welche davon ist korrekter oder sind beide gleich?

css web-fonts html pooja
quelle
Ich habe Zweifel, dass entweder das Schreiben von "Schriftgröße" in CSS korrekt ist, wenn Sie alle Optionen in der Schriftfamilie haben. Beispiel: Die Raleway-Schriftart bietet alle Optionen von hell bis besonders fett. Welcher Weg ist also angemessen, um alle Schriftarten aus der Familie zu verwenden, damit wir das Schriftzeichen nicht verlieren können?
Pooja
1
sehr verwandte Fragen und Antworten .
Cai
@poojaa, ich habe mir erlaubt, Ihre Frage zu bearbeiten, um die Formatierung klarer zu gestalten und die eigentliche Frage stärker in den Vordergrund zu rücken. Wenn Sie das Gefühl haben, ich hätte die Bedeutung geändert, können Sie sie immer selbst bearbeiten .
PieBie

Antworten:

6

Angenommen, wir haben eine fett gedruckte 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 mich dafür aussprechen, beides font-familyund font-weightIhre Stilspezifikation zu verwenden. Zum Beispiel:

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

Beide machen im Grunde das Gleiche: Sagen Sie Ihrer Überschrift1, dass sie fett sein soll. Dies wird die Kühnheit oder irgendetwas nicht verdoppeln, es wiederholt nur, dass es mutig sein muss.

Der Grund dafür ist ziemlich einfach: Wenn Ihre Schriftartdatei nicht geladen ist (Serverüberlastung, Client-Einschränkungen, Voodoo), sieht Ihr Besucher immer noch eine fette Schrift (in diesem Fall eine faux fette Helvetica) und kann somit zwischen einem Titel unterscheiden und der Textkörper, der nicht der Fall wäre, wenn Sie nur den angegeben hätten font-family.

In diesem Bild sehen Sie als oberstes Set Raleway und Raleway Italic, aber es wird das richtige Raleway Italic geladen mit:

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

Der Boden lädt nur Raleway. Infolgedessen ist im unteren Satz Raleway und FAUX Raleway kursiv dargestellt. Beachten Sie die Unterschiede in Kleinbuchstaben "a" und "k" zum Beispiel zwischen echt kursiv und faux kursiv. Eine gut gestaltete Schriftart weist Unterschiede zwischen Normalen, Fettdrucken und Kursivschrift auf, die Sie nicht erhalten, wenn Sie sie nicht laden.

Geben Sie hier die Bildbeschreibung ein

PieBie
quelle
Wenn Sie einen Familiennamen verwenden und nur Gewichte festlegen, erhalten Sie immer noch das richtige Gewicht, wenn Schriftdateien nicht geladen werden. Der einzige Grund, beide zu verwenden, wäre aus Kompatibilitätsgründen.
Cai
1
Du bist verwirrt. Ihr Google-Schriftbeispiel bezieht sich nicht nur auf die Raleway-Kursivschrift als gerecht font-family: 'Raleway'(im Widerspruch zu Ihrem fettgedruckten Beispiel oben), sondern unabhängig davon, ob Sie die gesamte Familie Ralewayoder jede Variante einzeln mit unterschiedlichen Schriftfamiliennamen benennen, hat dies absolut keinen Einfluss auf die Anwendung von Faux oder nicht . Auch Ihr eigenes Beispiel beweist dies eine falsche Methode ist, als zur Verfügung gestellt font-family: 'Raleway Bold', Helvetica, Arial, sans;hat Helvetica Boldund Arial Boldindividuell , weil das ist nur der falsche Weg , um Kaskade Font - Varianten.
Drei
1

Während beide Methoden die richtige Ausgabe liefern, besteht die korrektere Methode darin, eine einzige Schriftfamilie zu verwenden, um alle verschiedenen Varianten von Gewichten und Stilen zu gruppieren. Auf die gleiche Weise verwenden Sie Systemschriftarten (von "Arial" bis "serifenlos"). Wenn Sie zum Laden von Raleway Google-Schriftarten verwenden, verwenden Sie die Route der einzelnen Schriftfamilien.

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

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

Mit einer einzigen Schriftfamilie können Sie ein ganzes Element mit der Schriftfamilie und nur bestimmte Elemente mit unterschiedlicher Gewichtung / Stil definieren. 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 nett und konsequent 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 befindet, ist es fett und nicht Raleway, da es Arial einfach vom Fußzeilencontainer erbt.

So macht es der Browser.

Im Folgenden wird im Wesentlichen beschrieben, wie das interne Stylesheet des Browsers Schriftarten definiert, indem minimale Stile und die inhärente Kaskadierung von CSS verwendet werden.

So macht es die Branche und hat es getan.

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

Darüber hinaus geben Benutzeroberflächen vor dem CSS oder sogar dem Internet einzelne Schriftfamilien an und wählen Varianten basierend auf unterschiedlichen Gewichts- und Stilspezifikationen aus. Laden Sie Microsoft Word, KeyNote, Google Text & Tabellen und sogar WordPerfect aus den späten 1990er Jahren und öffnen Sie das Dropdown-Menü für Schriftarten. Der Name der Schriftfamilie "Arial" wird 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 in Google Fonts laden, wird Raleway mit einem einzigen Familiennamen definiert:

https://fonts.googleapis.com/css?family=Raleway:400,400italic500,500italic700,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');
}
drei
quelle
Ignoriert diese Methode nicht Variationen zwischen Schriftstilen für Faux-Stile?
Ryan
@ Ryan überhaupt nicht. Tatsächlich hat der Name der Schriftfamilie (entweder die Familie wie Ralewaybei Gewichts- / Stilvarianten richtig zu bündeln oder einzelne Varianten falsch zu definieren Raleway Boldund Raleway Italicals einzelne Schriftfamilien) keinen Einfluss auf die Anwendung von Faux-Variationen oder nicht. In der Tat, die Familie unter dem gleichen Namen richtig zu bündeln hilft der Browser eine engere Variation wählen Sie einen faux Stil anzuwenden , während falsch jede Variation separat hält den Browser in der Dunkelheit der verfügbaren Schriftart Namensvariationen gelten , wenn die gewünschte Schriftart nicht geladen ist.
Drei
(1) Laden Sie einfach von Google-Schriftarten : Für Websites sicher, aber es gibt viele andere Fälle, in denen HTML / CSS verwendet wird, in denen eine Internetverbindung nicht garantiert ist und Sie die Schriftarten lokal laden müssen. (2) Dies reduziert die CSS-Komplexität Eine Dateigröße : Wenn Sie also auf einer Website oder App mit Dutzenden von MB 1 KB rasieren, wird der Client erstaunt sein, wie schnell Ihre App geladen wird. (3) So macht es der Browser / die Branche : Browser Standardmäßig ist Faux, und trotzdem ist die 'Branche' nicht immer korrekt und folgt auch nicht den Best Practices (siehe Flexbox)
PieBie
Browser standardmäßig faux Was? Sie wissen eindeutig nicht, wovon Sie sprechen. Denken Sie, wenn Sie angeben font-family:Arial; font-weight:bold;(was wiederum der richtige Weg ist, unabhängig davon, ob es sich um Arial oder Raleway handelt), dass der Browser eine künstliche Fettschrift auf eine normale Arial-Schriftart anwendet? Falsch. Der Browser lädt die ArialBold-Schriftart wie vom System definiert. Nur wenn keine genaue Schriftart verfügbar ist, wird ein Faux-Stil auf die am besten passende Schriftart basierend auf dem Namen der Schriftfamilie angewendet. Deshalb müssen sie identisch sein! Ich kann nicht sagen "Tu das für Arial, aber nicht für Raleway."
Drei
0

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

Jetzt treten Probleme auf, wenn Sie eine Schriftart selbst einbetten. Diese Schriftart ist nicht unbedingt für CSS geplant und die Gewichte stimmen möglicherweise nicht mit den Zahlen überein.

Aus diesem Grund ist ein sehr häufiger Fehler bei eingebetteten Schriftarten, der bei nicht englischen Schriftarten sehr häufig auftritt, dass CSS die Schrift automatisch "boldens" oder "aufhellt" und das Ergebnis sehr schlecht ist.

Daher empfehle ich, dass Sie, wenn Sie eine Webfont wie die Schriftarten in Google-Schriftarten verwenden, die Zahlen für die Schriftgröße verwenden. Wenn Sie jedoch eine Schrift selbst einbetten, bleiben Sie auf der sicheren Seite und verwenden Sie die Schriftfamilie für jede einzelne Gewichtung separat .

Naty
quelle