为啥不在@font-face, Font Squirrel 中定义字体粗细或字体样式？

Posted 2023-03-06

【中文标题】为啥不在@font-face, Font Squirrel 中定义字体粗细或字体样式？

【英文标题】：Why not define font-weight or font-style in @font-face, Font Squirrel?为什么不在@font-face, Font Squirrel 中定义字体粗细或字体样式？

【发布时间】：2011-04-17 06:33:44

【问题描述】：

当我们定义@font-face 样式时，我们可以定义所引用的文件是用于字体的粗体、斜体还是粗斜体版本，正如这个 SO 问题中所讨论的：

How to add multiple font files for the same font?

例子：

@font-face 
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;


@font-face 
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;

但是，Font Squirrel 不会以这种方式生成 @font-face 套件。他们改为这样做：

@font-face 
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;


@font-face 
    font-family: 'FontinSansBold';
    src: local('☺'), url('fontin_sans_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

这意味着在我们的 CSS 文件中我们必须这样做：

h2 
    font-family: 'FontinSansBold', Verdana, sans-serif;
    font-weight: normal;

为什么 Font Squirrel 不使用 font-weight 和 font-style 声明来区分粗体和斜体变体？为什么要使用单独的字体系列？他们是否知道某些浏览器对此功能的（缺乏）支持？

【问题讨论】：

投票关闭并转为网站管理员。

【参考方案1】：

默认情况下，Font-Squirrel 这样做是为了增加对不遵循规范的用户代理的支持（那些忽略 font-weight 和 font-style 的用户代理）。

如果您不关心那些过时的用户代理，您可以启用@font-face 套件生成器的专家部分中提供的“样式链接”选项。请注意，IE8 及以下版本会忽略编号为 font-weight 的值，仅支持 normal 和 bold（以及对应的 400、700 权重值）。

【讨论】：

谢谢，安德鲁。很高兴知道该选项在他们的设置中。这个问题会影响我编写 CSS 的方式。

澄清一下，我认为这不完全是因为 IE8（及以下？）不支持字体粗细/字体样式，而是 IE8 不支持字体的多个字体面的事实家庭。因此，在您的示例中，IE8 只会采用第一个 FontinSans 声明，并使用假粗体而不是正确的粗体自定义字体。它通常最终看起来很可怕......这就是为什么存在这种不同的字体系列名称解决方法的原因。另请注意，如果您执行 h2 font-family: 'FontinSansBold'; font-weight:bold;，它也会应用人造粗体，这又看起来像废话。

【参考方案2】：

它确实涉及在字体内部四处寻找以确定字体是粗体还是斜体。并且必须在字体内设置某些位，以便 IE 获取样式链接。大多数粗体/斜体字体都设置了这些位，但不是全部。我们正在努力使其更加自动化。

【参考方案3】：

似乎 Internet Explorer 8 可能是那些不支持字体粗细和字体样式的“旧”用户代理之一

我正在尝试使用 @font-face 和 font-family 自动设置粗体/斜体/粗体。

到目前为止，我的尝试一无所获。这是一个演示问题的页面。

http://clearimageonline.com/apps/playground/fonts/test_IE.html

这里有人遇到过这个问题并有一个适用于 IE8 的解决方案吗？

---

我这周的大部分时间都在搜索和摆弄这个问题的答案。看来 IE8 不允许我这样做。

这是一个建议的解决方法（非常丑陋的解决方法）......

http://clearimageonline.com/apps/playground/fonts/proposed_IE.html

这些测试页面仅适用于 Internet Explorer。此测试仅限于 IE。跨浏览器功能显然会成为最终解决方案的一部分。

【参考方案4】：

使用默认 FontSquirrel 方法的问题是，如果加载备用字体，所有权重都会丢失，因为它们都设置为正常。我认为样式链接是最好的方法。

如果您担心 IE8 用户，您可以使用条件 css。