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> 

问题是，当我使用Google Chrome打开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。 这是我最低限度使用的两个。

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

Answer 2

我在另一台装有Chrome的操作系统的另一台计算机上尝试了该代码，并且运行良好。 看来这都是平台问题