在React项目中配置Tailwind本地字体（已解决：不支持乌克兰语）

核心步骤 #

1. 准备兼容字体 #

确保src/font文件夹下的字体文件支持乌克兰语（推荐选择Noto Sans Ukrainian、Roboto等原生支持西里尔字母的字体），优先使用woff2/woff格式以保证兼容性。

2. 在全局样式中引入字体 #

在index.css中添加@font-face规则，指定字体路径和字符范围：

@font-face {
  font-family: 'UkrainianFont';
  src: local('UkrainianFont'),
       url('./font/your-font-file.woff2') format('woff2'),
       url('./font/your-font-file.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0400-04FF, U+0500-052F; /* 覆盖乌克兰语所用西里尔字符集 */
}

注意：路径需与实际字体文件位置匹配，若index.css在src根目录，font文件夹在src下则路径正确。

3. 配置Tailwind使用自定义字体 #

修改tailwind.config.js，在theme.extend.fontFamily中添加自定义字体：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        ukrainian: ['UkrainianFont', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

4. 在项目中应用字体 #

• 全局应用：在App.css中设置全局字体

body {
  font-family: 'UkrainianFont', sans-serif;
}

• 组件内局部应用：使用Tailwind类名

function App() {
  return (
    <div className="font-ukrainian">
      <p>Привіт, світ!</p>
    </div>
  );
}

export default App;

排查要点 #

• 检查字体加载状态：在浏览器开发者工具的Sources标签下确认字体文件是否成功加载，路径是否正确。
• 验证字体兼容性：用字体查看工具确认字体文件包含乌克兰语所需的西里尔字符。
• 清除浏览器缓存：强制刷新页面（Ctrl+F5）避免缓存影响字体加载。
• 确认Tailwind配置生效：确保content数组覆盖了所有需要应用样式的组件文件。

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