Create React App项目字体无法在iPhone显示的解决方法咨询

你的推测完全正确——本地安装的字体不会随项目部署到服务器，移动端设备没有该字体就会 fallback 到系统默认字体。下面是具体的解决步骤，适配你用的Material-UI makeStyles，以及Heroku/Netlify部署环境：

方法一：本地引入字体文件（推荐，可控性强） #

1. 准备字体文件

   • 下载PT Sans Caption的字体文件（优先选.woff2格式，兼容性好且体积小，同时可备上.woff作为降级选项）
   • 在项目src目录下新建fonts文件夹，把字体文件放入，示例目录结构：

     src/
       fonts/
         PTSansCaption-Regular.woff2
         PTSansCaption-Bold.woff2
         PTSansCaption-Regular.woff
         PTSansCaption-Bold.woff
     

2. 声明自定义字体

   • 方式一：全局CSS声明（比如在src/index.css中添加）：

     @font-face {
       font-family: 'PT Sans Caption';
       src: local('PT Sans Caption'),
            url('./fonts/PTSansCaption-Regular.woff2') format('woff2'),
            url('./fonts/PTSansCaption-Regular.woff') format('woff');
       font-weight: 400;
       font-style: normal;
       font-display: swap; /* 避免字体加载时出现空白，提升体验 */
     }
     
     @font-face {
       font-family: 'PT Sans Caption';
       src: local('PT Sans Caption'),
            url('./fonts/PTSansCaption-Bold.woff2') format('woff2'),
            url('./fonts/PTSansCaption-Bold.woff') format('woff');
       font-weight: 700;
       font-style: normal;
       font-display: swap;
     }
     

   • 方式二：在makeStyles中嵌入全局规则：

     const useStyles = makeStyles((theme) => ({
       '@global': {
         '@font-face': {
           fontFamily: 'PT Sans Caption',
           src: `local('PT Sans Caption'),
                 url(${require('./fonts/PTSansCaption-Regular.woff2')}) format('woff2'),
                 url(${require('./fonts/PTSansCaption-Regular.woff')}) format('woff')`,
           fontWeight: 400,
           fontStyle: 'normal',
           fontDisplay: 'swap'
         },
         '@font-face': {
           fontFamily: 'PT Sans Caption',
           src: `local('PT Sans Caption'),
                 url(${require('./fonts/PTSansCaption-Bold.woff2')}) format('woff2'),
                 url(${require('./fonts/PTSansCaption-Bold.woff')}) format('woff')`,
           fontWeight: 700,
           fontStyle: 'normal',
           fontDisplay: 'swap'
         }
       },
       homeHeader: {
         fontFamily: 'PT Sans Caption',
         // 按需指定字重：fontWeight: 400/700
       },
     }));
     

3. 部署验证
   Heroku和Netlify在构建项目时，会自动打包src目录下的字体文件，只要路径正确就不会有问题，无需额外配置。

方法二：使用CDN字体（更简便） #

如果不想管理本地字体文件，可以直接用CDN加载：

1. 在项目public/index.html的<head>标签中添加字体链接：

   <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap" rel="stylesheet">
   

2. 你的makeStyles代码无需修改，直接使用fontFamily: 'PT Sans Caption'即可，移动端会自动从CDN加载字体。

关键注意事项 #

• font-family的名称必须和@font-face中的声明完全一致，大小写敏感
• 使用font-display: swap可避免页面加载时出现字体闪烁（FOIT）
• 测试时建议用隐私模式打开页面，避免本地缓存干扰结果

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