如何在React项目中加载Avenir字体并解决字重不生效问题

核心原因 #

• 你使用的Google Fonts链接本身无效：Avenir是Linotype公司的付费商用字体，Google Fonts并未官方收录该字体，你填写的Avenir Web字体家族名无法被谷歌字体服务识别，返回的CSS里没有对应字重的字体文件配置，浏览器只能调用系统默认匹配的字体，仅能加载到基础字重，加粗时只能使用浏览器模拟的伪加粗效果，无法匹配真实的粗体字重。
• 链接使用http协议存在加载拦截问题：如果你的React项目是https协议部署，浏览器会拦截http协议的混合内容请求，导致即使有对应字体资源也无法正常加载，仅能使用默认的400字重字体。
• 字重匹配不一致：就算后续使用了正确的字体源，如果你CSS中设置的font-weight值和你引入的字体字重不对应，也会出现加粗不生效的问题。

解决方案 #

1. 替换合法的字体引入方式
   Avenir为付费字体，获取商用授权后，将对应字重的字体文件（推荐用woff2、woff格式，兼容性更好）放入项目public/static/fonts目录下，在全局CSS中通过@font-face手动引入所有需要的字重：

/* 引入所有需要的字重，保证font-family名称统一 */
@font-face {
  font-family: 'Avenir';
  src: url('/static/fonts/Avenir-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('/static/fonts/Avenir-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('/static/fonts/Avenir-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('/static/fonts/Avenir-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* 其余需要的800、900字重按上述格式补充即可 */

2. 检查协议和CSS配置

• 如果使用外部CDN字体链接，统一使用https协议开头，避免浏览器混合内容拦截
• 全局CSS中设置默认字体时优先匹配你定义的字体家族名：* { font-family: 'Avenir', sans-serif; }
• 加粗场景下设置的font-weight值必须和你引入的字重完全对应，比如引入了600字重就不要写font-weight: bold（默认对应700），要写font-weight: 600

3. 清除浏览器缓存后重新测试，避免旧的无效字体资源缓存影响效果。

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