css - Microsoft Edge @font-face が印刷時に適用されない

Question

サイトを閲覧すると、すべてのフォントが正しく表示されています。ページを印刷すると、プレビューと対応する出力はすべて Times New Roman になります。これが私のCSSルールです：

font-family: 'Metric-Regular';
src: url("fonts/MetricWeb-Regular.eot");
src: url("fonts/MetricWeb-Regular.woff") format("woff");

これが発生していることに気付きました。この動作は、IE、Firefox、Chrome などのどのバージョンにも表示されません。検索してみましたが、印刷時にこれに関連するものは見つかりませんでした。Edge が woff2 をサポートしていないなどのことだけです。

ここでは正しくレンダリングされています:

これは印刷プレビューです。これは、PDFとして印刷/保存する方法でもあります。

score 1 · Accepted Answer

これらのフォントを @media print 内に読み込もうとすると、Edge のバグであり、今のところ修正されません。

私にとってうまくいった解決策は、@media 印刷宣言の外にフォントをロードすることです - 次のように:

@font-face {
    font-family: 'MyFont';
    src: url('../fonts/MyFont.ttf') format("truetype");
}

@media print {  

}

1 に答える 1