Question

我正在尝试使用＆＃39; Plantin MT Pro＆＃39;的开放式功能。来自myfonts。更具体地说，我希望使用＆＃39; true＆＃39;小型帽子和旧式编号。通过＆＃39; true＆＃39;小型股，我的意思是如果可能的话，我不想通过字体变量选择器来模仿小型股。

以下css在Chrome和Opera中取得了成功，但Firefox和Safari并不成功（不确定为什么Safari不起作用，但Chrome确实如此，都是webkit？）。

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

目前这对我不起作用，任何有用的信息都会很棒。话虽如此，我也不确定为什么字体功能设置在每个浏览器中也不起作用，如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具有跨浏览器兼容性

1 个答案: