2017-03-23 1 views
2

Einige Importe sehen google Schrift wie folgt aus:Sind beim Importieren von Google Fonts Gewichte notwendig?

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,900); 

Sind die 400, 100, 900 Gewichte notwendig?

Oder könnte man nur führen den Import wie folgt aus:

@import url(http://fonts.googleapis.com/css?family=Roboto); 

und Stil das Element wie folgt aus:

element { 
    font-weight: 900; 
    font-family: Roboto; 

} 
+0

Warum versuchst du es nicht einfach ...? – LGSon

+0

nach requirment –

+0

wollte nur zur Kenntnis nehmen, dass ich jetzt postcss-font-magician in die https://www.npmjs.com/package/superfly-css-task-build Kette gebaut haben, und wenn alle Hilfsprogramme in https verwendet : //www.npmjs.com/package/superfly-css-utilities-fonts werden zur Entwurfszeit verfügbar. Wenn Sie die Aufgabe https://www.npmjs.com/package/superfly-css-task-deploy beendet haben, werden unnötige css und entsprechende @ font-face-Regeln entfernt. – Ole

Antwort

3

Ja, sie sind erforderlich, wenn Sie sie verwenden möchten .

Wenn Sie direkt auf die folgende URL (die Sie als Beispiel verwendet).

http://fonts.googleapis.com/css?family=Roboto 

Sie werden so etwas wie so sehen ...

/* latin */ 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 
} 

Allerdings, wenn Sie die Gewichte, um es hinzuzufügen, sehen Sie diese ...

[...] 

/* latin */ 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 
} 

/* latin */ 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 
} 

[...] 

Wenn Sie don‘ t Geben Sie die Gewichtungen am Ende der URL an, wenn Sie versuchen, die Schriftart zu verwenden und ein benutzerdefiniertes Gewicht festzulegen (irgendetwas anderes als 400), dann wird einfach auf das Standardgewicht zurückgegriffen und die Schriftart wird nicht geändert e.

Wenn Sie also nur das Gewicht von 400 verwenden möchten, dann lassen Sie sie, aber wenn Sie auch dünne und fette Versionen verwenden möchten, müssen Sie sie in die URL aufnehmen. Das Einbeziehen von Extra-Gewichten erhöht jedoch die Ladezeiten von Schriften. Sie sollten also nur angeben, was Sie verwenden möchten.

Verwandte Themen