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

删除字体名称的/ infront，因为您的字体文件与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 )来创建整个字体工具包

Answer 2

我在另一台电脑上用其他操作系统的Chrome版本测试了代码，它工作得很好。这似乎都是平台的问题。