ここで奇妙な問題を扱っています。@ 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';
}
ライブバージョン
手順:
必要なすべてのフォーマットをインストールするために私が従った手順は、各フォントから必要なフォントの太さを見つけて、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
MicrosoftEdgeでサポートされていない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');
}
Googleフォントがローカルにインストールされている場合(たとえば、モックアップを実行している場合)、EdgeはWebフォントバージョンを表示しないことがわかりました。私は問題の根本を見つけるために多くの読書をしましたが、誰もこれについて言及していませんでした。
これが他の誰かに役立つことを願っています:)
.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');
}