react如何使用其他字体

使用自定义字体的方法

在React项目中引入自定义字体可以通过CSS或直接通过JavaScript实现。以下是几种常见的方法：

通过CSS引入字体

在项目的CSS文件中定义字体，使用@font-face规则。确保字体文件（如.woff、.ttf等）已放置在项目目录中。

@font-face {
  font-family: 'CustomFont';
  src: url('./fonts/CustomFont.woff2') format('woff2'),
       url('./fonts/CustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

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

通过JavaScript动态加载字体

使用FontFace API动态加载字体文件。这种方法适用于需要按需加载字体的场景。

const font = new FontFace('CustomFont', 'url(./fonts/CustomFont.woff2)');
font.load().then(() => {
  document.fonts.add(font);
  document.body.style.fontFamily = 'CustomFont, sans-serif';
});

使用第三方字体库

通过CDN引入第三方字体库，如Google Fonts。在public/index.html中添加链接标签。

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

在React组件中直接使用字体名称。

const styles = {
  fontFamily: 'Roboto, sans-serif'
};

通过Webpack配置字体文件

如果使用Webpack，确保file-loader或url-loader已配置处理字体文件。在webpack.config.js中添加规则。

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: ['file-loader']
    }
  ]
}

注意事项

• 字体文件格式应选择现代浏览器支持的.woff2或.woff，以提高加载性能。
• 确保字体文件的路径正确，避免404错误。
• 对于多语言项目，检查字体是否支持所需的字符集。