跳到主要内容

使用OpenType掌握Web排版

我们都同意可以嵌入网络字体自成立以来,它是网络设计的最大进步之一,特别是在它的时代响应式网页设计。有这么多元素可以从一个屏幕大小移动到另一个屏幕大小,很棒的排版和不同的字体是在每个设备上同样运行良好的唯一常量之一(除了使用Opera Mini浏览器的设备)。

只添加网络字体只是故事的一部分。单词可能有意义,但字母有情感。 OpenType(OT)是由。开发的跨平台字体文件格式土砖和微软。它的功能通过扩展OT功能字体的字符集来增加更大的深度和多样性,以包括诸如连字,花饰,风格替代甚至真实字距的印刷乐趣。通过探索所有这些奇妙的功能,扩展您的情感词汇;没有理由停止使用字体。

观看本教程的独家截屏视频:

这些印刷美女究竟是什么?那么,对于初学者来说,有连字(包括标准,自由裁量和背景变体)。这些是历史上在绘制或剪切时倾向于混合在一起的字符组合,例如ff,ffl,fi或fj。从技术上讲,这就是当f的'引擎盖'与小写字母i或j的'tittle'结合时,你可以看到在讨论这个话题时如何变得难以保持正面。

我个人最喜欢的一个是在Adobe Caslon Pro中看到的ct和st的不太常见的结扎,以及其他。然后有花呢,就像在费尔班克(Fairbank)中发现的那样(从中使用Fonts.com):可爱的猛扑和装饰,在充分利用时增添了真正独特的个性。

其他常见功能包括风格替代和数字的各种选项,包括表格图形(均匀间隔和完美的金融表格),分数,旧式数字(上升和下降,以适应大写和小写字母)当然,字距表。 (仅此一点可能是值得入场的价格,因为我一直认为浏览器倾向于在屏幕上做一个相当中等的间距类型的工作。)

  • 下载示例页面这包括您可以在自己的项目中尝试的大量提示和技巧。

有点背景故事

这些角色和功能已经存在了几个世纪,但直到最近它们才能在网络上使用。连字符最初出现在苏美尔人的手稿和许多随后的书写和书法形式中。随着可移动类型的出现,使用连字来改进字母间距以允许间隔比单独的类型块允许的更紧密。随着照片和基于计算机的排版的出现,许多这些功能都失宠了。仅在最近几年,更好的字体格式再次使它们可用,并且它们的使用增加了。

In the magenta text, no ligatures are used. Note the awkwardly antisocial 'ffl' and 'ffi'

在洋红色文本中,不使用连字。注意尴尬的反社会'ffl'和'ffi'

随着OpenType(或更正确的开放字体格式)的出现在桌面及其派生的Web开放字体格式(WOFF)上,为了在Web上使用,最终存在一对可以几乎普遍使用的字体格式。这里的重要性是这些格式支持更广泛的字符和功能,以实现比以往更精细的排版控制。与所有Web浏览器一样,在所有主流浏览器中都支持不同级别使用这些功能,但现在它已经非常流行,值得认真考虑和使用。

所需的CSS已经存在了几年,并且是CSS3类型模块的一部分。不幸的是,获得足够广泛的WOFF格式支持进展缓慢,因此浏览器实现和支持也发展缓慢。但值得注意的是,每个主要的出货浏览器都支持OpenType功能(Opera Mini除外)。您可以检查支撑件可以轻松延伸到多远我可以用吗

值得庆幸的是,尽管支持和语法各不相同,但像Sass这样的工具可以帮助使其更加实用,如果语法不起作用或功能不受支持,用户最终会得到普通文本。当然,总有一个问题;启用OpenType功能确实会增加文件大小,但是在小心和缓存的情况下,它不一定是性能杀手。

You can now skip the character codes and use a line of CSS

您现在可以跳过字符代码并使用一行CSS

那为什么要这么麻烦?

设计是关于沟通,人们基于美学来判断可用性。因此,我们有责任全力以赴地与我们的印刷选择进行沟通。此外,你必须记住我们通过扫描形状组而不是单个字母来阅读。因此,流程越流畅,越容易掌握字母组并将其理解为单词和短语,用户理解您尝试传达的信息的速度就越快,您将以风格进行操作。

Kerning is one of the most subtle features to illustrate, but its cumulative can have a profound impact on the readability and aesthetics

Kerning是最微妙的特征之一,但它的累积可以对可读性和美学产生深远的影响

请详细说明

一旦您的网站中包含已启用OpenType功能的字体,在CSS中使用它们就相当简单。官方CSS3语法如下所示:

p {font-feature-settings:“liga”1,“frac”1; }

如果这些功能可用,此代码将打开标准连字和分数。由于语法变化,包含它们的实际更安全的方式看起来更像是这样:

p {-moz-font-feature-settings:“liga = 1”,“frac = 1”; -moz-font-feature-settings:“liga”1,“frac”1; -webkit-font-feature-settings:“liga”1,“frac”1; -ms-font-feature-settings:“liga = 1”,“frac = 1”; -o-font-feature-settings:“liga”1,“frac”1; font-feature-settings:“liga”1,“frac”1; }

是的,Firefox在这里两次。这是由于Firefox 14周围的语法更改。这里有一个更完整的列表,列出了哪些功能以及如何引用它们:

  • “c2sc”:帽子的小帽子
  • “calt”:语境交替
  • “clig”:上下文连字
  • “dlig”:酌情连字
  • “hist”:历史人物的替代品
  • “hlig”:历史连字
  • “kern”:启用嵌入式字距调整表
  • “liga”:常见的连字
  • “nalt”:备用注释
  • “盐”:风格的替代品
  • “smcp”:小帽子
  • “ss01”:备用文体集1
  • “ss02”:备用风格套装2
  • “ss03”:备用文体套装3
  • “ss04”:备用文体套装4
  • “ss05”:备用文体套装5
  • “泼”:泼掉
  • “零”:削减零

以下选项需要一种条件逻辑(至少在您自己的脑海中),因为您实际上一次只能启用其中一对:

  • 数字案例:“lnum”:衬里数字或“onum”:旧式数字
  • 数字间距:“pnum”:比例或“tnum”:表格(用于排列金融等数字行)
  • 馏分:“frac”:正常分数或“afrc”:交替分数

不想记住这一切吗?如果你使用Sass,我有一个Mixin给你。它提供了上面的列表,并为您编写了所有代码。有关更详尽的列表,试试Adobe

Old-style figures sit both above and below the baseline

旧式数字位于基线的上方和下方

一种合理的方法

你的设计中的每一个元素都必须存在,但重要的是要记住,有时候,一个很好的理由只是为了获得更大的美感。那没关系。关于OpenType功能的好处是它们可以自己回归常规类型,因此它们可以非常安全地添加到您的设计中,并且它们添加的润色程度非常明显。随着对可读性,像素密度和屏幕质量的日益重视,越来越多的用户在线阅读更长的内容。这意味着更好的排版可读性的好处可以迅速转化为更高的忠诚度,更高的感知可用性,甚至是独角兽和小狗的游行(好吧,也许最后一个是夸大其词)。

杰森帕拉特

这篇文章最初出现在网络杂志问题253



翻译字数超限