Specifica dello stile e del peso per i caratteri di Google

Sto usando i caratteri di Google in alcune delle mie pagine e sbatto contro un muro quando provo a utilizzare le varianti di un carattere. Esempio: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

Sto importando tre facce, Normale, Grassetto, ExtraBold tramite il tag di collegamento. La faccia normale viene visualizzata correttamente, ma non riesco a capire come utilizzare le varianti del carattere nel mio CSS

Ho provato tutti i seguenti come attributi per font-family ma nessun dado:

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

Gli stessi documenti di Google non offrono molto aiuto. Qualcuno ha un'idea di come dovrei scrivere le mie regole CSS per visualizzare queste varianti?

Usano CSS regolari.

Usa la tua famiglia di caratteri normale in questo modo:

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

Ora decidi quale "peso" dovrebbe avere il carattere aggiungendo

per semi-grassetto

font-weight:600;

per grassetto (700)

font-weight:bold;

per extra grassetto (800)

font-weight:800;

In questo modo è a prova di fallback, quindi se il carattere di Google dovesse "fallire" il tuo carattere di backup Arial / Helvetica (Sans-serif) usa lo stesso peso del carattere di Google.

Piuttosto in gamba :-)

Si noti che i diversi pesi dei caratteri devono essere importati in modo specifico tramite l'URL del tag di collegamento (parametro della query di famiglia dell'URL del carattere di Google) nell'intestazione.

Ad esempio, il seguente collegamento includerà entrambi i pesi 400 e 700:

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

Ecco il problema: non puoi specificare i pesi dei caratteri che non esistono nel set di caratteri di Google. Fare clic sul collegamento VEDI CAMPIONE sotto il carattere, quindi scorrere verso il basso fino alla sezione STILI. Lì vedrai ciascuno degli "stili" disponibili per quel particolare carattere. Purtroppo Google non elenca i pesi dei caratteri CSS per ogni stile. Ecco come i nomi vengono mappati ai numeri di peso dei caratteri CSS:

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

Nota che pochissimi caratteri sono disponibili in tutti e 9 i pesi.

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

Per la luce: font-weight : 100; Or font-weight : lighter;

Per normale: font-weight : 500; Or font-weight : normal;

In grassetto: font-weight : 700; Or font-weight : bold;

Per più audaci: font-weight : 900; Or font-weight : bolder;

puoi utilizzare il valore di peso specificato in Google Fonts.

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