在浏览器中使用OpenType字体

时间:2012-11-27 16:56:18

标签: css fonts cross-browser opentype

我想使用的特定字体种类(带有连字)仅作为OpenType提供。

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

我从2012年7月开始发现这篇文章,保罗·爱尔兰等人的贡献,暗示它可能具有权威性:

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字体?

3 个答案:

答案 0 :(得分:4)

在浏览器中使用您的字体(可以合法地用作可下载字体的字体)的实用方法是使用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是规范和字体格式,允许嵌入字体文件的印刷信息等。浏览器可以支持该格式,而不支持使用嵌入信息。

答案 1 :(得分:0)

我认为OpenType功能可以使用OpenType字体中字符之间的连字。这是浏览器如何互连字母并具有大量标签。

您可以在本文中查看更多详细信息:http://ilovetypography.com/OpenType/opentype-features.html

您也可以查看维基百科文章中的标签规范。 Paul Irish和其他人说不是每个浏览器都支持这些功能,但几乎每个现代浏览器都倾向于支持css3属性,其中一个是通过@font-face规则包含字体类型。 => http://www.w3schools.com/css3/css3_fonts.asp

如果您需要对字体进行一些转换,可以查看fontsquirrel服务:www.fontsquirrel.com

答案 2 :(得分:0)