У меня возникли проблемы с использованием шрифтов Roboto в браузере Chrome. В частности, я не могу получить сжатые и тонкие/светлые и т.д. веса шрифтов. Я загружаю все 3 полных шрифта:

@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);

то я использую их в объявлениях вроде:

Roboto Condensed

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

Свет Робото

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

Однако то, что это дает мне, - это просто Робото. Если я сменил "Сжатый", чтобы использовать семейство шрифтов "Roboto Condensed", это работает... и это имеет смысл, потому что, по-видимому, хром опаздывает на принятие font-stretch. Однако изменение семейства шрифтов на "roboto condensed" не использует более легкое font-weight (это 300), оно остается на уровне 400. Даже если я изменю font-weight до 300, который он конкретно имеет, он будет остаются на уровне 400 (переключение на консоль между 200, 300 и 400 не оказывает никакого эффекта). Я должен поставить "Roboto Condensed Light" специально, чтобы получить легкий вес шрифта.

А как насчет других? "Roboto Thin" специально не загружался или не устанавливался в @font-face... Мне не нужно было использовать имена типа "roboto thin", когда мне просто нужен шрифт-вес, должен ли я?

Подробнее

Из-за большого предложения Терри, здесь соответствующий код в основном в нем целиком:

    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');

Ответ 1

Прежде всего - избегайте использования !important. Существует очень ограниченное количество сценариев, когда это действительно необходимо.

Roboto и Roboto Condensed предоставляются в виде двух отдельных семейств шрифтов Google Fonts, поэтому, если вы хотите использовать сконденсированную версию, вам придется объявить font-family: "Roboto Condensed", поскольку сжатый вариант не включен в семейство шрифтов Roboto.

Roboto Condensed также имеет более ограниченное количество доступных шрифтов: 300, 400 и 700 по сравнению с Roboto 100, 300, 400, 700 и 900. Проще говоря, использование плотности шрифта 100 и 900 не будет работать с Roboto Condensed, и будет возвращаться к ближайшему возможному шрифту.

Как вы можете подтвердить, что Roboto Condensed не использует 300 шрифтов? Кажется, он работает отлично со мной (я также использую его на нескольких сайтах)... также отлично работает в этой скрипке: http://jsfiddle.net/8k72a/1/

Следовательно, возможно не получить Roboto Condensed с весом шрифта 100.

С вашим обновленным вопросом, почему бы не использовать этот script вместо этого? Я вижу, что вы разделили стили CSS на несколько строк - не забудьте избежать строк в JS с помощью обратного слэша \:

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);

Как использовать Roboto Light/Thin из шрифтов Google в Chrome

Roboto Condensed

Свет Робото

Подробнее

Ответ 1

Ответ 2