css - 在浏览器中使用 OpenType 字体

Question

我想使用的特定字体种类(带连字)只能作为 OpenType 使用。

我正在尝试确定哪些浏览器能够正确显示它，以及我应该如何将它添加到 CSS。

我从 2012 年 7 月找到这篇文章，其中有 Paul Irish 等人的贡献，表明它可能是权威的:

http://www.typotheque.com/articles/opentype_features_in_web_browsers

但我不明白它在 OpenType 字体和 OpenType 功能之间的区别:

But while all modern browsers can display OpenType *fonts*, only Firefox 
(since version 4) [1], Internet Explorer 10 (preview version)[2] and 
the latest versions of Google Chrome[12] are currently able to display 
OpenType *features*. 

所以:

1. 我可以在现代浏览器中使用这种 OpenType 字体吗？ OpenType 字体和功能之间有什么区别？我希望能够显示 ASCII 字符和连字。
2. 我应该如何在 CSS 中实际包含此 OpenType 字体？

Answer 1

在浏览器中使用您的字体(您可以合法用作可下载字体的字体)的实用方法是使用像 FontSquirrel 这样的服务 @font-face Generator创建所需的不同字体格式并使用它生成的 CSS 代码，自行决定(如果您使用斜体、粗体或任何其他非常规字体，可能需要进行调整)。

假设字体最初有连字定义，并且转换器保留了信息(转换后需要运行一些测试)，现代版本的 Firefox 将默认使用“标准”连字。要让 Chrome 和 Safari 使用它们，请添加 CSS 声明

text-rendering: optimizeLegibility

(适用于应使用连字呈现的任何元素)，并涵盖 IE 10，还添加

-ms-font-feature-settings: "liga";

为了安全起见，还要添加建议的标准设置:

font-feature-settings: "liga";

我认为这会为您提供现在或不久的将来所能得到的一切。

如果字体包含上下文 (clig)、随意 (dlig) 或历史 (hlig) 连字的定义，您可以启用它们在某些浏览器上。例如，除了标准连字之外，以下内容还启用了自由连字:

-ms-font-feature-settings: "liga", "dlig";
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";

您可以使用 Google web font 测试这些Source Sans Pro，它具有“ff”和“ft”的标准连字(至少在足够大的字体大小下可与非连字渲染区分开来)。

从理论上讲，OpenType 是一种规范和一种字体格式，它允许将排版信息嵌入字体文件等。浏览器可能支持该格式但不支持使用嵌入信息。