CSS font-family字体替换疑问：为何未安装的Helvetica被识别为Arial？

这种字体替换是Windows系统层面的字体映射机制导致的，和CSS规范无关，也不是浏览器自主制定的规则：

• Windows默认没有预装Helvetica字体，但为了兼容大量使用Helvetica的网页设计，系统内置了字体映射表。当请求Helvetica且本地未安装该字体时，系统会自动将其替换为Arial。
• 浏览器处理font-family列表时，会严格按顺序检查字体可用性。由于系统的映射机制让浏览器认为「Helvetica是可用的（实际返回Arial）」，因此会直接使用这个映射后的字体，不会继续往后匹配Segoe UI。

解决思路 #

如果希望优先使用Segoe UI，只需调整font-family的顺序，把Segoe UI放在前面：

span { font-family: 'Segoe UI', Helvetica; }

补充说明 #

CSS字体规范只定义了font-family的匹配顺序逻辑，至于「找不到字体时用什么替代」属于操作系统的负责范围，所以你在CSS规范文档里找不到相关内容。这种映射行为在Windows的Chromium系浏览器和Firefox中表现一致，因为它们都依赖系统的字体处理逻辑。

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