opentype属性不可用_opentype属性不可用[通俗易懂]

opentype

Support of OpenType fonts in modern browsers means that we are finally able to control typographic details that make the difference between presenting content and communicating with type. In recent articles I’ve shown you how to use font ligatures and fractions with CSS3 to create more legible, attractive text on web pages. Taking this further, we can create discretionary ligatures and true small caps with OpenType.

现代浏览器中对OpenType字体的支持意味着我们最终能够控制印刷细节，从而使呈现内容和与类型进行通信之间有所不同。 在最近的文章中，我向您展示了如何在CSS3中使用字体连字和分数来在网页上创建更清晰，更具吸引力的文本。 进一步讲，我们可以使用OpenType创建任意的连字和真正的小写字母。

Probably the greatest source of wealth in the OpenType format lies in the rich variety of styles that can be embedded within each font. Traditional TTF fonts are restricted to approximately 200 characters, meaning that they have barely enough room to cover capital letters, lowercase, numerals, ligatures and punctuation in English. This means that many variants – italicization, bolding, small caps, etc – have often been faked or simulated in browsers. With OpenType, typographers have the ability to specify several unique forms for each individual glyph to cover many possible uses and languages, creating letters that look good in every circumstance.

OpenType格式的最大财富来源可能是可以嵌入每种字体的多种样式。 传统的TTF字体限制为大约200个字符，这意味着它们几乎没有足够的空间来覆盖英文的大写字母，小写字母，数字，连字和标点。 这意味着许多变体-斜体，粗体，小写字母等-经常在浏览器中被伪造或模拟。 使用OpenType，排版人员可以为每个字形指定几种独特的形式，以涵盖许多可能的用途和语言，从而创建在每种情况下看起来都不错的字母。

酌情连字 (Discretionary Ligatures )

Perhaps the most visually striking features of OpenType are the discretionary ligatures and alternate styles that can be contained in a font. Put simply, ligature rules replace pairs of letters that appear ill-matched next to each other with different, handcrafted glyphs designed to present the letter pairing with more visual appeal.

OpenType在视觉上最引人注目的功能可能是字体中可以包含的任意连字和替代样式。 简而言之，连字规则会用手工制作的不同字形代替看起来彼此不匹配的字母对，以使字母对更具视觉吸引力。

Discretionary ligatures go a step further, often setting letterforms on top of or within each other to dramatic effect. To turn this option on, we use the following CSS:

任意连字走得更远，通常将字母形式设置在彼此之上或之内以产生戏剧性效果。 要启用此选项，我们使用以下CSS：

h1 {
	-moz-font-feature-settings:"dlig";
	-ms-font-feature-settings:"dlig";
	-webkit-font-feature-settings: "dlig";
	font-feature-settings:"dlig";
}

Applied with the appropriate font (Megalopolis, by Jack Usine), the result can be stunning, as seen in the header for this article. (I’ve also added text-transform: uppercase and a few other style changes). You’ll find that you can select the letters with your cursor: that is real text, not an image. It’s the kind of presentation that would take hours to do by hand, and now it’s built directly into the font.

如本文标题所示，以适当的字体( Megalopolis ，由Jack Usine撰写 )应用后，结果可能会令人赞叹。 (我还添加了text-transform: uppercase和其他一些样式更改)。 您会发现可以使用光标选择字母：即纯文本，而不是图像。 这种表示形式需要手动完成，需要花费数小时的时间，现在已经直接内置到字体中。

Users with browsers that do not support discretionary ligatures and will simply see “Fall In Love” in uppercase; search engines will see the same.

使用不支持任意连字功能的浏览器的用户，只会大写“ Fall In Love”； 搜索引擎将看到相同的结果。

Due to their dramatic flourishes, discretionary ligatures are best left for major heading elements on a web page, but the next OpenType variant we’ll look at has quite a bit more versatility.

由于它们的蓬勃发展，全称连字最好留给网页上的主要标题元素，但是我们要研究的下一个OpenType变体具有更多的通用性。

真正的小盘 (True Small Caps)

font-variant: small-caps has always been somewhat misleading: the traditional CSS method of creating small caps simply took capital letters in the text and shrank them. While doing so, it also lightened the letterforms, creating a result that looked “off”, even in a lovely font like Calluna Sans by Jos Buivenga:

font-variant: small-caps总是有误导作用：传统的CSS创建小写字母的方法只是在文本中使用大写字母并将其缩小。 在这样做的同时，它也减轻了字母的形状，即使看起来像乔斯·比文加 ( Jos Buivenga)的 Calluna Sans这样可爱的字体，其结果看起来也“偏离”：

Most OpenType fonts contain individually designed small caps characters. We can use CSS to summon them:

大多数OpenType字体包含单独设计的小写字母字符。 我们可以使用CSS来召唤它们：

h2 {
	-moz-font-feature-settings:"smcp";
	-ms-font-feature-settings:"smcp";
	-webkit-font-feature-settings: "smcp";
	font-feature-settings:"smcp";
}

Applied, the result looks like this:

应用后，结果如下所示：

As you can see, using CSS with an OpenType font to create small caps results in a significant difference in quality.

如您所见，使用带有OpenType字体CSS来创建小写字母会导致质量上的显着差异。

Small caps are most often used in headings but may also make an appearance in paragraphs as a first-line-run-in effect.

小型大写字母通常用在标题中，但也可能在段落中以第一线的形式出现 。

注意事项 (Some Cautionary Notes)

You might assume that with such obvious advantages, OpenType fonts should be everywhere on the web. They’re not, for several reasons:

您可能会假设OpenType字体具有如此明显的优势，因此应该在网络上无处不在。 它们不是，原因如下：

• Support for the features I’ve discussed here is new outside of Firefox: Chrome 20 and IE10 offer support, but Safari, iOS and Opera have none at this writing. (Webfonts.info has a handy resource for tracking font format support in the major browsers). That is okay, in the sense that CSS’s penchant for graceful degradation will mean that visitors to your site who use older browsers will still be able to read the text in the correct font, just without the added features.

  我在此讨论的功能的支持是Firefox之外的新功能：Chrome 20和IE10提供了支持，但Safari，iOS和Opera在撰写本文时均未提供。 ( Webfonts.info提供了一个方便的资源，可用于在主要浏览器中跟踪字体格式支持 )。 没关系，从某种意义上来说，CSS对降级效果的偏爱将意味着使用旧版浏览器的网站访问者仍然能够以正确的字体阅读文本，而无需添加任何功能。

• Typographers have to invest significantly more time in developing a fully-featured OpenType font than the standard character set of a traditional computer font, making them rarer.

  与传统计算机字体的标准字符集相比，印刷者必须花费更多的时间来开发功能齐全的OpenType字体，这使它们变得更为罕见。

• OpenType fonts that include these extra features tend to be significantly larger in file size, which can make delivery on web pages problematic. (By way of comparison, Calluna Sans Regular in OpenType format weighs in at 117KB, compared to 18KB as a .woff)

  包含这些额外功能的OpenType字体的文件大小往往会大大变大，这可能会导致在网页上传递邮件时出现问题。 (通过比较的方式，Calluna酒店三世在OpenType格式定期的重量在117KB，相比18KB作为.woff)

• Because of this, font embedding services such as Typekit and FontDeck have been somewhat reluctant to provide OpenType fonts, although that is beginning to change.

  因此，字体嵌入服务(例如Typekit和FontDeck)在某种程度上不愿提供OpenType字体，尽管这种情况已经开始改变。

• This combination of factors may mean that an OpenType font you receive from an embedding service may be stripped of these features to reduce file size; for right now, it’s probably best if you host your own (legally obtained) OpenType fonts for embedding purposes.

  这些因素的组合可能意味着您从嵌入服务中收到的OpenType字体可能会被剥夺这些功能，以减小文件大小。 目前，最好是托管自己的(合法获得的)OpenType字体以进行嵌入。

翻译自: https://thenewcode.com/568/Create-Rich-Web-Typography-With-OpenType-Discretionary-Ligatures-amp-True-Small-Caps

opentype