在Hugo Academic中购买的字体未在所有现代浏览器/计算机上显示

编程问答 2022-08-22

问题描述

我正试图在使用hugodown R软件包构建的Hugo Academic网站上使用购买的字体，但只能部分使用。字体在RStudio上的Preview和我的笔记本电脑上的Chrome（都在localhost上，并且部署到netlify上）上都可以正常显示。但是，它会还原为笔记本电脑上Safari上以及其他笔记本电脑上Safari和Chrome上的后备字体（那是我测试过的仅有的两个浏览器）。

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

这是设置：

  • 保存在static/fonts中的字体文件（.woff，.woff2）
    • 在assets/css/custom.css中使用
  • @ font-face声明（并在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');
}

# Font families
heading_font = "LEMONMILKPro-Regular"
body_font = "LEMONMILKPro-UltraLight"
nav_font = "LEMONMILKPro-UltraLight"
  • 这样，当LEMONMILKPro不起作用时，custom.css和custom.scss也包含
    • ，以便可以将Raleway用作备份字体。 
html {
  font-family: "LEMONMILKPro-UltraLight","Raleway",sans-serif;
}

h1,h2,h3 {
  font-family: "LEMONMILK-Regular",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和https://css-tricks.com/snippets/css/using-font-face/和myfonts.com（尽管对Hugo Academic v4.8稍作更新）的工作进行了汇总。我至少阅读过十几个关于此主题的帖子/论坛查询，但仍无法解决此问题。

我在user's voice上购买了LEMONMILKPro和相应的许可证，该许可证提供了一个Webkit，其中包括一个CSS样式表（以及上面的@import行），但为了（尝试）使其与Hugo一起使用，我已将其内容复制到custom.scss和custom.css中，并调整了@ font-face声明以及字体文件名和位置，以匹配上述本地字体GitHub问题。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

font-facefontshugo