javascript - 控制字体何时下载字体

Question

据我了解，font-face 会立即下载字体，然后无论何时使用该字体，它都会应用它。我的“问题”是大多数计算机都安装了 Century Gothic，所以我不想浪费时间下载字体（这实际上不是 Century Gothic，它是一种看起来相似的替代品），如果他们已经拥有它的话。

我的问题是，是否可以控制@font-face 何时下载实际字体？还是只在第一次使用时下载？我目前能想到的唯一选择是运行字体测试以查看是否安装了 Century Gothic（使用 JavaScript），然后是否没有在页面中注入新样式。

score 2 · Accepted Answer

您应该设置一个字体系列列表，浏览器将使用第一个可用的字体系列。
因此，如果您设置font-family: 'Century Gothic', 'Your Other Font'，则只有在 Century Gothic 不可用时才会使用其他字体。

该页面表示@font-face 没有实际使用的规则，将不会被下载：

事实证明，如果您使用 @font-face 但从未应用该字体系列，则不会下载该字体。相当聪明，浏览器

score 1 · Accepted Answer

也许你可以使用local('Century Gothic')？这将使用系统的字体，如果它存在的话。

本地值告诉浏览器在尝试从远处加载之前检查访问者计算机上的字体。

因此，如果访问者的计算机有该字体，则不会下载该字体。

score 0 · Accepted Answer

感谢 jcsanyi 澄清字体系统的工作原理。考虑到这一点，我能够做一个备份。我用以下方式导入了它：

@font-face {
    font-family: CenturyGothicFallback;
    src: url('/Resources/Avant Garde Book BT.ttf');
}

然后我应用它：

font-family:Century Gothic,'Century Gothic',CenturyGothicFallback,Arial,sans-serif;

我使用的字体是：http ://www.911fonts.com/font-download/download_AvantGardeBkBTBook_846.htm它看起来几乎与 Century Gothic 完全相同。

3 回答 3