如何设置默认字体功能设置？

Question

如何设置每种字体的默认字体功能设置？

我在当前项目中使用了两种不同的字体，并希望在它们上启用字体功能设置。 目前我必须通过* 选择器来做到这一点：

*, *: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";
}

到目前为止一切顺利；这样，我将字距调整、连字和比例数字设置为默认值。问题是另一种风格集。 我想在我的 one 字体的每个实例上都有这个。另一种字体有另一种风格，我不想使用。

我的首选方法是在 @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 中对此进行了测试，但它不起作用。有没有办法为每种字体声明默认的字体功能设置？

Answer 1

你试过的方法是可以的，但是Chrome和IE都不支持； Firefox 可以。

CSS Fonts Module Level 3 有点晦涩，因为它不包含对 @font-face 中允许的内容的正式描述，但由于第 4 节 Font Resources 似乎是为了描述 @font-face 并将 font-feature-settings 定义为描述符，您的方法应该有效。它还在MDN info on @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

第一段应该用字母作为上标字形来拍摄 1st 2nd 4th ，这就是在 Firefox 中发生的情况。第二段仅用于测试字体上设置的字体功能是否可以在某些元素的普通 CSS 中被覆盖。第三段用于测试浏览器是否完全支持字体功能。