web-dev-qa-db-fra.com

Spécification du style et du poids pour les polices Google

J'utilise des polices Google dans certaines de mes pages et je me heurte à un mur lorsque j'essaie d'utiliser des variantes d'une police. Exemple: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

J'importe trois faces, Normal, Gras, ExtraBold via la balise link. Le visage normal s'affiche correctement, mais je n'arrive pas à comprendre comment utiliser les variantes de la police dans mon CSS

J'ai essayé tous les éléments suivants en tant qu'attributs pour font-family, mais pas de dés:

  • 'Open Sans Bold'
  • 'Open Sans 700'
  • 'Open Sans Bold 700'
  • 'Open Sans: Bold'

Les documents Google eux-mêmes n'offrent pas beaucoup d'aide. Tout le monde a une idée de la façon dont je devrais écrire mes règles CSS pour afficher ces variantes?

cssfonts
100
Steven Garcia

Ils utilisent des CSS régulières.

Utilisez simplement votre famille de polices habituelle comme ceci:

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

Maintenant, vous décidez du "poids" de la police en ajoutant

pour semi-gras

font-weight:600;

pour gras (700)

font-weight:bold;

pour extra gras (800)

font-weight:800;

Ainsi, si la police Google "échoue", la police de sauvegarde Arial/Helvetica (Sans-serif) utilise le même poids que la police Google.

Assez intelligent :-)

Notez que les différents poids de police doivent être spécifiquement importés via la balise de lien url (paramètre de requête de la famille de l'URL de police Google) dans l'en-tête.

Par exemple, le lien suivant inclura les poids 400 et 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
135
Marco Johannesen

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

Pour la lumière: font-weight : 100; Ou font-weight : lighter;

Pour normal: font-weight : 500; Ou font-weight : normal;

Pour en gras: font-weight : 700; Ou font-weight : bold;

Pour plus d'audace: font-weight : 900; Ou font-weight : bolder;

8
user6097020

vous pouvez utiliser la valeur de poids spécifiée dans les polices Google.

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

Voici le problème: vous ne pouvez pas spécifier des poids de police qui n'existent pas dans le jeu de polices de Google. Cliquez sur le lien VOIR UN ÉCHANTILLON sous la police, puis faites défiler jusqu'à la section STYLES. Là, vous verrez chacun des "styles" disponibles pour cette police particulière. Malheureusement, Google ne répertorie pas les poids de police CSS pour chaque style. Voici comment les noms sont mappés sur les nombres de poids de police CSS:

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

Notez que très peu de polices ont les 9 graisses.

1
NetFool