Spécification du style et de l'épaisseur des polices Google

110

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

J'importe trois visages, Normal, Gras, ExtraBold via la balise de lien. Le visage normal s'affiche correctement, mais je ne peux pas comprendre comment utiliser les variantes de la police dans mon CSS

J'ai essayé tous les éléments suivants comme attributs pour la famille de polices mais pas de dés:

'Ouvrir sans gras'
'Open Sans 700'
'Open Sans Bold 700'
'Open Sans: Gras'

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

css fonts

— Steven Garcia
source

149

Ils utilisent du CSS ordinaire.

Utilisez simplement votre famille de polices habituelle comme ceci:

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

Vous décidez maintenant 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;

Comme ceci, sa preuve de repli, donc si la police google doit "échouer", votre 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 l'url de la balise de lien (paramètre de requête de 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'>

— Marco Johannesen
source

56

c'est une vérité partielle, et c'est parce que si vous n'évaluez pas le poids sur le lien css google ne téléchargera pas le format "gras" approprié pour y parvenir, vous devez déclarer le "lien href" comme suit: <link href = ' fonts.googleapis .com / css? family = Comfortaa: 400,700 'rel =' stylesheet 'type =' text / css '>

— ncubica

3

Existe-t-il un moyen de faire en sorte que le navigateur utilise le poids 600 pour mes anciennes règles de "gras"? Je pense que le 700 est trop épais et je ne le veux nulle part sur mon site.

— Nic Cottrell

Que voulez-vous dire? Je suppose que vous devriez simplement changer le gras en 600 ?. Voulez-vous dire changer le comportement «audacieux» sur <strong>et <b>?

— Marco Johannesen

2

J'utilise @import url ( fonts.googleapis.com/css?family=Open+Sans:400,300 ); car je ne peux pas accéder au html, et quand j'essaye d'utiliser la suivante ... font-family: 'Open Sans', sans-serif; poids de la police: 300; cela ne change pas le poids de la police. des idées?

— Tony Ray Tansley

@TonyRayTansley l'avez-vous sur la première ligne du fichier CSS? : I

— Marco Johannesen

12

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 LE SPECIMEN 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 des polices CSS pour chaque style. Voici comment les noms correspondent aux 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 sont disponibles dans les 9 poids.

— NetFool
source

9

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 gras: font-weight : 700; ou font-weight : bold;

Pour plus audacieux: font-weight : 900; Ou font-weight : bolder;

— Pramesh Bajracharya
source

Génial. Mais la police peut-elle être plus légère que le poids de la police: 100?

— John Max

3

Non, la valeur minimale est 100 uniquement et la valeur maximale est 900.

2

Ce n'est pas correct, les valeurs suivantes sont à prendre en compte: light: font-weight: 300; normal: font-weight: 400; semi-bold: font-weight: 600; bold: font-weight: 700; extra bold: font-weight: 800;

— geraldo

2

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

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

— Ritam Das
source