如何在React-JSS中定义并使用font-face字体规则

React-JSS中实现自定义字体配置和普通CSS写法逻辑一致，只是将规则写进JSS的样式对象中即可，共有两种常用实现方式：

全局注册（推荐，全项目可复用） #

和普通项目在index.css定义全局字体的效果完全一致，所有组件都可以直接使用定义的font-family名称，操作步骤如下：

1. 把字体文件（woff2、woff等格式）放到项目静态资源目录，例如src/assets/fonts下
2. 新建字体样式文件（也可以直接在入口文件编写），通过createUseStyles定义@font-face规则：

// src/styles/fonts.js
import { createUseStyles } from 'react-jss'

// 同一个字体的不同字重/字形可以写在数组里批量定义
export const useGlobalFonts = createUseStyles({
  '@font-face': [
    {
      fontFamily: '自定义字体名称',
      src: `url(${require('../assets/fonts/字体文件-Regular.woff2')}) format('woff2'),
            url(${require('../assets/fonts/字体文件-Regular.woff')}) format('woff')`,
      fontWeight: 'normal',
      fontStyle: 'normal'
    },
    {
      fontFamily: '自定义字体名称',
      src: `url(${require('../assets/fonts/字体文件-Bold.woff2')}) format('woff2'),
            url(${require('../assets/fonts/字体文件-Bold.woff')}) format('woff')`,
      fontWeight: 'bold',
      fontStyle: 'normal'
    }
  ]
})

3. 在项目入口文件（例如index.js）调用上述hook，注入全局字体规则：

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { useGlobalFonts } from './styles/fonts'

const Root = () => {
  useGlobalFonts()
  return <App />
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />)

4. 任意组件的JSS样式中直接使用定义的字体名称即可：

const useStyles = createUseStyles({
  pageTitle: {
    fontFamily: '自定义字体名称',
    fontWeight: 'bold',
    fontSize: '28px'
  }
})

局部注册（仅指定组件范围内可用） #

如果不需要全局使用字体，直接把@font-face规则写在对应组件的createUseStyles样式对象中即可，调用组件的样式hook时规则会自动注入，仅当前组件及其子组件可使用该字体。

注意事项 #

• 如果你的项目已经配置了静态资源代理，也可以直接写字体的公共路径，不需要用require引入，例如src: "url('/fonts/字体文件.woff2') format('woff2')"
• 如果你使用的是React-JSS v10以下的旧版本，可以直接用injectGlobal API注入全局规则，写法更简洁：

import { injectGlobal } from 'react-jss'

injectGlobal`
  @font-face {
    font-family: '自定义字体名称';
    src: url('/fonts/字体文件-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
`

直接在入口文件运行上述代码即可全局生效，后续使用方式和前文一致。

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