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

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";
}

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

我更喜欢的方法是合并默认值，如下所示@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

它\xe2\x80\x99s可能是你尝试过的方式，但Chrome和IE不\xe2\x80\x99不支持它；火狐确实如此。

\n\n

CSS 字体模块级别 3 有点晦涩，因为它不包含内部允许内容的正式描述@font-face，但由于第 4 节字体资源似乎旨在描述 \n@font-face并且它定义font-feature-settings为描述符，因此您的方法应该有效。它也在MDN 信息@font-face中进行了描述。然而，W3C CSS 验证器拒绝了它，可能是由于规范（候选推荐）的模糊性。

\n\n

我使用 Google 字体 Source Sans Pro 和该ordn功能对此进行了测试。虽然除非您在本地正确安装了 Source Sans Pro，否则以下代码不会运行，但它以更简单的设置说明了该方法：

\n\n

<style>\n@font-face {\n    font-family: Source Sans Pro;\n    src: url(\'sourcesanspro-regular-webfont.eot\');\n    src: url(\'sourcesanspro-regular-webfont.eot?#iefix\')  \n      format(\'embedded-opentype\'),\n    url(\'sourcesanspro-regular-webfont.woff\') format(\'woff\'),\n    url(\'sourcesanspro-regular-webfont.ttf\') format(\'truetype\');\n    font-weight: normal;\n    font-style: normal;\n    -webkit-font-feature-settings: "ordn";\n       -moz-font-feature-settings: "ordn";\n         -o-font-feature-settings: "ordn";\n            font-feature-settings: "ordn";   \n}\n.no-ordn {\n    -webkit-font-feature-settings: "ordn" 0;\n       -moz-font-feature-settings: "ordn" 0;\n         -o-font-feature-settings: "ordn" 0;\n            font-feature-settings: "ordn" 0;   \n}\n.ordn {\n    -webkit-font-feature-settings: "ordn";\n       -moz-font-feature-settings: "ordn";\n         -o-font-feature-settings: "ordn";\n            font-feature-settings: "ordn";   \n}\np {\n    font-family: Source Sans Pro;\n}\n\n</style>\n<p>1st 2nd 3rd 4th\n<p class=no-ordn>1st 2nd 3rd 4th\n<p class=ordn>1st 2nd 3rd 4th\n

\n\n

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

\n