我正在开发一个带有 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 不起作用吗?
最佳答案
删除字体名称前面的/,因为您的字体文件与 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)来创建完整的字体套件。
关于html - CSS @font-face 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39165330/