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

Question

我有一个字体

/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 页面上。

Answer 1

你试过了吗

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

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

Answer 2

提供最深入的浏览器支持。

@font-face {
  font-family: 'Input_reg';
  src: url('/static/font/input_regular.eot'); /* IE9 Compat Modes */
  src: url('/static/font/input_regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/static/font/input_regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/static/font/input_regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('/static/font/input_regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/static/font/input_regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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