Festlegen von Stil und Gewicht für Google-Schriftarten

110

Ich verwende Google-Schriftarten auf einigen meiner Seiten und stoße an eine Wand, wenn ich versuche, Variationen einer Schriftart zu verwenden. Beispiel: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

Ich importiere drei Gesichter, Normal, Fett, ExtraBold über das Link-Tag. Das normale Gesicht wird korrekt angezeigt, aber ich kann nicht herausfinden, wie die Varianten der Schriftart in meinem CSS verwendet werden

Ich habe alle folgenden Attribute als Attribute für die Schriftfamilie ausprobiert, aber keine Würfel:

  • "Open Sans Bold"
  • "Open Sans 700"
  • "Open Sans Bold 700"
  • "Open Sans: Bold"

Die Google-Dokumente selbst bieten nicht viel Hilfe. Hat jemand eine Idee, wie ich meine CSS-Regeln schreiben soll, um diese Varianten anzuzeigen?

css fonts Steven Garcia
quelle

Antworten:

149

Sie verwenden reguläres CSS.

Verwenden Sie einfach Ihre normale Schriftfamilie wie folgt:

font-family: 'Open Sans', sans-serif;

Jetzt entscheiden Sie, welches "Gewicht" die Schrift haben soll, indem Sie hinzufügen

für halb fett

font-weight:600;

für fett (700)

font-weight:bold;

für extra fett (800)

font-weight:800;

Dies ist ein Fallback-Beweis. Wenn also die Google-Schriftart "fehlschlagen" sollte, verwenden Sie Ihre Backup-Schriftart Arial / Helvetica (Sans-Serif) mit der gleichen Gewichtung wie die Google-Schriftart.

Ziemlich klug :-)

Beachten Sie, dass die verschiedenen Schriftstärken speziell über die Link-Tag-URL (Familienabfrageparameter der Google-Schriftart-URL) in der Kopfzeile importiert werden müssen.

Zum Beispiel enthält der folgende Link beide Gewichte 400 und 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
Marco Johannesen
quelle
56
Dies ist eine teilweise Wahrheit und liegt daran, dass Sie, wenn Sie das Gewicht des Links CSS nicht einschätzen, nicht das richtige "Fett" -Format herunterladen, um dies zu erreichen, den "Link href" wie folgt deklarieren müssen: <link href = ' fonts.googleapis .com / css? family = Comfortaa: 400.700 'rel =' stylesheet 'type =' text / css '>
ncubica
3
Gibt es eine Möglichkeit, den Browser dazu zu bringen, Gewicht 600 für alte meine alten Regeln von "fett" zu verwenden? Ich denke, der 700 ist zu dick und möchte ihn nirgendwo auf meiner Website haben.
Nic Cottrell
Was meinst du? Ich denke, Sie sollten einfach die Fettschrift in 600 ändern. Meinen Sie damit, das "kühne" Verhalten auf <strong>und zu ändern <b>?
Marco Johannesen
2
Ich verwende die URL @import ( fonts.googleapis.com/css?family=Open+Sans:400,300 ). da ich nicht auf das HTML zugreifen kann und wenn ich versuche, die folgende ... Schriftfamilie zu verwenden: 'Open Sans', serifenlos; Schriftgröße: 300; Die Schriftgröße wird nicht geändert. Ideen?
Tony Ray Tansley
@ TonyRayTansley Haben Sie es in der ersten Zeile der CSS-Datei? : I
Marco Johannesen
11

Hier ist das Problem: Sie können keine Schriftstärken angeben, die in der von Google festgelegten Schriftart nicht vorhanden sind. Klicken Sie auf den Link SEE SPECIMEN unter der Schriftart und scrollen Sie nach unten zum Abschnitt STYLES. Dort sehen Sie jeden der "Stile", die für diese bestimmte Schriftart verfügbar sind. Leider listet Google die CSS-Schriftstärken nicht für jeden Stil auf. So werden die Namen CSS-Schriftgrößen zugeordnet:

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900

Beachten Sie, dass nur sehr wenige Schriftarten in allen 9 Strichstärken verfügbar sind.

NetFool
quelle
9

font-family:'Open Sans' , sans-serif;

Für Licht: font-weight : 100; Or. En font-weight : lighter;

Für normal: font-weight : 500; Or. En font-weight : normal;

Für fett: font-weight : 700; Oder font-weight : bold;

Für mehr Mut: font-weight : 900; Or. En font-weight : bolder;

Pramesh Bajracharya
quelle
Toll. Aber kann die Schrift leichter sein als die Schriftgröße: 100?
John Max
3
Nein, der minimale Wert ist nur 100 und der maximale Wert ist 900.
2
Dies ist nicht korrekt, die folgenden Werte sind zu berücksichtigen: light: font-weight: 300; normal: font-weight: 400; semi-bold: font-weight: 600; bold: font-weight: 700; extra bold: font-weight: 800;
Geraldo
2

Sie können den in den Google-Schriftarten angegebenen Gewichtswert verwenden.

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}
Ritam Das
quelle