首页 文章

为什么不在@ font-face，Font Squirrel中定义font-weight或font-style？

提问于
浏览 次
13

当我们定义@ 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声明来区分粗体和斜体变体？为什么要使用单独的字体系列？在某些浏览器中，他们是否对此功能有所了解（缺乏）支持？

css font-face

4 回答

  • 17

    By default ，Font-Squirrel执行此操作是为了增加对不遵循规范的用户代理（忽略 font-weight 和 font-style 的用户代理）的支持 .

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

    回复于
  • 0

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

    回复于
  • 9

    似乎Internet Explorer 8可能是那些不支持font-weight和font-style的“旧”用户代理之一

    我正在尝试使用@ 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 . 跨浏览器功能显然将成为最终解决方案的一部分 .

    回复于
  • 3

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

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

    回复于

相关问题