Google字体Nabla在iPhone显示为黑色，安卓设备显示正常求助

适配移动端时仅调整了字体大小，Google字体Nabla在安卓设备上正常显示为橙色，但所有iPhone的Safari和Chrome浏览器中显示为黑色。相关代码及截图如下：

引入Google字体的HTML代码 #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match Game</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Libre+Baskerville&family=Nabla&display=swap" rel="stylesheet">
</head>

CSS字体声明及移动端适配代码 #

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

@media (min-width: 319px) and (max-width: 480px) {
    h1{
        font-size: 3.5rem; 
    }

    #normal, #hard{
        font-size: 3rem;
    }

    .front{
        border-radius: 0.25rem;
    }

    .back, img{
        border-radius: 0rem;
    }

    #buttonContainer{
        margin-top: 50px;
    }
}

@media (min-width: 481px) and (max-width: 991px){
    h1{
        font-size: 5rem;
    }

    .front{
        border-radius: 0.5rem;
    }

    .back, img{
        border-radius: 0rem;
    }

    #buttonContainer{
        margin-top: 25px;
    }

    #normal, #hard{
        font-size: 3rem;
    }
}

@media (min-width: 992px){
    h1{
        margin: 0;
    }
}

MRT复现示例 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Nabla');
html {
  font: 80px 'Nabla';
  color-scheme: dark;
}

HTML代码 #

Test

显示异常截图 #

解决方案 #

Nabla是一款彩色可变字体，iOS浏览器对彩色字体的渲染存在兼容性问题，可通过以下方式修复：

1. 明确指定字体的彩色变体
   在Google Fonts的引入链接中添加&font-variation-settings='FILL'1参数，强制加载彩色版本：

   <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Libre+Baskerville&family=Nabla&font-variation-settings='FILL'1&display=swap" rel="stylesheet">
   

2. 添加CSS属性强制启用彩色渲染
   在使用Nabla字体的选择器中添加font-variation-settings: 'FILL' 1;，确保iOS浏览器识别彩色变体：

   h1, p, #playAgain, button{
       font-family: 'Nabla', sans-serif !important;
       font-variation-settings: 'FILL' 1;
   }
   

3. 检查color-scheme设置
   如果页面设置了color-scheme: dark，iOS可能会自动切换字体颜色为适配暗色模式的黑色，可尝试显式设置字体颜色为unset或直接指定橙色：

   h1, p, #playAgain, button{
       color: unset;
       /* 或直接指定颜色：color: #ff9800; */
   }
   

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