我正在尝试在 Hugo Academic 网站中使用购买的字体,使用hugodown
R 包构建,但它只是部分工作。该字体在 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
并链接到 inconfig/_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 问题。@import
custom.scss
custom.css
知道如何让我购买的产品在所有计算机上的所有(现代)浏览器上运行吗?谢谢!