如何在nextjs中添加字体ttf文件 [英] How to add font ttf file in nextjs

问题描述

我是Nextjs的新手.我想将自定义字体添加到我的项目中.我对如何做到完全困惑(我的字体在"public/fonts/"中).我的global.css文件是这个

I am new to Nextjs. I wanna add my custom fonts to my project. I am totally confused about how to do that(my fonts are in "public/fonts/"). my global.css file is this-

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");
}

这是我的下一个配置文件-

and this is my next config file -

// next.config.js
const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  /* config options here */
});

推荐答案

您应将public目录称为/.因此，您的CSS应该是这样的:

You should refer to public directory as /. So, your CSS should be something like this:

@font-face {
  font-family: "Avenir";
  src: url("/fonts/AvenirNextRoundedStd-Demi.ttf");
  src: url("/fonts/AvenirNextRoundedStd-MedIt.ttf");
  src: url("/fonts/AvenirNextRoundedStd-Reg.ttf");
}

但是我想您正在尝试增加字体的多个粗细.所以，您的CSS不应该是这样吗?

But I think you are trying to add multiple weights of the font. So, shouldn't your CSS be like this?

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;
}

这篇关于如何在nextjs中添加字体ttf文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！