Comment utiliser Roboto Light / Thin à partir de polices google dans Chrome

J'ai de la difficulté à l'aide de Roboto polices dans le navigateur google Chrome.. plus précisément je n'arrive pas à obtenir Condensée et Mince/Légère, etc. la police de poids. J'ai télécharger tous 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 utiliser dans des déclarations comme:

Roboto Condensed

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

Roboto Lumière

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

Cependant, ce qu'il me donne est simple Roboto. Si je change le "Condensé" une police de la famille "Roboto Condensed" il fonctionne ... et qui a du sens car, apparemment, google chrome est fin à adopter font-stretch. Toutefois, la modification de la police-famille "roboto condensed" n'est pas utiliser le briquet font-weight (300), il reste à 400. Même si je change l' font-weight à 300, dont il a spécifiquement, il restera à 400 (commutation au niveau de la console, entre 200, 300 et 400 n'a aucun effet). Je dois mettre "Roboto Condensed Light", plus précisément, pour obtenir la lumière font-weight.

Et que dire des autres? "Roboto Mince" n'était pas spécifiquement téléchargé ou installé dans un @font-face ... je ne devrais pas avoir à utiliser des noms comme "roboto mince" quand je veux juste un font-weight, devrais-je?

Détails

En raison de Terry grande suggestion, voici le code correspondant essentiellement 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');

source d'informationauteur roberto tomás

13

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

Roboto et Roboto Condensed sont fournis en deux familles de polices Google Fonts, donc si vous souhaitez utiliser la version condensée, vous aurez à déclarer font-family: "Roboto Condensed" comme le condensé variante n'est pas inclus dans la police Roboto famille.

Roboto Condensed a aussi un nombre plus limité d'montant de police de poids disponibles: 300, 400 et 700 par rapport à Roboto 100, 300, 400, 700 et 900. Pour parler simplement, à l'aide de la police de poids de 100 et 900 ne fonctionnera pas avec Roboto Condensed, et de secours le plus proche possible de la police de poids.

Comment pouvez-vous confirmer que Roboto Condensed n'est pas à l'aide de l'300 police de poids? Il semble fonctionner très bien avec moi (je suis aussi de l'utiliser sur quelques sites)... aussi bien fonctionner en ce violon: http://jsfiddle.net/8k72a/1/

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

Avec mise à jour de votre question, pourquoi ne pas utiliser ce script à la place? Je vois que vous avez cassé vos styles CSS en plusieurs lignes — n'oubliez pas d'échapper les retours à la ligne (en JS avec une barre oblique inverse \:
```
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);
```

Fichier Css (eg) (MaterializeCSS)

p {
  font-family:Roboto;
  font-weight: 200;
}

Vous devez vous connecter pour publier un commentaire.