如何关闭本地字体以测试谷歌字体？答案

【问题标题】：How to turn off local fonts to test google fonts?如何关闭本地字体以测试谷歌字体？
【发布时间】：2016-01-17 06:40:35
【问题描述】：

现有技术：

有没有办法在任何浏览器中暂时禁用系统字体？

我能找到的唯一解决方案是将字体命名为不与本地字体冲突的名称。我不喜欢那个解决方案原因：

我宁愿用正确的名称来引用字体。
它不适用于通过样式表使用的内联字体，例如 Google 提供字体的方式。

那么，有人知道怎么做吗？

【问题讨论】：

1) 为什么？ @font-face { font-family: main; src: local(...); } 非常好，这意味着您不必仅仅因为您决定切换字体而更改一百万个 font-family 实例。事实上，这是一种很好的做法。 2) google 以多种方式提供字体，包括普通的 CSS <link rel="stylesheet">，这是迄今为止最容易使用的。
1) 以测试性能为例。

标签： css google-chrome firefox fonts google-font-api

【解决方案1】：

如果您使用的是 Mac，只需打开“字体簿”应用并禁用字体即可。

【讨论】：

如果您使用的是 Windows？

【解决方案2】：

从 Chrome 86 开始，您现在可以在 DevTools 中禁用本地字体。

打开开发者工具
点击右上角的三个点
选择更多工具 > 渲染
勾选禁用本地字体
刷新页面

这将忽略 CSS @font-face 规则中的所有 local(...) 源。

【讨论】：

不幸的是，在我阅读详细信息之前，这个 禁用本地字体 选项并没有达到我最初预期的效果。对于我的use case，我想停止使用本地计算机上安装的字体的 Chrome（或任何现代浏览器）：忽略已安装的字体。不是这个。

【解决方案3】：

我不会重命名font-family，而是在src 描述符中省略或注释掉local() 函数调用。没有它，浏览器将始终加载您的 url() 函数中指定的字体文件。

@font-face {
    font-family: "My Font";
    font-weight: 400;
    font-style: normal;
    src:
        /* --> local("My Font") <-- */
        url("/my-font.woff2") format("woff2"),
        url("/my-font.woff") format("woff")
}

【讨论】：