时间戳

首页 > 解决方案 > 这是设置自定义字体的正确方法吗？

html - 这是设置自定义字体的正确方法吗？

问题描述

我有一个字体

/static/font/input_regular.ttf

我想用于code标签，我在我的styles.css 中有这个：

@font-face {
  font-family: "Input_reg";
  src: url("/font/input_regular.ttf") format("truetype");
}

pre, code {
  font-family: "Input_reg", monospace;
  font-size: inherit;
}

该站点的其余部分使用Source Code Pro字体。问题是，它不起作用，并且永远不会加载这种新字体，而是像页面的其余部分一样只使用 Source Code Pro。我在这里做错了什么？如果重要的话，该站点正在使用 hugo，并且托管在 github 页面上。

标签： htmlcssgithub-pageshugo

解决方案

你有没有尝试过

@font-face {
  font-family: "input_reg";
  src: url("font/input_regular.ttf");
}

网址中没有尾随 /。此外，您不需要指定这是一个 trueType，并且对于互联网上的几乎所有内容，全部小写始终是一个好主意:-) 如果这没有帮助，请在浏览器中按 F12，重新加载页面并查看从哪个 URL 加载字体- 这可能是错误的。

推荐阅读