Next.js 中如何仅为单个元素设置外部托管的自定义字体

方案1：使用FontFace API（推荐，适配动态随机字体场景） #

这是浏览器原生提供的字体加载API，不需要手动操作DOM，非常适合CSR场景下动态获取随机字体URL的需求：

• 先给需要单独设置字体的目标元素添加唯一标识，比如类名custom-font-element
• 拿到随机字体URL后通过FontFace加载，加载完成后挂载到文档字体集合，再给目标元素设置字体即可
  示例代码：

// 这里替换为你随机获取到的字体URL
const fontUrl = 'https://*****.com/file/fonts/Parnian.ttf'
// 自定义唯一字体名，避免和全局字体冲突
const customFontName = 'RandomCustomFont'

// 加载字体资源
const customFont = new FontFace(customFontName, `url(${fontUrl})`)
customFont.load()
  .then(loadedFont => {
    // 加载完成后将字体添加到文档
    document.fonts.add(loadedFont)
    // 给目标元素应用字体
    const targetEl = document.querySelector('.custom-font-element')
    if (targetEl) {
      targetEl.style.fontFamily = `${customFontName}, sans-serif`
    }
  })
  .catch(err => {
    // 字体加载失败的降级逻辑，可根据业务需求调整
    console.error('字体加载失败', err)
  })

方案2：动态插入style标签定义@font-face #

如果需要兼容更低版本的浏览器，可以用手动插入样式规则的方式实现：

• 生成唯一的字体名（可以加时间戳避免多次加载不同字体时冲突）
• 创建style标签写入@font-face规则插入到页面head中
• 给目标元素设置对应的font-family属性
  示例代码：

const fontUrl = 'https://*****.com/file/fonts/Parnian.ttf'
// 加时间戳保证字体名唯一
const customFontName = 'RandomCustomFont_' + Date.now()

// 拼接字体声明规则
const fontFaceRule = `
@font-face {
  font-family: '${customFontName}';
  src: url('${fontUrl}') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
`
// 插入样式到页面
const styleEl = document.createElement('style')
styleEl.appendChild(document.createTextNode(fontFaceRule))
document.head.appendChild(styleEl)

// 给目标元素应用字体
const targetEl = document.querySelector('.custom-font-element')
if (targetEl) {
  targetEl.style.fontFamily = `${customFontName}, sans-serif`
}

注意事项 #

• 如果字体托管域名和当前页面域名不同，需要托管服务配置正确的CORS跨域头，否则字体会加载失败
• 建议配置fallback字体，避免字体加载失败时显示异常
• 如果有频繁切换随机字体的需求，注意及时清理无用的style标签或FontFace实例，避免内存占用过高

内容的提问来源于stack exchange，提问作者S.M_Emamian