web-dev-qa-db-ja.com

Googleフォントヘブライ語はChromeでのみ動作します

Googleフォントのヘブライ語フォントを使用したい。そこで、フォントを含めました。

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alef:400,700">

スタイル付けされた要素：

font-family: "Alef", sans-serif;

これは機能しますが、Google Chromeでのみ機能します。他のすべてのテスト済みブラウザー（IE11、Edge、FireFox、iOS Safari、Android Chrome）では、要素は引き続きデフォルトのフォントでレンダリングされます。

fonts.googleapis.comは、おそらくリクエストヘッダーが異なるため、さまざまな応答を返すようです。私が見るものは次のとおりです（同一のヘッダーは表示されません）。

Chrome：

GET /css?family=Alef:400,700 HTTP/1.1
Accept: text/css,*/*;q=0.1
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,he;q=0.6
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
X-Chrome-UMA-Enabled: 1
X-Client-Data: CKa2yQEIqbbJAQjEtskBCOqIygEI/ZXKAQi8mMoB

/* hebrew */
@font-face {
  (...)
  src: (...)
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
  (...)
  src: (...)
  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;
}
(...Same for bold etc.)

エッジ：

GET /css?family=Alef:400,700 HTTP/1.1
Accept: text/css, */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US, en; q=0.7, he; q=0.3
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

@font-face {
  (...)
  src: (...)
}
(... Same for bold etc.)

FireFox：

GET /css?family=Alef:400,700 HTTP/1.1
Accept: text/css,*/*;q=0.1
Accept-Language: he,he-IL;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0

(same response like Edge)
googlefontslanguage
1
Jonathan

問題は多くの場所にある可能性があります。

  1. フォントが正しく実装されていません。実装したように、ラテン文字のみが実装されている必要があります。ヘブライ語の文字セットも表示します。フォントは<link href='https://fonts.googleapis.com/css?family=Alef&subset=latin,hebrew' rel='stylesheet' type='text/css' >で実装する必要があります

  2. googleフォントはhttpで実装されています。 Firefoxなどは、クロスサイトセキュリティの問題でコンテンツの読み込みを妨げる可能性があります。 htaccessでこの使用を避けるには：

    <FilesMatch "\.(ttf|woff|woff2|otf|eot)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

  3. Firefoxに関連するもう1つの問題は、CSSのフォントフェースの欠落です。それを避けるには、CSSで次のルールを使用します：<style> @font-face { font-family: 'Alef Hebrew'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.eot); src: url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.ttf) format('truetype'); } @font-face { font-family: 'Alef Hebrew'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.eot); src: url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.ttf) format('truetype'); } </style>

1
Evgeniy