Question

我无法在Google Chrome浏览器中显示字体（版本51.0.2704.106（64位））

Safari和Firefox工作正常。

以下是我使用的代码示例。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
   url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
   url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
   font-weight: normal;
   font-style: normal;
}

我已在多个网站上将字体转换为woff2。问题可能是什么？

Answer 1

我最近在网站上实现了@ font-face的浏览器问题。以下是一些有效的解决方案：

尝试使用＆＃34;＆＃34;而不是＆＃39;＆＃39;用于网址和格式
尽量不要调用.svg last
尝试为每个@ font-face参考指定font-weight和font-style
您之后在CSS中正确引用了font-family吗？

通过以上所有更改，您的代码可能如下所示：

@font-face {
    font-family: "MyWebFont";
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
    url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
    url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
    url("webfont.ttf")  format("truetype") /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

稍后在样式表中：

body {
    font-family: "MyWebFont";
}

@ font-face仅在Chrome浏览器中无效

1 个答案: