Question

我正在开发一个带有phonegap的Android应用，并希望使用自定义字体。为此，我试图使用CSS @ font-face，我首先进行了一些测试，以检查它是否按照我期望的方式工作。我在同一目录中创建了一个简单的index.html文件和一个.css文件，我也用我想要使用的字体复制了该文件，该文件采用woff2格式。这是css和html文件的代码：

＆＃13;

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

＆＃13;

<p>prueba</p>

＆＃13;

问题在于，当我使用谷歌浏览器打开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版本的代码，它运行正常。这似乎是平台的问题

CSS @ font-face的问题

2 个答案: