如何为指定React组件正确应用Source Code Pro字体？

一、本地字体文件正确导入方案 #

1. 在项目内创建字体存放目录（如src/fonts），将下载好的Source Code Pro字体文件（.woff2/.ttf等格式）放入其中。
2. 在全局CSS文件（如src/index.css）或组件专属CSS文件中定义字体规则：

@font-face {
  font-family: 'Source Code Pro';
  src: url('./fonts/SourceCodePro-Regular.woff2') format('woff2'),
       url('./fonts/SourceCodePro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

注意根据实际文件路径调整url中的地址。
3. 在组件中通过sx属性指定字体，若组件内有嵌套元素，可通过通配器确保所有子元素继承字体：

<Box sx={{ 
  paddingBottom: '4%',
  '& *': {
    fontFamily: '"Source Code Pro", monospace'
  }
}}>
  <AppWindow id='AppWindow' />
</Box>

二、@fontsource正确配置方式 #

1. 先安装依赖包：

npm install @fontsource/source-code-pro

2. 在theme.js中配置字体并引入对应字重的样式文件：

import { createTheme } from '@mui/material/styles';
import '@fontsource/source-code-pro/300.css';
import '@fontsource/source-code-pro/400.css'; // 按需引入需要的字重

const theme = createTheme({
  typography: {
    customFont: '"Source Code Pro", monospace',
  }
});

export default theme;

3. 在组件中直接调用配置好的字体：

<Box sx={{ 
  paddingBottom: '4%',
  fontFamily: theme.typography.customFont,
  '& *': { fontFamily: inherit }
}}>
  <AppWindow id='AppWindow' />
</Box>

若之前配置无效，检查是否正确导入了对应字重的CSS，以及ThemeProvider是否正确包裹了整个应用。

三、局部引用谷歌字体避免全局影响 #

如果不想使用本地字体，又要避免全局字体被修改，可通过以下方式隔离字体作用范围：

1. 组件内动态插入字体链接，并通过CSS限定作用域：

import { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    const link = document.createElement('link');
    link.href = 'https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap';
    link.rel = 'stylesheet';
    document.head.appendChild(link);
    return () => document.head.removeChild(link);
  }, []);

  return (
    <Box sx={{ 
      paddingBottom: '4%',
      fontFamily: '"Source Code Pro", monospace',
      '& *': { fontFamily: inherit }
    }}>
      <AppWindow id='AppWindow' />
    </Box>
  );
};

export default YourComponent;

2. 或通过CSS的@import配合类名限定：

/* 组件专属CSS文件 */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

.source-code-pro-wrap * {
  font-family: 'Source Code Pro', monospace;
}

组件中使用类名：

import './YourComponent.css';

<Box className="source-code-pro-wrap" sx={{ paddingBottom: '4%' }}>
  <AppWindow id='AppWindow' />
</Box>

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