Next.js 14.0.4项目@font-face字体在IOS端无法加载求助

针对Next.js 14.0.4 + TailwindCSS项目中Avenir字体在iOS端失效的问题，可按以下步骤排查修复：

1. 修正Font-Face声明 #

iOS Safari/Chrome对字体声明的格式、路径和属性匹配要求严格，需确保@font-face配置准确：

/* app/fonts.css */
@font-face {
  font-family: 'Avenir Black'; /* 必须与Tailwind配置中的字体名完全一致 */
  src: url('/fonts/Avenir-Black.woff2') format('woff2'),
       url('/fonts/Avenir-Black.woff') format('woff'),
       url('/fonts/Avenir-Black.ttf') format('truetype');
  font-weight: 900; /* 明确对应Black字重，iOS依赖此匹配字体 */
  font-style: normal;
  font-display: swap; /* 优化加载体验，同时避免iOS渲染异常 */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

• 路径使用绝对路径/fonts/xxx，因为public目录是Next.js静态资源根目录
• 确保字体文件名与实际存放的文件完全一致（注意大小写，iOS区分文件名大小写）

2. 对齐Tailwind配置与Font-Face名称 #

Tailwind中配置的字体名必须和@font-face的font-family值完全匹配：

// tailwind.config.js
theme: {
  extend: {
    fontFamily: {
      avenirBlack: ['Avenir Black', 'sans-serif'], // 与font-face的font-family一致
    },
  },
}

3. 验证字体文件兼容性 #

• 部分TTF字体可能存在iOS兼容性问题，可使用Font Squirrel重新生成兼容的woff2/woff/ttf文件
• 检查字体文件是否损坏：直接在iOS设备上打开字体文件，确认能正常显示

4. 确保全局导入字体样式 #

在Next.js的根布局文件中全局导入fonts.css，避免局部导入导致的样式覆盖：

// app/layout.tsx
import '@/app/fonts.css';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

5. 排查iOS加载异常细节 #

• 连接iOS设备到Mac，打开Safari开发者工具，查看网络请求面板，确认字体文件是否返回200状态码（若返回404，说明路径配置错误）
• 检查是否有高优先级CSS规则覆盖了font-family，可通过开发者工具的元素样式面板排查

6. 尝试Next.js官方字体加载方案（可选） #

Next.js 13+内置的字体优化功能可自动处理兼容性问题，替换手动@font-face配置：

// app/fonts.ts
import localFont from 'next/font/local';

const avenirBlack = localFont({
  src: [
    { path: '../public/fonts/Avenir-Black.woff2', format: 'woff2' },
    { path: '../public/fonts/Avenir-Black.woff', format: 'woff' },
    { path: '../public/fonts/Avenir-Black.ttf', format: 'truetype' },
  ],
  weight: '900',
  style: 'normal',
  variable: '--font-avenir-black',
});

export { avenirBlack };

在根布局中应用字体变量：

// app/layout.tsx
import { avenirBlack } from './fonts';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={avenirBlack.variable}>
      <body>{children}</body>
    </html>
  );
}

更新Tailwind配置：

// tailwind.config.js
theme: {
  extend: {
    fontFamily: {
      avenirBlack: ['var(--font-avenir-black)', 'sans-serif'],
    },
  },
}

内容的提问来源于stack exchange，提问作者Lvasche