css - Opentype 具有跨浏览器兼容性

Question

我正在尝试利用 myfonts 中“Plantin MT Pro”的开放式功能。更具体地说，我希望使用“真正的”小型大写字母和旧式编号。所谓“真正的”小型大写字母，我的意思是如果可能，我不希望通过字体变体选择器模仿小型大写字母。

下面的 css 在 Chrome 和 Opera 中取得了成功，但在 Firefox 和 Safari 中却没有(不确定为什么 Safari 不起作用但 Chrome 可以，两者都是 webkit？)。

使用下面的 CSS 似乎无法根据当前支持实现我想要的效果，但是是否可以针对特定浏览器在必要时模仿小型大写字母作为后备？即 -webkit-font-variant: small-caps;

目前这对我不起作用，任何有用的信息都会很棒。话虽如此，我也不确定为什么 font-feature-settings 在每个浏览器中也不起作用，正如 http://clagnut.com/sandbox/css3/ 所建议的那样

查看我的 fiddle here ，并在提到的 4 种浏览器中进行测试。

谢谢。

p {
  font-family: PlantinMTPro-Light, Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-style: normal;
  font-kerning: normal;
  font-size: 0.9em;
  letter-spacing: 1px;
  line-height: 1.8em;
  text-transform: lowercase;
  -moz-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
  -moz-font-feature-settings: "smcp=1, c2sc=1, onum=1, kern=1";
  -ms-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
  -o-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
  -webkit-font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
  font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1, "kern" 1;
}

Answer 1

不幸的是，目前的支持似乎无法实现(Safari 在这方面令人惊讶地落后)，所以我不得不决定使用 font-feature-settings 用于工作的小型大写字母部分。我将改为使用 font-variant: small-caps 直到浏览器的采用率 catch 来。但是，我将保留旧样式编号的 font-feature-settings，以便在支持时显示。

我希望这对某些人有用，我期待将来能够更充分地使用此功能。

p {
    font-family: PlantinMTPro-Light, Georgia, "Times New Roman", Times, serif;
    font-weight: 500;
    font-style: normal;
    font-kerning: normal;
    font-variant: small-caps; /* Used instead of font-feature-settings to improve x-browser compatibility */
    font-size: 0.95em;
    font-style: normal;
    font-kerning: normal;
    letter-spacing: 1px;
    line-height: 1.8em;
    text-transform: lowercase;
    -moz-font-feature-settings: "onum" 1, "kern" 1; 
    -moz-font-feature-settings: "onum=1, kern=1"; 
    -ms-font-feature-settings: "onum" 1, "kern" 1; 
    -o-font-feature-settings: "onum" 1, "kern" 1; 
    -webkit-font-feature-settings: "onum" 1, "kern" 1; 
    font-feature-settings: "onum" 1, "kern" 1;
}