javascript - 如何在 nextjs 中添加字体 ttf 文件
问题描述
我是 Nextjs 的新手。我想将我的自定义字体添加到我的项目中。我完全不知道该怎么做(我的字体在“public/fonts/”中)。我的 global.css 文件是这个-
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
@font-face {
font-family: "Avenir";
src: url("../public/fonts/AvenirNextRoundedStd-Demi.ttf");
src: url("../public/fonts/AvenirNextRoundedStd-MedIt.ttf");
src: url("../public/fonts/AvenirNextRoundedStd-Reg.ttf");
}
这是我的下一个配置文件 -
// next.config.js
const withCSS = require("@zeit/next-css");
module.exports = withCSS({
/* config options here */
});
解决方案
您应该将public
目录称为/
. 所以,你的 CSS 应该是这样的:
@font-face {
font-family: "Avenir";
src: url("/fonts/AvenirNextRoundedStd-Demi.ttf");
src: url("/fonts/AvenirNextRoundedStd-MedIt.ttf");
src: url("/fonts/AvenirNextRoundedStd-Reg.ttf");
}
但我认为您正在尝试添加字体的多个权重。那么,你的 CSS 不应该是这样的吗?
body {
font-family: "Avenir", sans-serif;
}
@font-face {
font-family: "Avenir";
font-weight: 400;
src: url("/fonts/AvenirNextRoundedStd-Reg.ttf") format('truetype');
}
@font-face {
font-family: "Avenir";
font-weight: 500;
src: url("/fonts/AvenirNextRoundedStd-MedIt.ttf") format('truetype');
}
@font-face {
font-family: "Avenir";
src: url("/fonts/AvenirNextRoundedStd-Demi.ttf") format('truetype');
font-weight: 600;
}
推荐阅读
- xamarin - Xamarin 表单中的提醒
- javascript - Ajax 追加一行而不是数组
- javascript - 如何从对象中获取值
- html - CSS - 将样式放在嵌套在元素中的输入上?
- apache-spark - 如何取消使用广播连接广播的表?
- c - 是否有 gcc 选项来解决这个与位域相关的 C 问题?
- fpdf - 如何在 FPDF 的 ISO-8859-1 或 ISO-8859-15 中调用 iconv
- opencv - 如何用 4 个像素扩展特定的颜色斑点?
- kubernetes - Kubernetes Service 连接 TargetPort 而不是 NodePort
- boolean - 关于布尔值作为变量时的应用问题?(单词问题)