如何在React中不使用.css文件应用@font-face

方法1：动态创建Style标签 #

在组件挂载时生成并插入style标签到页面头部，组件卸载时清理，避免重复注入：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const styleEl = document.createElement('style');
    styleEl.textContent = `
      @font-face {
        font-family: 'RFDewiExpanded-Thin';
        font-weight: 100;
        font-style: normal;
        src: url('你的字体资源路径') format('woff2'); // 替换为实际src内容
      }
    `;
    document.head.appendChild(styleEl);

    return () => document.head.removeChild(styleEl);
  }, []);

  return (
    <div style={{ fontFamily: 'RFDewiExpanded-Thin, sans-serif' }}>
      测试自定义字体内容
    </div>
  );
}

export default App;

方法2：直接在JSX中嵌入style标签 #

React支持在组件的JSX结构中直接写入style元素，无需额外API：

function App() {
  return (
    <>
      <style>
        {`
          @font-face {
            font-family: 'RFDewiExpanded-Thin';
            font-weight: 100;
            font-style: normal;
            src: url('你的字体资源路径') format('woff2');
          }
        `}
      </style>
      <div style={{ fontFamily: 'RFDewiExpanded-Thin, sans-serif' }}>
        测试自定义字体内容
      </div>
    </>
  );
}

export default App;

方法3：借助CSS-in-JS库（以styled-components为例） #

如果项目已使用CSS-in-JS工具，可通过全局样式注入@font-face：

import styled, { createGlobalStyle } from 'styled-components';

const GlobalFontStyle = createGlobalStyle`
  @font-face {
    font-family: 'RFDewiExpanded-Thin';
    font-weight: 100;
    font-style: normal;
    src: url('你的字体资源路径') format('woff2');
  }
`;

const StyledText = styled.div`
  font-family: 'RFDewiExpanded-Thin', sans-serif;
`;

function App() {
  return (
    <>
      <GlobalFontStyle />
      <StyledText>测试自定义字体内容</StyledText>
    </>
  );
}

export default App;

注意事项 #

• 字体路径需确保正确：本地字体可放入public目录使用相对路径，或通过import导入字体文件后拼接路径
• 浏览器会自动缓存字体资源，重复定义@font-face不会触发重复加载
• 生产环境建议对字体文件进行压缩优化，提升加载速度

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