优惠活动 - 12周年庆本月新客福利
优惠活动 - 12周年庆本月新客福利
优惠活动 - 12周年庆本月新客福利

Web版式的昨天、今天和明天

日期 : 2021-10-30 19:13:11
       版式是一种强大的工具,“可以通过它阐明、认同和分享文本的含义(或者它缺少含义),或者有意地进行伪装。”版式的这个经典的定义来自于Robert Bringhurst的The Elements of Typographic Style,它同样适用于web版式,其中涉及在几毫秒的时间内抓住读者的注意力—否则就会失去他们,使得他们光顾另一个网站、另一个链接或者另一种吸引人的声音。
在The Elements of Typographic Siyle (它被看作是版式的圣经) --书的前言中。Robert Binghurst指出版式的基础原则独立于任何特定的排版媒介。然而在经过差不多20年在Web上设置字体的痛苦之后,设计师终于可以扬眉叶气且可以在不危及细节或实现的情况下应用必要的样式元素。近几年在确定web版式的未来方面扮演着至关重要的角色:仅仅几年前还无法想象的事情在今天已经变成了可能,并且将在明天甚至会变得更好。
字体设计师Jos Buivenga 声称“Web上的文字正在变得庄重”,他认为Web版式设计非常有前途一对于字体设计师和 Web设计师都是如此。Jon Tan热情地把Web版式的当前状况称为“繁荣兴旺”“对于Web版式来说,现在是一个振奋人兴的时刻。”Stephen Coles赞许地说道,“新技术、使用文字的新方式,以及专”]为新媒介创建的新字体层出不穷。”在过去几年不是如此令人兴奋,因为没有公共的标准,并且只会在字体供应商、浏览器制造商和用户当中引起关于“Web上的字体应该如何工作” 的争论。
1.web版式的演化
在过去几年发生了什么事情使设计师对web上的版式的状况感到如此激动和乐观?自从1995年以来我们的确走了一段很长的路,当时Netscape首次把<font>标签添加到HTML中。Web设计师没用多长时间就对他们的排版选项如此受限制以及HTML如此受内容和样式的控制感到不满意。第二年,发布了第一个CSS(层叠样式表)规范,用于把表示与结构分隔开。
CSS”不仅可以使web文档更漂亮”,Bert Bos写道,他于1996年加入W3C(万维网联盟)并从事与CSS相关的工作,“它还为与我们的语义web的目标相背离的实践活动提供替代方案:<font>标签、替代文本的图像、分隔符元素。我们希望HTML文档可访问、独立于设备、容易维护并且可重用,因此我们尝试把文本/结构与样式分隔开,使其尽可能容易和有吸引力。”
在Web上利用CSS属性编排文本样式变得如此容易和高效,它们可以控制字母之间的间距、文字、定位、方向、文本颜色和样式。一个问题得到了解决, 但是还有许多问题仍然有待解决,包括不能指定用户的机器.上不存在的字体。Web设计师别无选择,只能使用多种文本替代技术以显示非Web安全的字体,比如静态图像替代、sIFR、 Cufon、 typeface.js 和Facelift。每种技术都有它自己的问题:增加的页面加载时间和页面大小、对第三方应用程序或JavaScript的依赖、不可选择的文本,或者费时的文本更新和文本生成。上述的所有技术都不建议用于大块的文本。显然,需要一种更直观、更自然的排版方法。
       当CSS2规范于1998年发布时,给设计师引|荐了@font-face规则,它通过链接到不属于核心Web安全字体一部分的字体, 可以改进字体选择过程。然而,许多事情都出错了。Microsoft 和Netscape在它们的浏览器中选择不同的方法来支持Web字体,而不是支持使用最广泛的字体格式,即TrueType。Netscape 支持TrueDoc ; Microsoft则开发了专有的eOT ( Embedded OpenType Format, 嵌入式OpenType格式),它尽管得到了Adobe和Monotype字体服务商的支持,但是没有获得更广泛的认可,因为用户不想与错综复杂的、仅属于Microsoft的技术打交道。
十年后,@font -face王者归来,并且现在看起来仍然是这样。2007 年,Microsoft为所有人开放了EOT,并把它们的EOT提议提交给W3C。不过这一一次,由于DRM ( Digit Rights Management,数字版权管理)顾虑,其他的刘览器供应商拒绝支持它。Microsoft 用于把.tf字体转换成.eot 的工具(称为WEFT,web嵌入式字体工具)并没有起到应有的作用。许多人发现使用它时令人混淆并且使人受挫,促使开发人员寻找其他的选择。
显然,这时需要新的格式:它包含OPenType.无需许可、只景码并且至少与EOT一样高效。这样- "种格式是WOFF(web开放字体格式),它是字体设计师Formuat, Web开放字体格式),它是字体设计师Erikvan Boklnd和TalLeming在Moilla的Jonathan Kew的帮助下协同工作的成果,并月由, Web字体工作组( Web Fonts Working Group)进行了进一步的开发Dagget牵头的Moilla Firefox 3.6成为第一款带有WOFF支持的浏收盟Microsoft在Internet Explorer 9中添加了对WOFF的完全支持:Co ",Chrome在版本5.0中添加了对它的支持,WebKit也将添加WOFF支持2009年2月,字体编辑器FontForge添加了WOFF支持,因此现在可以直接把字体导出为WOFF。
WOFF是基于sfint的字体(如TrueType Font或TF、OpenType Font或OTF、Open Font Fomat或OFF )的重新打包的压缩版本,导致其下载大小比OpenType和TrueType字体要小得多。WOFF包括可选的元数据,允许字体供应商利用元数据和私用数据标记它们的字体一这是 WOFF得到了主要的字体造字商支持的主要原因。作为一种通用的Web字体标准,WOFF 1.0 通过使用真实的文本代替图像或者多种文本替代技术,有助于推进Web上丰富的版式,在线保留品牌标识以及改进网站的可访问性,使得它们更容易被搜索引擎发现。使用WOFF的另一个同等重要的好处是:使用其他语言创建网站成为可能,其中-些语言没有广泛可用的字型。
“对于Web设计师来说,WOFF意味着甚至更多的文字服务商将参与web许可.并且可以利用多种方式购买字型许可。你可能已经从FonFror获得了WOFF文件的许可证“,Typekit的文字经理Tim Brown这样说道,Typekit是最早的web字体交付和托管服务之一。
2.当今web版式的状况
       回到2006年,Oliver Richensein凭借一个大胆的声明动摇了设计秩序,他声明动摇了涉及秩序,他声称“web上95%的信息都是书面语言,web设计师应该在形成书面语言的主要学科(即版式)中获得良好培训的说法是最合乎逻辑的。“如果他是在今天写出这篇文章,将不会如此有争议。回到那个时代,Flash和”漂亮的图片“统治着设计界;数量有限的系统字体使图形设计师感到沮丧,并且不足以激励主要依靠自学成才的web设计师突破web版式的限制。
       所有这些改变都要归功于一串偶然发现的事件一从 John Boardley的网站ioeTypogaphly com (专用于各种文字)的成功启动,到CSS版式中的最新进展和@font- face的王者归来,到字体交付服务(如Typekit或Fontdeck)的建立和Web字体的浏览器级支持,再到才华横溢的Web设计师凭借出色的观察力快速掠过版式细节,他们突破了在Web上利用版式可以实现什么效果的界限。突然,设计界开始以一种新的眼光看待Web版式,沉迷于文字的设计师停止了只考虑到安全的保守做法,开始在屏幕上试验各种文字,并从中获得乐趣。
       一些Web设计师扩展了他们的css字体库,补充了对于Web非传统的字体。这些字体允许他们]把设计打扮得整整齐齐,并把它们带到下一个层次。其他设计师(尤其是“版式不是关于选择一种很酷的字体”这个观点的支持者)通过只坚持使用十种核心Web字体中的一两种字体来愉悦我们的眼睛。不过,绝大多数网站在版式方面仍然有所滞后。2005 年, Richard Rutter 决定通过发布他的网站The Elements of Typographic Style Applied to the web来帮助web设计师,他把该网站构造成“逐步学习Bringhurst的工作原则,解释了如何让使用HTML和CSS中提供的技术来完成每个步骤“。
然而不幸的是,甚至在今天,具有丑陋的web版式的网站数量仍然远远多于令人赏心悦目的网站数量。“总体来讲,Web 版式仍然十分低劣, 即使只考虑专业设计的网站也是如此。当然也有许多确实很精美的Web版式的示例,怕是这些在宏大的商业Web模式中仍然极其少见。”Richard 说道。不过,低劣的Web版式几乎不涉及字型的选择。Richard 认为“它更多地涉及关注版式的细节、字行的长度、深思熟虑的行距(字行的高度).正确的字型,以及关注版式的颜色、精心设计的边距等。所有的小细节结合起来可以极大地改进阅读体验”。Richard 把人们缺少对版式的关注归因于“历史上缺少可供Web设计师使用的字型;一遍又- 遍地与相同的字体打交道导致在使用它们时不怎么上心,实际上应该更留心才对”。

上一篇:设计移动用户体验 下一篇:拥抱HTML5
相关文章