nextjs添加自定义font-family过程，以及为什么开源字体库css文件有这么多同名的font-family，但是会指定不同的font-weight和font-style

本文链接：https://blog.csdn.net/kiramario/article/details/146303318

前端项目要引入inter字体。官方地址：https://github.com/rsms/inter/，查看inter.css发现同一个font-family的名称，font-style和font-weight，src不一样，这意味着，当你使用font-family:inter; font-style: italic; font-weight: 300的时候，会去引用“Inter-LightItalic.woff2”这个字体文件。

inter.css:

... 
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-Thin.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-ThinItalic.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-ExtraLight.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-ExtraLightItalic.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-Light.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-LightItalic.woff2") format("woff2"); }
...

nextjs引入方式：

把字体文件全部放到public里面。
在项目里面增加一个文件，定义字体对象，对象里面的src要把inter.css的内容抄过来。

import localFont from 'next/font/local'

const inter = localFont({
    src: [
        {
          path: '../../public/inter-4.1-web/Inter-Thin.woff2',
          weight: '100',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-ThinItalic.woff2',
          weight: '100',
          style: 'italic',
        },
        {
          path: '../../public/inter-4.1-web/Inter-ExtraLight.woff2',
          weight: '200',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-ExtraLightItalic.woff2',
          weight: '200',
          style: 'italic',
        },
        {
          path: '../../public/inter-4.1-web/Inter-Light.woff2',
          weight: '300',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-LightItalic.woff2',
          weight: '300',
          style: 'italic',
        },
        {
          path: '../../public/inter-4.1-web/Inter-Regular.woff2',
          weight: '400',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-Italic.woff2',
          weight: '400',
          style: 'italic',
        },
        {
          path: '../../public/inter-4.1-web/Inter-Medium.woff2',
          weight: '500',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-MediumItalic.woff2',
          weight: '500',
          style: 'italic',
        },
        {
          path: '../../public/inter-4.1-web/Inter-SemiBold.woff2',
          weight: '600',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-SemiBoldItalic.woff2',
          weight: '600',
          style: 'italic',
        },
        {
          path: '../../public/inter-4.1-web/Inter-Bold.woff2',
          weight: '700',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-BoldItalic.woff2',
          weight: '700',
          style: 'italic',
        },
        {
          path: '../../public/inter-4.1-web/Inter-ExtraBold.woff2',
          weight: '800',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-ExtraBoldItalic.woff2',
          weight: '800',
          style: 'italic',
        },
        {
          path: '../../public/inter-4.1-web/Inter-Black.woff2',
          weight: '900',
          style: 'normal',
        },
        {
          path: '../../public/inter-4.1-web/Inter-BlackItalic.woff2',
          weight: '900',
          style: 'italic',
        },
    ],
    display: 'swap'
})
export default inter

组件中引入

import inter from "@/lib/Inter"

export default function Page() {
    return (
        <div className={`${inter.className} font-[400]`}>
         内容
        </div>
    )

}