CSS动画font-feature-settings在Safari中无法生效的问题

问题描述 #

我尝试用CSS关键帧动画切换字体的font-feature-settings属性，动画外的该属性在Chrome和Safari都正常生效，动画本身在Safari也能运行（比如颜色变化正常），但唯独font-feature-settings的切换在Safari里失效。

原始CSS代码 #

.animate {
  animation: animateFont 2s linear infinite;
}

@keyframes animateFont {
  0% {
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
    -moz-font-feature-settings:    "ss01" 1;
    -ms-font-feature-settings:     "ss01" 1;
    color: white;
  }
  50% {
    font-feature-settings: "ss02" 1;
    -webkit-font-feature-settings: "ss02" 1;
    -moz-font-feature-settings:    "ss02" 1;
    -ms-font-feature-settings:     "ss02" 1;
    color: red;
  }
  100% {
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
    -moz-font-feature-settings:    "ss01" 1;
    -ms-font-feature-settings:     "ss01" 1;
    color: white;
  }
}

补充失效示例（Chrome有效，Safari无效） #

CSS代码

.animate-font {
  animation: animateFont 2s linear infinite;
  font-size: 100px;
}

@keyframes animateFont {
  0% {
    font-feature-settings: "smcp" 1;
    -webkit-font-feature-settings: "smcp" 1;
    -moz-font-feature-settings: "smcp" 1;
    -ms-font-feature-settings: "smcp" 1;
  }
  50% {
    font-feature-settings: "liga" 0;
    -webkit-font-feature-settings: "liga" 0;
    -moz-font-feature-settings: "liga" 0;
    -ms-font-feature-settings: "liga" 0;
  }
  100% {
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
    -moz-font-feature-settings: "ss01" 1;
    -ms-font-feature-settings: "ss01" 1;
  }
}

HTML代码

<div class="animate-font">
  fi
</div>

可行的CSS解决办法 #

Safari对font-feature-settings的动画支持存在底层限制，目前可通过以下两种方式解决：

方法1：使用标准化font-variant系列属性替代（推荐） #

font-feature-settings是低层级兼容属性，Safari对其动画支持不佳，但对标准化的font-variant系列属性支持更完善。针对不同的字体特征，替换规则如下：

• 连字控制："liga" 0 → font-variant-ligatures: none;
• 小型大写："smcp" 1 → font-variant-caps: small-caps;
• 风格集（ss01/ss02）：使用font-variant-alternates: styleset(ss01);，需先在@font-face中声明对应特征。

修改后的示例代码：

@font-face {
  font-family: 'YourFont';
  src: url('your-font.woff2') format('woff2');
  font-features: 'ss01', 'ss02'; /* 提前声明字体支持的风格集 */
}

.animate-font {
  font-family: 'YourFont';
  animation: animateFont 2s linear infinite;
  font-size: 100px;
}

@keyframes animateFont {
  0% {
    font-variant-caps: small-caps;
  }
  50% {
    font-variant-ligatures: none;
  }
  100% {
    font-variant-alternates: styleset(ss01);
  }
}

方法2：元素显隐切换模拟动画 #

如果无法使用font-variant系列属性，可通过控制多个含不同font-feature-settings的子元素显隐，模拟字体特征切换：

HTML结构

<div class="animate-font">
  <span class="feat-ss01">fi</span>
  <span class="feat-liga-off">fi</span>
  <span class="feat-ss02">fi</span>
</div>

CSS代码

.animate-font {
  position: relative;
  font-size: 100px;
}
.animate-font span {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: fadeCycle 2s linear infinite;
}
.feat-ss01 {
  font-feature-settings: "ss01" 1;
  -webkit-font-feature-settings: "ss01" 1;
}
.feat-liga-off {
  font-feature-settings: "liga" 0;
  -webkit-font-feature-settings: "liga" 0;
  animation-delay: 0.66s;
}
.feat-ss02 {
  font-feature-settings: "ss02" 1;
  -webkit-font-feature-settings: "ss02" 1;
  animation-delay: 1.32s;
}
@keyframes fadeCycle {
  0%, 32% { opacity: 1; }
  33%, 100% { opacity: 0; }
}

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