Ubuntu升级后Firefox无法识别Vue应用本地自定义字体

我开发了一个VueJS应用，通过以下方式加载自定义字体：

@font-face {
  font-family: 'Caviar Dreams';
  src: local('Caviar Dreams'), url(~@/assets/fonts/CaviarDreams.ttf) format('truetype');
}

此前该配置一直正常工作，但将开发电脑从Ubuntu 20.04升级至22.04并更新Firefox版本后，字体无法正常加载。奇怪的是，升级Chrome后该字体仍能正常显示。
我尝试清理Firefox字体缓存但无效，移除CSS中的local('Caviar Dreams')部分后字体恢复正常，因此怀疑问题出在本地字体上。部分本地字体可正常使用，部分则不行。
我希望保留本地字体以避免用户重复下载（为环保考虑），请问如何让自定义字体在Firefox中恢复正常？问题原因是什么？

问题原因 #

1. Ubuntu 22.04字体系统变更：Ubuntu 22.04更新了fontconfig规则，部分字体的本地注册名称（比如空格、大小写、别名）发生变化，Firefox新版本严格遵循这套规则，导致local('Caviar Dreams')无法匹配到实际安装的字体。
2. Firefox字体匹配逻辑收紧：新版本Firefox对local()的匹配做了更严格的校验，不再支持模糊匹配；而Chrome仍保留一定的容错机制，这是两者表现差异的核心。
3. 本地字体元数据不匹配：部分字体安装后，内部的字体名称（Font Name）和你在local()中指定的名称不一致，Ubuntu 20.04的fontconfig会忽略这类差异，但22.04版本不再兼容。

解决方法 #

1. 确认本地字体的真实名称 #

在Ubuntu终端执行命令，查找Caviar Dreams的真实注册名称：

fc-list | grep -i "caviar"

输出结果会显示字体的真实名称（比如可能是CaviarDreams不带空格，或Caviar Dreams Regular），将local()中的名称替换为这个真实值即可。

2. 多名称兼容匹配 #

为覆盖不同的字体命名变体，在local()中添加多个可能的名称：

@font-face {
  font-family: 'Caviar Dreams';
  src: local('Caviar Dreams'), local('CaviarDreams'), local('Caviar Dreams Regular'),
       url(~@/assets/fonts/CaviarDreams.ttf) format('truetype');
}

3. 调整fontconfig规则（临时兼容） #

若不想修改代码，可在用户目录创建~/.config/fontconfig/conf.d/99-caviar-dreams.conf文件，添加以下内容强制名称匹配：

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <match target="pattern">
    <test name="family" qual="any">
      <string>Caviar Dreams</string>
    </test>
    <edit name="family" mode="assign" binding="strong">
      <string>CaviarDreams</string>
    </edit>
  </match>
</fontconfig>

执行fc-cache -fv刷新字体缓存后，Firefox即可正确匹配本地字体。

4. 优化加载兜底逻辑 #

保留local()的同时，添加font-display: swap确保本地匹配失败时，立即加载线上字体，避免页面无字体显示：

@font-face {
  font-family: 'Caviar Dreams';
  src: local('Caviar Dreams'), url(~@/assets/fonts/CaviarDreams.ttf) format('truetype');
  font-display: swap;
}

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