css - 使用@font-face src : local with fonts. com 网络字体

Question

讨论 here ，负担得起的 fonts.com 网络字体计划不允许通过 @font-family 直接嵌入字体，或者看起来......

我想知道这是否可行:

@font-face {
    font-family: 'Main';
    src: local('FoobarBk'), local('FoobarBk Regular');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Main';
    src: local('FoobarMd'), local('FoobarMd Regular');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Main';
    src: local('FoobarIt'), local('FoobarIt Regular');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Main';
    src: local('FoobarMdIt'), local('FoobarMdIt Regular');
    font-weight: normal;
    font-style: normal;
}

想法是，一旦 fonts.com 提供的脚本完成加载 FoobarBk、FoobarMd、FoobarIt 和 FoobarMdIt 字体，它们将作为本地字体(无需额外的页面加载)和任何指定 Main 的 CSS 样式可用 因为 font-family 会立即使用它们。

我怀疑这只是一厢情愿的想法，但我更希望有人以某种方式插话回答。

Answer 1

根据我的经验，此处的“本地”一词意味着用户已将字体安装到他们的操作系统中，而不仅仅是浏览器中的本地缓存文件。

对于您站点的新用户，您希望能够保证他们获得您的字体，因此通常“本地”字体指向不存在的引用，因此他们必须从您的网络服务器下载。这是为了防止用户使用与您的名称相同的 naff 字体，并且设计看起来很糟糕。

参见 smiley-face answer也在SO上

如果您处于受控环境中，您知道您可以信任客户端安装的字体(即它们安装了所有 Foobar 变体)，那么您的方法就可以工作。