Nabla字体在iPhone设备上填充颜色异常问题求助

问题现象 #

Nabla字体在iPhone的Safari和Chrome浏览器中无法正确显示自带的橙色填充色（实际显示为非预期的单色），但在Android设备及桌面端显示正常。仅在适配移动端时调整了字体大小，未修改任何颜色相关样式：

• 错误显示：字体未呈现橙色填充
• 预期显示：字体为橙色填充的样式

可能原因 #

Nabla是Google Fonts提供的COLRv1格式彩色字体，iOS平台的WebKit内核浏览器（包括Safari和iOS版Chrome）对该格式的彩色字体支持需要明确启用字体自带颜色，默认渲染策略可能会忽略字体内置色彩，导致仅显示单色。

解决方案 #

1. 启用字体自带颜色 #

在使用Nabla字体的CSS选择器中添加 color: auto，强制浏览器使用字体本身内置的颜色，而非继承或指定的CSS颜色：

h1, p, #playAgain, button{
    font-family: 'Nabla', sans-serif !important;
    color: auto; /* 启用字体自带彩色渲染 */
}

2. 排除外部样式干扰 #

若存在全局CSS重置或父元素的color属性意外覆盖，可配合color: unset确保没有外部样式影响：

h1, p, #playAgain, button{
    font-family: 'Nabla', sans-serif !important;
    color: unset;
    color: auto;
}

3. 优化字体加载（可选） #

修改Google Fonts引入链接，添加text参数仅加载页面需要的字符，减少加载量同时降低渲染异常概率：

<!-- 原引入链接 -->
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Libre+Baskerville&family=Nabla&display=swap" rel="stylesheet">

<!-- 优化后：仅加载页面用到的字符示例 -->
<link href="https://fonts.googleapis.com/css2?family=Nabla&text=MatchGamePLAYAGAINNORMALHARD&display=swap" rel="stylesheet">

验证效果 #

修改后在iPhone的Safari和Chrome中测试，字体应显示为自带的橙色填充，与桌面端、Android设备效果一致。

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