Google Font Montserrat字体在Firefox 88.0中颜色过浅的解决咨询

问题根源 #

旧版Firefox（低于100）在Ubuntu系统下，对Google Fonts传统@import语法的字体权重解析、系统字体渲染适配存在兼容性bug，导致字体显示过淡。

解决方案（不破坏原有粗体/斜体样式） #

1. 升级@import语法为规范格式 #

将原有导入语句替换为CSS2标准的权重声明格式，并添加display: swap，帮助旧版Firefox正确识别字体权重：

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

注：css2的wght@xxx权重写法比旧版逗号分隔格式，更易被低版本Firefox解析，display: swap还能优化字体加载时的 fallback 体验。

2. 强制设置字体渲染优化属性 #

针对Ubuntu系统的Firefox，添加以下CSS属性优化字体显示，避免颜色过浅：

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

这些属性仅优化渲染效果，不会改变原有粗体、斜体的样式定义。

3. 确保字体权重严格匹配 #

检查页面中所有使用粗体/半粗体的元素，确保font-weight值与你导入的Montserrat权重（400/500/600/700）完全一致，避免浏览器自动模拟粗体导致的显示异常：

/* 示例：菜单粗体使用导入的700权重 */
.nav-menu {
  font-weight: 700;
}

4. 本地字体引入备选方案（可选） #

如果上述方法无效，可下载对应权重的Montserrat字体文件部署到本地服务器，用@font-face直接引入，完全绕过Google Fonts的加载问题：

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Montserrat-Regular.woff2') format('woff2'),
       url('/fonts/Montserrat-Regular.woff') format('woff');
}
/* 依次添加500、600、700权重的@font-face声明 */

内容的提问来源于stack exchange，提问作者Mittul At TechnoBrave