web-dev-qa-db-ja.com

MicrosoftEdgeで@ font-faceを使用する

ここで奇妙な問題を扱っています。@ font-faceを使用すると、MicrosoftEdgeブラウザがフォントをロードしないようです。 Windows10とMicrosoftEdgeを実行しているすべてのコンピューターを確認しました。

チェックしました http://caniuse.com/#search=font%20face

Font-faceはEdgeと互換性があると書かれているので、何が起こっているのかわかりません。私の例では、divとそのフォントパラメータがあります。

[〜＃〜] css [〜＃〜]

@font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
@font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}

[〜＃〜] html [〜＃〜]

div {
  font-family:'Dosis';
}

ライブバージョン

http://codepen.io/mariomez/pen/YwGGWy

htmlcssfontsfont-facemicrosoft-edge
7
justme

手順：

必要なすべてのフォーマットをインストールするために私が従った手順は、各フォントから必要なフォントの太さを見つけて、GoogleFontsからダウンロードすることでした。次に、 https://everythingfonts.com/font-face （フォントフェースジェネレーター）を使用して、CSSコードとともにすべての形式をダウンロードしました。次に、それらすべてをCSSとHTMLに組み込みました。

CSS：

@font-face {
    font-family: 'JosefinSansLight';
    src: url('/fonts/JosefinSansLight.eot');
    src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'),
         url('/fonts/JosefinSansLight.woff2') format('woff2'),
         url('/fonts/JosefinSansLight.woff') format('woff'),
         url('/fonts/JosefinSansLight.ttf') format('truetype');
}

HTML（抜粋）：

.testim{
font-family:'JosefinSansLight', sans-serif;
line-height:normal;
color:#969696;
font-size:1.2em;
}

ファイル:(私のドメインフォルダ）/ fonts

fonts/JosefinSansLight.eot
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.woff2
fonts/JosefinSansLight.woff
fonts/JosefinSansLight.ttf
4
justme

MicrosoftEdgeでサポートされていないWOFF2形式のみを使用しています。

WOFF2互換性

この問題を解決するには、@font-face宣言にWOFF形式を含めます。最新のブラウザのほとんど サポートWOFF

ブラウザを最大限にサポートするには、考えられるすべての形式を含めてください。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'), 
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}
6
Shishir Morshed

Googleフォントがローカルにインストールされている場合（たとえば、モックアップを実行している場合）、EdgeはWebフォントバージョンを表示しないことがわかりました。私は問題の根本を見つけるために多くの読書をしましたが、誰もこれについて言及していませんでした。

これが他の誰かに役立つことを願っています:)

5
user3747088

.woffフォントに関して、MicrosoftEdgeの状況が変更されました。最近、Windows10ラップトップを購入しました。 @ font-faceに.woffフォントが含まれているWebサイトでは、Microsoft Edgeでは表示されませんでしたが、InternetExplorerでは表示されました。 Microsoft開発者のWebサイト 2016年5月11日現在、.woff2はEdgeで次のようにサポートされています。

Microsoft Edgeは、WOFF1.0から改善された圧縮アルゴリズムを提供するWebOpen Font Format（WOFF）ファイル形式2.0仕様をサポートしています。フォントフォーマット「woff2」がサポートされています。

上記のリンクに基づいてMicrosoftEdgeを使用して特別なフォントを正常に表示するために、すべてのWebサイトに実装したCSSコードの例を次に示します。

@font-face {
  font-family: Eurostile;
  src: url("http://mylink/eurostile.woff"), url("http://mylink/eurostile.woff2"), url("http://mylink/eurostile.eot"), url("http://mylink/eurostile.ttf") format('truetype');
}
2
Pamela Cook - LightBe Corp