Question

我有以下HTML + CSS源代码。我希望它使用高级的otf功能，但样式集功能不起作用。

<style>
body { font-family: source sans pro; font-size:12px }
.advotf { -moz-font-feature-settings: "ss01" 1; -moz-font-feature-settings: "onum" 1; }
</style>
<body>
<p>Regular 1234567890</p>
<p class="advotf">advanced 1234567890</p>
</body>

此外，包含这些功能的计算机上的免费字体无论如何都无法正常工作。

Answer 1

涉及到几个问题：

Support to OpenType features是有限的，要获得最佳覆盖率，除了-webkit-之外，您应该使用-moz-前缀版本和（对于IE）非前缀版本前缀版本。
属性设置不是累积的。根据一般CSS原则，当一个规则包含属性的多个设置时，只有最后一个设置生效。您需要将设置合并为一个声明。
虽然Source Sans Pro具有多个OpenType功能，但Google托管版本不支持它们。这是Google字体的一般问题。
虽然FontSquirrel @font-face generator具有启用OpenType功能的专家设置，但这并不意味着启用它们以用于CSS属性。相反，他们将设置硬连接到字体文件中。因此，您可以为启用了onum的旧版数字生成Source Sans Pro的字体文件（旧式数字），但这些文件使用旧式数字。为不同的设置生成不同的字体文件可以解决这个问题，但它会相当尴尬。也许有一个字体文件生成器真正支持OpenType功能，但我还没有遇到过一个。

您可以做的是使用托管在您自己的服务器上的.ttf文件。也就是说，下载您将使用的所有字体的.ttf文件，将它们上传到您的服务器上，并在@font-face规则中引用它们。不利的一面是，Source Sans Pro根本不会用于缺少support to .ttf可下载字体的浏览器，最重要的是IE 8及更早版本（和Android 2.1）。也许更重要的是，渲染质量可能比使用其他字体格式（如.wof。

演示，使用单个（常规）字体：

<!doctype html>
<style>
body { font-size: 18pt }
@font-face {
    font-family: 'Source Sans Pro';
    src: url('sourcesanspro-regular-webfont.ttf') format('truetype');
}
p { 
    font-family: 'Source Sans Pro', sans-serif;
}
.otf {
    -moz-font-feature-settings: "ss01" 1, "onum" 1;
    -webkit-font-feature-settings: "ss01" 1, "onum" 1;
    font-feature-settings: "ss01" 1, "onum" 1;
}
</style>
<p>Hello world! Look at my l’s and numbers: 1234567890.</p>
<p class=otf>Hello world! Look at my l’s and numbers: 1234567890. (OTF enabled)</p>

CSS高级OTF功能不起作用

1 个答案: