代码之家  ›  专栏  ›  技术社区  ›  Marcin Szwarc

CSS字体家族中的字体是如何替换的

  •  1
  • Marcin Szwarc  · 技术社区  · 4 月前

    最近,我偶然发现了这样一段代码:

    span { font-family: Helvetica, 'Segoe UI'; }
    
    <span>Lorem ipsum</span>
    

    我的电脑上没有Helvetica,但有Segoe UI,所以预期的结果是文本将使用Segoe呈现。但是,使用了Arial(已在DevTools中验证)。

    玩了一段时间后,我确信我的浏览器会 Helvetica 入口就好像它是 Arial ,因此字体选择过程在不存在的字体处停止。

    它是如何决定的?有字体替换列表吗?我在里面找不到这样的东西 CSS Fonts Module spec .

    它发生在Windows 11上的Chromium Edge和Firefox中。

    2 回复  |  直到 4 月前
        1
  •  0
  •   Jeff Zeitlin    4 月前

    根据您对我对这个问题的评论的回复,您在注册表中有一些字体替换条目,其中之一是用Arial替换Helvetica的任何请求。这在 this posting on Microsoft's Tech Community ; 基本上,注册表中有以下条目 HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes 当请求某些与您没有的假定相似的字体时,使应用程序使用您有的字体。

        2
  •  0
  •   Calvin    4 月前

    在您描述的场景中,尽管Segoe UI可用并在CSS字体堆栈中列出,但浏览器似乎用Arial代替了Helvetica,您在web浏览器中遇到了通常所说的字体回退或字体替换行为。这种行为在CSS字体模块中没有直接详细说明,但它是浏览器在不同操作系统上处理字体渲染的一部分,特别是在找不到指定字体的情况下。 span{字体家族:“Segoe UI”,Arial,无衬线字体;}