html - CSS @font-face 的问题

Question

我正在开发一个带有 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;
}

<p>prueba</p>

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

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

Answer 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)来创建完整的字体套件。