小编jed*_*404的帖子

动态访问 Next.js 优化字体

我当前正在使用 json 文件来确定要为我的 Next.js 站点导入哪些字体。Next.js 已经优化了谷歌字体,您可以在本地导入,这比我自己进行谷歌导入具有更好的性能。然而,导入这些字体类的方式似乎要求您知道正在使用的字体。

import { Inter, Lora, Lato, Abril_Fatface } from 'next/font/google'
Run Code Online (Sandbox Code Playgroud)

我想弄清楚是否有一种方法可以根据通过 json 文件传递​​的字体动态导入该函数。

我尝试导入所有字体

import * as exports from 'next/font/google'
const inter = exports.Inter({ subsets: ['latin'] })
Run Code Online (Sandbox Code Playgroud)

但我收到“字体加载器不能导入命名空间”的错误

当我只需要使用 json 确定的字体时,有什么办法可以避免导入每种字体并为所有字体创建变量吗?

这是当前用于导入每个的代码

import {
    Inter,
    Lora,
    Abril_Fatface,
    Lato,
    Alegreya_Sans,
    Alegreya_Sans_SC,
    Amatic_SC,
    Anton,
    Artifika,
    
} from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

const lato = Lato({ weight: ['300', '400', '700'], style: ['normal', 'italic'], subsets: ['latin'], variable: '--lato' })
const lora = Lora({ subsets: ['latin'], …
Run Code Online (Sandbox Code Playgroud)

import fonts dynamic next.js

6
推荐指数
0
解决办法
553
查看次数

标签 统计

dynamic ×1

fonts ×1

import ×1

next.js ×1