Nextjs 中使用 Iconfont 中文字体

比如选择的字体是

阿里妈妈方圆体

1. 下载字体包

固定文字请选择子集, 不固定请选择字体包下载 (2.4mb)

4ESG9s

2. 检查文件

A7PxfW

3. 上传文件至静态文件服务器

比如地址是

https://cdn.jansora.com/libs/fonts/fangyuan/AlimamaFangYuanTiVF-Thin.woff2

4. 在 CSS 文件中声明 font-family

@font-face {
  font-family: "fangyuan";font-weight: 400;
  src: url("https://cdn.jansora.com/libs/fonts/fangyuan/AlimamaFangYuanTiVF-Thin.woff2") format("woff2"),
       url("https://cdn.jansora.com/libs/fonts/fangyuan/AlimamaFangYuanTiVF-Thin.woff") format("woff");
  font-display: swap;
}

5. 在 tailwind.config.js 文件中配置字体

在 san 中声明该字体即代表全局默认使用该字体

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'fangyuan': ['fangyuan', ],
        'sans': ['fangyuan', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"]
      }
    }
  }
}

6. tailwind 方式引用

<article className="font-fangyuan">
    
</article>

评论栏