CSS @font-face 的问题答案

【问题标题】：Problems with CSS @font-faceCSS @font-face 的问题
【发布时间】：2016-08-26 11:32:04
【问题描述】：

我正在开发一个带有 phonegap 的 android 应用程序，并想使用自定义字体。为此，我尝试使用 CSS @font-face，我首先做了一个小测试来检查它是否按我预期的方式工作。我在同一目录中创建了一个简单的 index.html 文件和一个 .css 文件，我还使用我想要使用的字体复制了该文件，该字体采用 woff2 格式。这是css和html文件的代码：

@font-face {
  font-family: Roboto_Bold;
  src: url(/roboto_bold.woff2) format(woff2);
  font-style: normal;
  font-weight: 700;
}
p {
  font-family: Roboto_Bold;
}

&lt;p&gt;prueba&lt;/p&gt;

问题是，当我用谷歌浏览器打开 index.html 时，字体 robots_bold 没有出现。文本使用浏览器默认字体编写，控制台中不显示任何错误。我已经尝试了一切来解决它（更改字体格式、检查链接、检查我的浏览器版本），但我找不到解决方案。知道为什么@face-font 不起作用吗？

这是我目录中文件的屏幕截图：

【问题讨论】：

如果在同一目录下，删除字体路径前的“/”，如果没有，则在前添加“../”
你检查过你的检查面板吗？ (F12)...我敢打赌这是与字体文件有关的路径问题
@Lee 是的，我检查了检查器，但控制台没有显示任何错误

标签： html css fonts font-face font-family

【解决方案1】：

删除字体名称前面的 /，因为您的字体文件与 CSS 文件位于同一目录中。

另外，请尝试删除字体名称中的下划线，并将其放在引号中 - http://www.w3schools.com/cssref/pr_font_font-family.asp

@font-face {
  font-family: 'RobotoBold';
  src: url(roboto_bold.woff2) format(woff2);
  font-style: normal;
  font-weight: 700;
}

p {
    font-family: 'RobotoBold',sans-serif;
}

更新

由于您的控制台未显示任何错误，因此这不是路径相关问题。我建议 Chrome 无法显示 WOFF2 文件，您可能需要包含该文件的额外版本，例如 WOFF。这是我最低限度使用的两个。

您可以通过将字体文件（适用版权）上传到网络字体生成器工具（例如https://www.fontsquirrel.com/tools/webfont-generator）来创建完整的字体工具包

【讨论】：

那么您的检查员小组怎么说？你的控制台有错误吗？
也尝试包含 woff 文件版本。我在我的网站中同时使用 woff 和 woff2，字体在所有浏览器上都可以正常显示。
我刚试过你的建议，还是不行
Inspector 中的网络选项卡是否显示正在加载的字体文件？
哦，我忘了检查...它没有显示。我想这就是问题

【解决方案2】：

我在另一台计算机上用另一个操作系统的 Chrome 版本尝试了代码，它运行良好。看来都是平台问题

【讨论】：