如何设置默认字体特性设置？

Question

如何设置默认字体特性设置？

5

如何针对每个字体设置默认字体特性？

我正在使用两种不同的字体进行项目开发，并希望在这两种字体上启用字体特性设置。目前，我必须通过*选择器来完成此操作：

*, *:before, *:after {
  -webkit-font-feature-settings: "kern", "liga", "pnum" "ss01";
     -moz-font-feature-settings: "kern", "liga", "pnum" "ss01";
      -ms-font-feature-settings: "kern", "liga", "pnum" "ss01";
          font-feature-settings: "kern", "liga", "pnum" "ss01";
}

到目前为止，一切顺利；我已经将字间距、连字和比例数字设置为默认值。问题在于备用样式集。其中的一个字体实例我想要使用此样式集，而另一个字体有另一种样式集，我不想使用它。

我希望在@font-face中包含默认值，这是我的首选方法：

@font-face {
  font-family: 'FFDin';
  font-weight: normal;
  font-style: normal;

  -webkit-font-feature-settings: "kern", "liga", "pnum" "ss01";
     -moz-font-feature-settings: "kern", "liga", "pnum" "ss01";
      -ms-font-feature-settings: "kern", "liga", "pnum" "ss01";
          font-feature-settings: "kern", "liga", "pnum" "ss01";

  src: url("fonts/DINWeb-Light.eot");
  src: url("fonts/DINWeb-Light.eot?#iefix") format("embedded-opentype"),
       url("fonts/DINWeb-Light.woff") format("woff"),
       url("fonts/DINWeb-Light.ttf") format("truetype");
}

我已经在Chrome中测试过了，但是它不起作用。是否有任何方法可以针对每种字体声明默认的字体特征设置？

- Afterlame

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

你尝试的方法是可行的，但Chrome和IE不支持它；Firefox可以。

CSS Fonts Module Level 3有点晦涩，因为它没有正式描述@font-face内允许什么，但由于第4节Font Resources似乎旨在描述@font-face并将font-feature-settings定义为描述符，你的方法应该有效。这也在MDN关于@font-face的信息中描述。然而，W3C CSS验证器拒绝它，可能是由于规范的晦涩（候选推荐）。

我使用Google字体Source Sans Pro和ordn特性进行了测试。虽然以下代码只有在本地适当安装Source Sans Pro时才能运行，但它在更简单的环境中说明了这种方法：

<style>
@font-face {
    font-family: Source Sans Pro;
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix')  
      format('embedded-opentype'),
    url('sourcesanspro-regular-webfont.woff') format('woff'),
    url('sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    -webkit-font-feature-settings: "ordn";
       -moz-font-feature-settings: "ordn";
         -o-font-feature-settings: "ordn";
            font-feature-settings: "ordn";   
}
.no-ordn {
    -webkit-font-feature-settings: "ordn" 0;
       -moz-font-feature-settings: "ordn" 0;
         -o-font-feature-settings: "ordn" 0;
            font-feature-settings: "ordn" 0;   
}
.ordn {
    -webkit-font-feature-settings: "ordn";
       -moz-font-feature-settings: "ordn";
         -o-font-feature-settings: "ordn";
            font-feature-settings: "ordn";   
}
p {
    font-family: Source Sans Pro;
}

</style>
<p>1st 2nd 3rd 4th
<p class=no-ordn>1st 2nd 3rd 4th
<p class=ordn>1st 2nd 3rd 4th

第一段应该用字母作为上标字形显示1、2、4，并且在Firefox中会出现这种情况。第二段只是为了测试某个字体设置的字体特征是否可以在某些元素的普通CSS中被覆盖。第三段是为了测试浏览器是否支持字体特征。