面试题：Next.js中自定义字体加载与国际化的适配

1. 字体文件管理

收集字体文件：为每种需要的语言准备对应的字体文件，比如 zh.ttf 用于中文，en.ttf 用于英文等。将这些字体文件放在项目的 public/fonts 目录下。
字体格式转换：为了更好的浏览器兼容性，可使用工具（如 fonttools）将字体文件转换为多种格式，如 woff、woff2 等。例如，woff2 格式在现代浏览器中有更好的压缩比和加载性能。

2. 性能优化

字体加载策略：
- 关键 CSS：在 Next.js 的 pages/_app.js 或 pages/_document.js 中，使用关键 CSS 技术来确保在页面加载时，尽快加载和渲染首屏所需的字体。例如，提取关键的字体样式（如正文和标题字体）到内联 CSS 中，这样浏览器可以在下载外部字体文件之前就开始渲染页面。
- 字体加载时机：使用 @font - face 规则的 font - display 属性来控制字体加载的行为。对于中文和英文这种常用的文本字体，可以设置 font - display: swap，它会让浏览器先使用系统默认字体渲染文本，一旦字体文件加载完成，就立即切换为自定义字体，这样既保证了文本的可读性，又不会因为字体加载延迟而影响页面呈现。
代码拆分：如果字体文件较大，可以考虑代码拆分。在 Next.js 中，可以结合动态导入（Dynamic Imports）技术，只有在需要切换到特定语言时，才加载对应的字体文件。例如，在语言切换函数中动态导入字体样式文件。

3. 语言切换字体加载方案

创建字体样式文件：
- 为每种语言创建单独的 CSS 文件，例如 styles/zh.css 和 styles/en.css。在这些 CSS 文件中，使用 @font - face 规则定义字体。例如：

/* zh.css */
@font - face {
    font - family: 'ChineseFont';
    src: url('/fonts/zh.woff2') format('woff2'),
         url('/fonts/zh.woff') format('woff');
    font - display: swap;
}
body {
    font - family: 'ChineseFont', sans - serif;
}

/* en.css */
@font - face {
    font - family: 'EnglishFont';
    src: url('/fonts/en.woff2') format('woff2'),
         url('/fonts/en.woff') format('woff');
    font - display: swap;
}
body {
    font - family: 'EnglishFont', sans - serif;
}

语言切换逻辑：
- 在 Next.js 项目中，通常会有一个语言切换的状态管理机制。可以使用 useState 或状态管理库（如 Redux、MobX 等）来管理当前语言状态。
- 当语言切换时，根据当前语言加载对应的 CSS 文件。在 Next.js 中，可以使用 next/link 的 prefetch 属性结合动态导入来实现。例如：

import Link from 'next/link';
import { useState } from'react';

const LanguageSwitcher = () => {
    const [currentLang, setCurrentLang] = useState('en');

    const handleLangSwitch = (lang) => {
        setCurrentLang(lang);
        if (lang === 'zh') {
            import('../styles/zh.css');
        } else {
            import('../styles/en.css');
        }
    };

    return (
        <div>
            <Link href="#" onClick={() => handleLangSwitch('en')}>
                English
            </Link>
            <Link href="#" onClick={() => handleLangSwitch('zh')}>
                中文
            </Link>
        </div>
    );
};

export default LanguageSwitcher;

4. 兼容性处理

SSR 兼容性：
- 在服务器端渲染（SSR）环境下，需要确保字体文件能够正确加载。Next.js 在 SSR 过程中，会将 CSS 样式提取并注入到 HTML 中。为了确保字体相关的 CSS 能够正确处理，在 pages/_document.js 中，可以通过自定义 Document 类来处理字体样式的注入。例如：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    {/* 这里可以根据当前语言动态添加字体相关的 CSS 链接 */}
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

CSR 兼容性：
- 在客户端渲染（CSR）环境下，上述的动态导入 CSS 文件的方式已经能够很好地工作。不过，需要注意一些旧版本浏览器对某些 CSS 特性（如 @font - face 的 font - display 属性）的兼容性。可以通过添加 CSS 前缀或使用 Polyfill 来解决。例如，对于 font - display 属性，可以添加 -webkit - font - display 等前缀。同时，对于不支持 @font - face 的极旧浏览器，可以提供一个优雅降级方案，如使用系统默认字体。

星途面试题库

面试题：Next.js中自定义字体加载与国际化的适配

知识考点

面试题答案

1. 字体文件管理

2. 性能优化

3. 语言切换字体加载方案

4. 兼容性处理