如何解决如何在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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。