0

我正在尝试在 Hugo Academic 网站中使用购买的字体，使用hugodownR 包构建，但它只是部分工作。该字体在 RStudio 上的预览版和我笔记本电脑上的 Chrome 上显示良好（无论是在本地主机上还是在部署到 netlify 时）。但是，它会在我的笔记本电脑上的 Safari 和另一台笔记本电脑上的 Safari 和 Chrome 上恢复为备用字体（这是我测试过的仅有的两个浏览器）。

购买的字体是LEMONMILKPro（尽管我尝试通过@font-face 声明的所有字体都遇到了同样的问题，而不是使用 Google 字体）。备用字体是Raleway。

这是设置：

  • 字体文件（.woff、.woff2）保存在static/fonts
  • @font-face 中的声明assets/css/custom.css（并在 中重复以进行良好的衡量assests/scss/custom.scss）：
@import url("//hello.myfonts.net/count/3c07c5");

@font-face {
  font-family: 'LEMONMILKPro-Medium';
  src: local('LEMONMILKPro-Medium'), url('fonts/LEMONMILKPro-Medium.woff2') format('woff2'), url('fonts/LEMONMILKPro-Medium.woff') format('woff');
}
@font-face {
  font-family: 'LEMONMILKPro-Regular';
  src: local('LEMONMILKPro-Regular'), url('fonts/LEMONMILKPro-Regular.woff2') format('woff2'), url('fonts/LEMONMILKPro-Regular.woff') format('woff');
}
@font-face {
  font-family: 'LEMONMILKPro-Light';
  src: local('LEMONMILKPro-Light'), url('fonts/LEMONMILKPro-Light.woff2') format('woff2'), url('fonts/LEMONMILKPro-Light.woff') format('woff');
}
@font-face {
  font-family: 'LEMONMILKPro-UltraLight';
  src: local('LEMONMILKPro-UltraLight'), url('fonts/LEMONMILKPro-UltraLight.woff2') format('woff2'), url('fonts/LEMONMILKPro-UltraLight.woff') format('woff');
}
  • 字体主题 ( emk_font_set)，保存data/fonts并链接到 in config/_default/params.toml，包括：
# Font families
heading_font = "LEMONMILKPro-Regular"
body_font = "LEMONMILKPro-UltraLight"
nav_font = "LEMONMILKPro-UltraLight"
  • 这样我就可以在 LEMONMILKPro 不工作时使用 Raleway 作为备用字体，custom.css并且custom.scss还包含
html {
  font-family: "LEMONMILKPro-UltraLight", "Raleway", sans-serif;
}

h1, h2, h3 {
  font-family: "LEMONMILK-Regular", "Raleway", sans-serif;
  text-transform: uppercase;
}

整个设置位于https://github.com/EllaKaye/hugodown-website。

该网站本身（暂时）位于https://gallant-shaw-c70134.netlify.app/。

我已经从https://github.com/gcushen/hugo-academic/issues/1061（尽管针对 Hugo Academic v4.8 略有更新）和https://css-tricks拼凑了我迄今为止所做的工作。 com/snippets/css/using-font-face/。我已经阅读了至少十几个围绕这个主题的帖子/论坛查询，但无法解决这个问题。

我在 myfonts.com 上购买了 LEMONMILKPro 和相应的许可证，它提供了一个 webkit，包括一个 css 样式表（和上面的行），但是为了（尝试）让它与 Hugo 一起工作，我已经将其中的内容复制到和, 并调整 @font-face 声明和字体文件名和位置以匹配上述本地字体 GitHub 问题。@importcustom.scsscustom.css

知道如何让我购买的产品在所有计算机上的所有（现代）浏览器上运行吗？谢谢！

4

0 回答 0