Ist das Ändern einer „normalen“ Schriftart mit Schriftgröße in CSS tatsächlich fett? (dh eine andere Schriftartdatei)

Ich bin ein Webentwickler und arbeite an einem Projekt, das Quicksand Light / Regular / Bold als Schriftart verwendet. Die Standardschriftart der Webanwendung ist Treibsand (normal), aber es gibt auch Text, der heller und mutiger ist.

Als Webentwickler würde ich normalerweise einen einfachen CSS-Stil wie folgt anwenden:

font-weight: bold; // or 400, 600, 800

Ist dies ein gültiger Trick, um zu vermeiden, dass die Schriftart auf jedes einzelne Element gesetzt wird, das nicht "normal" ist? Wenn nicht, gibt es Schriftarten, die so funktionieren? (dh ändern Sie sie über CSS, um eine andere Schriftart zu erhalten)

Web-Schriftarten

Es gibt zwei Möglichkeiten, wie Sie Web-Schriftarten definieren können @font-face. Die erste und wahrscheinlich häufigste (ich glaube, die meisten Generatoren, beispielsweise Font Squirrel , geben dies aus) besteht darin, jede Schriftartdatei (dh jedes Gewicht und jeden Stil) mit einem eigenen eindeutigen Familiennamen zu definieren.

@font-face {
    font-family: 'YourFont';
    src: url('your_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFontBold';
    src: url('your_font_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFontItalic';
    src: url('your_font_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Beachten Sie, dass das font-weightund font-styleauf jedem auf normal gesetzt ist und jeder einen eindeutigen font-familyNamen hat. Dies bedeutet, dass jedes Mal , wenn Sie einen font-weightoder font-styleeinen anderen Wert als normal festlegen , vom Browser implementierte "Faux" -Stile angezeigt werden, nicht die Stile aus der richtigen Schriftartdatei. Dies kann auch zu "doppelt" fett oder kursiv führen, wenn Sie die Standard-Browser-CSS-Stile nicht auf "normal" zurücksetzen. Zum Beispiel:

strong {
    font-family: 'YourFontBold';
    }

Ohne das Zurücksetzen font-weightauf "Normal" wird dies mutiger als es sollte, da der Browser die fett gedruckte Schriftdatei lädt und einen eigenen gefälschten fett gedruckten Stil hinzufügt, da der Standardstil für strongist font-weight: bold;.

Ein besserer Weg:

@font-face {
    font-family: 'YourFont';
    src: url('your_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFont';
    src: url('your_font_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'YourFont';
    src: url('your_font_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

Beachten Sie die Definition der Schriftdatei font-weightund font-styleentsprechen Sie ihr korrekt. Alle verwenden denselben font-familyNamen. Deklarieren Sie Ihre Schriften auf diese Weise Mittel können Sie verwenden , font-weightund font-stylegenau in überall in Ihrem CSS wie man erwarten würde , und Sie werden die richtige Schriftart, ohne „faux“ Stile erhalten.

Nur die Schlüsselwörter "fett" und "kursiv" werden wahrscheinlich von allen Browsern verstanden, daher sollten Sie stattdessen die spezifische Schriftgewichtsnummer verwenden. Beachten Sie auch, dass Browser Schriftgrößen normalerweise nicht gut runden. Geben Sie daher die gewünschte Gewichtung genau an und stellen Sie sicher, dass sie in Ihren @font-faceDeklarations- und CSS-Stilen übereinstimmen .

Das Problem bei dieser Methode ist, dass Internet Explorer 8 oder niedriger nicht mehrere Stile und Gewichte erkennt, die denselben font-familyNamen verwenden. Ich glaube, dies hat auch Probleme in älteren Versionen von iOS verursacht

Google Fonts umgeht dies, indem es IE 8 oder niedriger nur mit der regulären Schriftart bedingt bedient und IE die anderen Stile "fälschen" lässt. Nicht ideal.

In diesem Artikel auf smashingmagazine.com wird vorgeschlagen, die Stile für Internet Explorer bedingt separat hinzuzufügen, um das Problem mehrerer Gewichte und Stile zu umgehen:

<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->

Wenn Sie also font-weightund font-stylein Ihrem CSS verwenden möchten, ohne sich um den tatsächlichen Schriftnamen kümmern zu müssen, verlassen Sie sich nicht auf Web-Schriftgeneratoren und richten Sie die @font-faceDeklaration selbst korrekt ein. Beachten Sie, dass dies in älteren Browsern zu Problemen führen kann.

Desktop-Schriftarten

Wenn Sie Schriftarten deklarieren, die nicht mit eingebettet sind, @font-facewerden nur Schriftarten verwendet, die auf dem Computer des Benutzers installiert sind. Dies sollte jeden respektieren font-weightund font-styleStile und die richtigen Schriftarten laden (alle meine Tests in Chrome und Firefox auf O X wie erwartet), aber dies kann , hängt von Browser und Betriebssystem, und hängt von der Benennung der Schriftart in den Schriftdateien selbst - Dinge, über die Sie keine wirkliche Kontrolle haben.