web-dev-qa-db-fra.com

Comment utiliser Roboto Light / Thin à partir des polices Google dans Chrome

J'ai du mal à utiliser les polices Roboto dans le navigateur Chrome. En particulier, je n'arrive pas à obtenir les poids de police Condensed et Thin/Light, etc. Je télécharge les 3 polices complètes:

@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);

puis je les utilise dans des déclarations comme:

Roboto condensé

.mas-1st-col {
font-family: Roboto !important;
font-size: 8pt; !important
font-weight: 200 !important;
font-stretch: condensed !important;
}

Roboto Light

span.f, div.f.kv + div.f.slp {
font-family: Roboto !important;
font-size: 8pt !important;
font-weight: 200 !important;
}

Cependant, ce que cela me donne est tout simplement Roboto. Si je change celui "Condensed" pour utiliser la famille de polices "Roboto Condensed" ça marche ... et cela a du sens car apparemment chrome est en retard pour adopter font-stretch. Cependant, changer la famille de polices en "roboto condensed" ne le fait pas utilisez le plus léger font-weight (qui est 300), il reste à 400. Même si je change le font-weight à 300, ce qu'il a spécifiquement, il restera à 400 (la commutation dans la console entre 200, 300 et 400 n'a aucun effet). Je dois mettre "Roboto Condensed Light" spécifiquement, pour obtenir le poids de police léger.

Et les autres? "Roboto Thin" n'a pas été spécifiquement téléchargé ou défini dans un @font-face ... Je ne devrais pas avoir à utiliser des noms comme "roboto thin" quand je veux juste un poids de police, non?

Détails

En raison de la grande suggestion de Terry, voici le code pertinent dans son intégralité:

    function _miscCSS () {
        var css = function(){/*
@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);

 ...[css declarations follow]...

*/}.toString().slice(14,-3); 
        return css;
    }

    var misc_css = '<style>'+ _miscCSS() +'</style>';
    jQ(misc_css).appendTo('head');
cssgoogle-chromefonts
19
roberto tomás

Tout d'abord - évitez d'utiliser !important. Il existe un nombre très limité de scénarios lorsque cela est réellement nécessaire.

Roboto et Roboto Condensed sont fournis comme deux familles de polices distinctes par Google Fonts, donc si vous voulez utiliser la version condensée, vous devrez déclarer font-family: "Roboto Condensed" car la variante condensée n'est pas incluse dans la famille de polices Roboto.

Roboto Condensed a également une quantité plus limitée de poids de police disponibles: 300, 400 et 700 par rapport à Roboto 100, 300, 400, 700 et 900. Pour parler simplement, l'utilisation d'un poids de police de 100 et 900 ne fonctionnera pas avec Roboto Condensed, et repli sur le poids de police le plus proche possible.

Comment pouvez-vous confirmer que Roboto Condensed n'utilise pas le poids de police 300? Il semble bien fonctionner avec moi (je l'utilise également sur quelques sites) ... fonctionne également très bien dans ce violon: http://jsfiddle.net/8k72a/1/

Par conséquent, il n'est pas possible d'obtenir Roboto Condensed avec un poids de police de 100, par exemple.

Avec votre question mise à jour, pourquoi ne pas utiliser ce script à la place? Je constate que vous avez divisé vos styles CSS en plusieurs lignes. N'oubliez pas d'échapper aux sauts de ligne dans JS avec une barre oblique inversée \:

var css = '@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);\
           @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);\
           @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
17
Terry

Fichier CSS (par exemple) (MaterialiseCSS)

p {
  font-family:Roboto;
  font-weight: 200;
}
16
Nathalie Guimarães