web-dev-qa-db-ja.com

ChromeでGoogleフォントからRoboto Light / Thinを使用する方法

ChromeブラウザーでRobotoフォントを使用するのに問題があります。具体的には、CondensedやThin/Lightなどのフォントウェイトを取得できないようです。 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です。フォントファミリ「Roboto Condensed」を使用するように「Condensed」を変更すると、機能します... chromeがfont-stretchを採用するのが遅れているので、それは理にかなっています。ただし、font-familyを「robotocondensed」に変更するとdoes n'tより軽いfont-weight（300）が使用され、400のままになります。font-weightを特に300に変更しても、400のままになります（コンソールで200、300、400を切り替えても効果はありません）。軽いフォントの重みを得るには、特に「ロボトコンデンスライト」を配置する必要があります。

そして、他の人はどうですか？ 「Roboto Thin」は、@font-faceに具体的にダウンロードまたは設定されませんでした...フォントウェイトが必要な場合は、「roboto thin」などの名前を使用する必要はありません。

詳細

Terryの素晴らしい提案のために、関連するコードは基本的にその全体です：

    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

まず第一に、!importantの使用を避けてください。これが実際に必要な場合、シナリオの数は非常に限られています。

RobotoとRoboto Condensedは、Google Fontsによって2つの別個のフォントファミリとして提供されています。そのため、圧縮バージョンを使用する場合は、font-family: "Roboto Condensed"を宣言する必要があります。

Roboto Condensedでは、使用可能なフォントウェイトの量がより制限されています。Robotoの100、300、400、700、900と比較して300、400、700です。最も近い可能なフォントウェイトへのフォールバック。

Roboto Condensedが300フォントウェイトを使用していないことをどのように確認できますか？それは私と一緒にうまく機能しているようです（私はいくつかのサイトでも使用しています）...このフィドルでもうまく機能しています： http://jsfiddle.net/8k72a/1/

したがって、たとえば、100のフォントウェイトでRoboto Condensedを取得することはnot可能です。

更新された質問で、代わりにこのスクリプトを使用してみませんか？ 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);
17
Terry

Cssファイル（例）（MaterializeCSS）

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