web-dev-qa-db-ja.com

Open Sans LightをChromeで機能させるにはどうすればよいですか？

これは、GoogleAPIからOpenSansを使用する方法の簡単な例です。予想される動作は、最初の行をより明るく表示することです（font-weight 300）秒より。

Windowsに関する限り、これはFFとEdgeの現在のリリースでは機能しますが、GoogleChromeでは機能しません。このようなブラウザは、最初の段落に明るい段落を使用する代わりに、同じ通常のスタイルで両方の段落を表示します。

<head>
    <meta charset="utf-8" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    <style>

    </style>
</head>


<body>
    <p style="font-family: 'Open Sans'; font-weight: 300;">Foobar</p>
    <br>
    <p style="font-family: 'Open Sans'; font-weight: 400;">Foobar</p>
</body>

更新：

この質問 が示唆するように、問題はローカルにインストールされたフォントとの競合が原因です。実際、GoogleAPIからの 'local'フォントの呼び出しを観察してください。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.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, U+E0FF, U+EFFD, U+F000;
}

ローカルフォントを削除するだけでは、実際には解決策にはなりません。理由は次のとおりです。

  1. それがあった場合、それはおそらくいくつかのプログラムがそれを必要としているためです
  2. webサイトのユーザーにローカルフォントを削除するように依頼することはできません。

したがって、問題は解決しません。

これをChrome（すべてのユーザーの場合）で機能させる方法？他のブラウザがローカルフォントを無視して処理するのはなぜですか？

cssgoogle-chromegoogle-font-api
7
Niccolò

私にとってこの問題を解決した簡単な回避策は、Googleの埋め込みコードからCSSソースをコピーし、それを独自のCSSに配置してから、ローカル（...）ソースを削除することでした。

このような：

@font-face {
   font-family: 'Open Sans Light';
   font-style: normal;
   font-weight: 300;
   src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}

フォントをローカルにインストールしていますが、この方法はChrome（およびFirefox、IE、Edge）で機能するようです。

8
Kim Jensen