Opentype 具有跨浏览器兼容性

Question

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

下面的 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，直到浏览器的采用率赶上。但是，我将保留旧样式编号的 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;
}

Opentype 具有跨浏览器兼容性

Opentype features cross-browser compatibility

css

firefox

webkit

opentype