2016-10-24 4 views
1

Ich möchte eine Google Schriftart mit verschiedenen Typen (Light, Black, Semi-bold) verwenden.Wie werden verschiedene Arten von Google-Schriftarten verwendet?

Dies ist der Link für die Google Font: https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900

Die regelmäßige funktioniert gut, font-family: 'Exo 2'; Aber ich frage mich, wie ich das Licht, schwarze verwenden können. Ich habe Exo 2 Black/Light ausprobiert, aber das schien nicht zu funktionieren.

Ich habe auch die Dokumentation gelesen, aber das hatte auch nicht die Antwort.

+1

gibt es kein Licht und schwarze Schrift. Alles, was Sie tun können, ist das Schriftgewicht –

Antwort

4

Sie müssen zuerst die Schrift in den Kopf des Dokuments laden und dann die Schrift in Verbindung mit der rechten font-weight in Ihrem CSS verwenden.

PS: Sie haben einen kleinen Tippfehler in Ihrer Schriftart-URL.

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Website</title> 
    <link href="https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900" rel="stylesheet"> 
    <link href="path/to/styles.css" rel="stylesheet"> 
</head> 
<body> 
    … 
</body> 
</html> 

styles.css

.light { 
    font-family: 'Exo 2'; 
    font-weight: 300; 
} 

.normal { 
    font-family: 'Exo 2'; 
    font-weight: 400; 
} 

.semi-bold { 
    font-family: 'Exo 2'; 
    font-weight: 600; 
} 

.black { 
    font-family: 'Exo 2'; 
    font-weight: 900; 
} 
1

Sie müssen die font-weight-Eigenschaft in Ihrem CSS mit der korrekten numerischen Darstellung der Schriftgewichte verwenden.

In Ihrem Fall können Sie in der URL sehen die unterschiedlichen Gewichte zur Verfügung: https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900

Die 300400600900 entsprechen Schriftschnitte.

  • 300 - Licht
  • 400 - Regelmäßige (also keine Notwendigkeit, es zu erklären)
  • 600 - Bold
  • 900 - Schwarz

in Ihrem Fall wäre leicht und font-weight: 900 wäre schwarz.

Verwandte Themen