CSS，使用@supports 来检测@font-face 支持答案

【问题标题】：CSS, use @supports to detect @font-face supportCSS，使用@supports 来检测@font-face 支持
【发布时间】：2021-12-31 11:01:25
【问题描述】：

是否可以使用@supports来检查客户端的浏览器是否支持'@font-face？

我的目标是默认使用多个@font-face，如果不支持，则回退到另一个font-family 定义。

我尝试了以下方法（参见下面的代码）；它有效，但我想知道它是否合法和/或符合标准，以及它是否真的达到了我的预期。

/* Yes, I don't use an actual font-face, but it's irrelevant for the test */
.ff {
  font-family: sans-serif;
}

@supports not (@font-face) {
  .ff {
    font-family: serif;
  }
}

https://jsfiddle.net/idealtitude/5gxf2ojs/7/

任何想法，建议？谢谢！

【问题讨论】：

这在实践中是否必要？见caniuse.com/?search=font-face
@AHaworth 我也在问自己这个问题......但是，即使 font-face 得到广泛支持，我也不太可能担心，我仍然想用这种条件能力编写我的 CSS。我还考虑让用户选择切换字体和常规字体系列。
这是不必要的。 font-family 已经支持像 font-family: FakeFontName, sans-serif; 这样的 fallback 在这个例子中，如果你定义了 FakeFontName 的 font-face 并且浏览器不支持它，它将回退到 sans-serif。 developer.mozilla.org/en-US/docs/Web/CSS/font-family
@skyline3000 我认为这是解决我的问题的方法。简单、清晰并符合规范。谢谢！

标签： css font-face

【解决方案1】：

问题询问代码是否合法以及它是否符合您的预期。

嗯，它并没有达到你的预期。

如果你在我的浏览器（确实支持字体）上保留 not in 然后字体显示为衬线。

如果我删除 not 然后它显示为无衬线。即它似乎报告浏览器不支持字体。

.ff {
  font-family: sans-serif;
}

@supports (@font-face) {
  .ff {
    font-family: serif;
  }
}

&lt;div class="ff"&gt;What are you seeing here??&lt;/div&gt;

你可以做些什么来测试@font-face 是否被支持？我想一个简单的方法是加载一些带有字体规则的文本，该规则与您希望用作标准的字体非常不同，然后查看大小是否有任何不同。

【讨论】：

好建议！我很确定我的逻辑有问题，你帮我澄清了，谢谢！