Firefox无法正确显示SF Distant Galaxy斜体字体其他浏览器正常

数据老陈

2026-8-29

Firefox下SF Distant Galaxy斜体字体不渲染的修复方法

问题根源

Chrome、Safari、Opera对本地字体的PostScript名称（比如你代码里的SFDistantGalaxy-Italic）做了兼容识别，哪怕写法不规范也能自动匹配到斜体版本；但Firefox严格遵循W3C字体匹配规范，以下两个机制会导致它 fallback 到常规体：

未加引号的非标准字体名（带连字符的PostScript名不属于标准家族名）会被解析器跳过
没有显式声明font-style: italic时，Firefox默认只会匹配同字体家族的常规（Regular）版本

AI导出SVG时自动生成的CSS没有做Firefox兼容处理，所以才会出现仅Firefox显示异常的情况，不是Firefox本身的bug。

修复方案

方案1：快速修正现有CSS（适合依赖本地安装字体的场景）

给所有字体名加上引号，同时显式声明斜体样式即可，修改后代码如下：

.Lithium-Text-Class, .V-Text-Class, .TEXT-2-Class {
   font-family: 'SFDistantGalaxy-Italic', 'SF Distant Galaxy', sans-serif;
   font-style: italic;
   font-weight: 400;
}

方案2：标准@font-face声明（全浏览器兼容，适合公开发布的网页）

如果页面是公开上线的，不要依赖用户本地是否安装了对应字体，手动声明字体规则可以彻底避免不同浏览器的识别差异：

/* 注册常规体 */
@font-face {
  font-family: 'SF Distant Galaxy';
  src: local('SF Distant Galaxy Regular'), local('SFDistantGalaxy');
  font-weight: 400;
  font-style: normal;
}
/* 注册斜体 */
@font-face {
  font-family: 'SF Distant Galaxy';
  src: local('SF Distant Galaxy Italic'), local('SFDistantGalaxy-Italic');
  font-weight: 400;
  font-style: italic;
}

/* 元素调用时直接指定家族名+斜体即可，不需要单独写斜体的PostScript名 */
.Lithium-Text-Class, .V-Text-Class, .TEXT-2-Class {
   font-family: 'SF Distant Galaxy', sans-serif;
   font-style: italic;
}