web-dev-qa-db-ja.com

GoogleフォントがSafariで機能しない

SafariとChromeでサイトが同じように見えるように取り組んでいます。 In Chromeそれはまさに私が望むように見えます。主要な問題は、Google FontがSafariでロードされていないように見えることです。 Safariがそれを取得しない理由を理解できません。Safariと互換性がないだけで、フォールバックフォントに依存する必要がありますか？

サイトはここにあります

csssafarigoogle-font-api
17
Juicy

何らかの奇妙な理由で、私はGoogleのいくつかのWebフォントでこれを経験しています...これが起こったとき、私は通常それらをサーバーに持って行く、および/またはそれらを変換しますfontsquirrel .... SafariはTTFファイルに関係なく、

Nunito TTF ver

6
Riskbreaker

あなたのCSSには

font-family: 'Source Sans Pro', sans-serif;

fONT-STYLEおよびFONT-WEIGHTの値も必要です。

font-family: 'Source Sans Pro', sans-serif; font-weight:900; font-style:italic;

たとえば、次のような値を含むフォントを使用する場合： https://fonts.googleapis.com/css?family=Source+Sans+Pro:900italic

21
Robert

このようにCSSで@importコードを使用している場合

enter image description here

それを削除して、headタグでlinkを使用します

enter image description here

9
Hakan

2018年の更新

過去にこの問題が発生しており、より多くのフォントファイル形式を提供するという選択肢に頼らざるを得ませんでした。 2018年に再び出会ったことには少し驚いていました。しかし、私の問題はファイル形式ではなく、単に正しいフォントウェイトを要求して指定しないことにあることが判明しました。

GoogleにこのフォントをリクエストするためのURLをカスタマイズしない場合、リンクタグは次のようになります。

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

そのリクエストされたURLの内容を見てみましょう。次のようなフォントフェースルールがいくつか含まれます。

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

font-weight属性に注意してください。 「通常の」加重フォントである400として指定されています。一部のブラウザでは、このフォントを使用して太字に変更することもできます。これは "faux bold" と呼ばれます。しかし、手作りの太字フォントほど見栄えはよくありません。また、一部のブラウザー、特にモバイルSafariでは、横ばいになり、恐ろしく見えます。

解決策は、使用する実際のフォントウェイトバリアントを要求して指定することです。私の場合、次のようになります。

Screenshot from Google Web Fonts

これにより、次のリンクタグが生成されます。

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&amp;subset=latin-ext" rel="stylesheet">

そのURLの内容を見ると、フォントフェイスルールfont-weight: 700のエントリがそこにあることがわかります。

H1タグにこのフォントの太字バージョンを使用する場合は、次のCSSを使用します。

h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
}

ほとんどのブラウザは、h1をfont-weight: boldとして自動的に設定します。そのデフォルト設定を利用したい場合は、独自のフォントフェースルールを提供する必要があります。これを行うには、Googleが提供するフォントフェイスルールを複製し、font-face: 700をfont-face: boldに変更し、変更したルールを自分のCSSに入れます。

したがって、このルール：

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

これになります：

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: bold;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

これで、font-family: 'Source Sans Pro'を含むh1タグは正しいフォントバリアントを使用します。さらに詳しく知りたい場合は、この2012年の A List Apart article を参照してください。

8
oivvio

私の場合、引用符なしでフォント名を使用しました。だから変更するだけ

body{
    font-family: roboto, Arial, sans-serif;
}

に

body{
    font-family: 'roboto', Arial, sans-serif;
}

Chromeは引用符なしで完全に機能しますが、Safariは機能しません。

7
shukshin.ivan

Google Webfont（Londrina）がSafari（Windows用）に表示されない場合がありました。text-rendering: optimizeLegibility;。それを削除した後、それは大丈夫だった。

例： http://codepen.io/Julia-r/pen/gagbdy

4
user2622348