CSS is ten years old this year. Such an anniversary is an opportunity to revisit the past and chart the future. CSS has fundamentally changed web design by separating style from structure. It has provided designers with a set of properties that can be tweaked to make marked-up pages look right—and CSS3 proposes additional properties requested by designers.

CSS技术已经走过了10年。在这样一个周年纪念的日子应该好好的回顾过去，展望未来。CSS通过样式与结构分离的原理让WEB设计有了根本性的改革。它所拥有的一系列属性可以让设计者把页面调整美观 -- 并且CSS3所补充的属性更是被设计者所期望得到的。

Many CSS properties, both old and new, deal with text: they describe text color, position, style, and direction. This is all very good—after all, text fills most of our screens. But in order for properties to reach their full potential, we need a good selection of fonts. And fonts are sorely missing from the web.

相当一部分的CSS属性，不论其新旧都是在处理文字：它们描述文字的颜色，定位，样式，以及方向。这些都是非常不错的 -- 毕竟，在屏幕里文字是主要角色。但要让属性能够充分延伸它们的所有潜能，我们需要在字体选择上做足工夫。可用于WEB的字体非常的稀少。

Consider the fine designs in the CSS Zen Garden. What makes them so exciting to look at? In part, it is the variety of fonts. Fonts convey design messages and create effect, and while in traditional print design there are a plethora of fonts available, fonts have been in limited supply on the web. Web designers depend on ten or so universally available fonts for their designs, and are reduced in large part to using Verdana and Arial over and over again. A typical CSS Zen Garden design, on the other hand, uses a hand-picked font to render text and aligns the glyphs to a pixel-perfect degree...and then uses that text as a background image.

在CSS Zen Garden 里的设计非常不错。 如何才能做到如此令人激动的外观呢？ 它丰富多样的字体是其中的一部分。字体可以传达一些设计理念还能产生效果，虽然在传统的印刷设计可以选择的字体甚至有些过剩，但字体在支持WEB上都有限制，WEB设计者只能在他们的设计作品里依

赖10种或是那些几乎所有设计者都在使用的字体，而且极大部分都是在重复的使用Verdana 和 Arial这两种字体。一个典型的 CSS Zen Garden 设计风格就是呈现精致的文字并且字形排列到象素程度，然后将文字以背景图片的形式来使用。

A background image!
一个背景图片！

There are many reasons why background images should not be used to convey text. Images are expensive to transmit and hard to make. Imagine trying to translate a web page into 15 languages and having to produce a set of images for each language. Additionally, the quality of printed web pages suffers as images don’t scale to the resolutions offered by modern printers. Using background images is currently the only way designers can use their favorite fonts on the web. But shouldn’t web designers have access to a wider selection of fonts and be able to use them without having to resort to creating background images?

有许多理由不应该使用图片来作为文字的传递方式。图片的传输代价过高而且制作起来比较困难。设想要将一张页面转换成15种语言那就必须为每种语言提供一组图片。再补充一下，使用流行的打印机无法打印出高质量的WEB页面，因为图片无法达到相应的分辨率。使用背景图片是当前设计者唯一的选择，只有这样他们才可以在WEB中使用中意的字体。但设计者难倒不应该努力去寻找一种既可以使用丰富的字体又可以不需要将它们做成背景图片的方法么？

There is a way: web fonts. Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.

有这么一种方法： WEB 字体。取代为字体制作图片，真实的字体文件可以通过网络进行连接并从WEB上取回。这种方法，设计者可以使用TrueType字体而不用将文字冻结成背景图片。

A brief history of web fonts
WEB字体大纲

This is not a new idea. In 1998, CSS2 described a way to link to fonts from style sheets, and both Microsoft and Netscape added support for web fonts in their browsers. However, neither vendor supported the most widely used font format, TrueType. Instead, they each picked a different, little-used format with few tools to support it (EOT and TrueDoc, respectively). And so web fonts disappeared from the designer’s toolbox.

这并不是什么新的想法。早在1998年，CSS2就被描绘出了一种可以样式表连接字体的方法，同时微软和网景都分别为他们的浏览器增加了WEB字体的支持。 然而两者都没有支持广泛使用的字体格式，很少的格式可以用不多的工具来支持它(EOT 和 TrueDoc, respectively)。于是 WEB字体从设计者的工具箱里消失了。

Better news
更好的消息

It’s a pleasure for me to announce that web fonts are back! Here are some recently generated examples that show how a familiar document can be rendered when TrueType web fonts are available:

这对于我来说是个值得宣告的好消息，WEB字体回来了！这里有一些最近产生的案例展示了一旦当TrueTypeWEB字体生效以往熟悉的文档能呈现怎样的不同：

The PDF (and image) examples shown in this article have been produced by Prince 6, a web-to-PDF-through-CSS renderer. (The Macintosh version must be installed via Terminal. Instructions are included in a ReadMe file. —Ed.) Prince is currently the only program that supports TrueType web fonts, but it provides the proof of concept we need to begin thinking seriously about web fonts—and to begin advocating for their implementation in common web browsers. Before we get to that, though, let’s take a look at the code beneath these examples.

(Disclosure: I’m on the board of YesLogic, the company behind Prince. Being on the board is a neat way of pushing for your favorite features to be implemented.)

The examples are coded in HTML and CSS only; no images are involved. CSS3 multi-column layouts and rounded borders have been added for good measure, but they are not essential to the designs. Each example uses four different web fonts. The style sheets point to web font files which are fetched before the documents are rendered.

案例的效果只需编写HTML和CSS代码；不包含任何有关图片的信息。CSS3 的多层柱布局以及原形边框的增加起到了很好的调整，但它们不是设计上的关键。案例使用了四种不同的WEB字体。样式表指向了文档需要呈现字体的文件。

Web fonts: the code you'll use
WEB字体：你将使用到的代码

Here is a simple example of how to use web fonts (Line wraps marked » —Ed.):

这是个使用WEB字体的简单举例：

@font-face {
 font-family: "Kimberley";
 src: url(http://www.princexml.com/fonts/larabie/ »
 kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Those familiar with CSS syntax will recognize the last line. The @font-face construct may not be familiar, however it’s easy to explain: as the “Kimberley” font is requested, the font file is fetched from the specified URL. The syntax is described in the CSS2 specification.

最后一行是我们所熟悉的CSS语法。@font-face 结构或许就不那么熟悉了，然而这个解释起来也容易：请求“Kimberley”字体，字体文件会从指定的URL地址上获取到，语法已经写入了CSS2规格文档

To avoid long lists of @font-face declarations in the style sheet, they can be hidden using @import (Line wraps marked » —Ed.):

可以使用@import来避免在样式表中罗列大串的@font-face声明：

@import url(http://www.princexml.com/fonts/ »
larabie/index.css) all;
h1 { font-family: Goodfish, serif }

The TrueType files used in the examples above are designed by Ray Larabie. He is a renowned font designer who has made hundreds of interesting TrueType fonts freely available for use on the web. His fonts are elegant, decorative, and playful.

在举例中用到的TrueType 文件是由Ray Larabie设计的。 他是有名的字体设计师，曾经制作了数百个有趣的TrueType字体可以直接用在WEB上。他的字体端庄，装饰性强，而且还非常好玩。

Dieter Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone to use. Below are some examples that use his fonts:

Dieter Steffmann 是另外一名伟大的字体设计师。他同样也制作出了许多漂亮的字体，提供给所有人使用。下面就是一些使用他的字体的举例：

Getting more complicated
更复杂的

When browsers start supporting web fonts, designers will be tempted to adjust more properties than just font-family. In the examples shown above, line-height, letter-spacing, word-spacing, and absolute positioning have been tweaked. This adjustment of other properties works well when the specified fonts are fetched from the web. However, it may have unexpected results in browsers that don’t support web fonts, and web designers should always be make sure their pages degrade gracefully.

当浏览器开始支持WEB字体，设计者将被吸引到调整更多的属性而不仅仅是字体系列。在上面所展示的举例中，行高，字母间距，词汇间距，以及绝对定位都已经做好调整。这种调整,从WEB上指定字体可以让其他属性运作良好。但是对于一些不能支持WEB 字体的浏览器，设计者应该确保他们的页面可以兼容。

The most obvious way to ensure graceful degradation is to specify a list of similar font families. For example, Ray Larabie’s “Primer Apples” is a charming, stitched font. You can see it used in this example:

要保证这种兼容性很明显的方法就是使用相似的字体系列。举例来说，Ray Larabie的“Primer Apples” 是种迷人的缝合字体，你可以在这个举例中看到它的表现：

“Primer Apples” has no obvious replacement in the list of fonts normally used on the web. However, the font metrics are quite similar to the ubiquitous “Trebuchet” font which can be specified as an alternative (Line wraps marked » —Ed.):

font-family: "Primer Apples", "Trebuchet MS", »
 sans-serif;

In a legacy browser without support for web fonts (or multi-column layouts or rounded borders), the second example will look like this:

在一些古董浏览器上，碰到不支持的WEB字体（或是多列布局或是圆角边框），看上去将会像第二个举例一样：

The stitching is gone, but the degradation is graceful.

缝合效果没了，但看上还是优美的。

A proposal to the W3C: a media query for web fonts
给W3C一个建议：针对WEB字体弄个媒体查询。

To further limit degradation, it would be useful to have a media query for web fonts. Consider this example:

更深层次的降级限制，媒体的查询对于WEB字体来说应该是有用处的。思考一下这个举例：

h1 { 
 font-family: "Trebuchet MS", sans-serif; 
 letter-spacing: 0.1em; 
}

@media all and (web-fonts: "truetype") {
 h1 { 
 font-family: "Primer Apples", sans-serif; 
 letter-spacing: 0.2em; 
}}

后面是一些作者的设想，就不翻译了，大家有兴趣可以参考原文
地址：http://www.alistapart.com/articles/cssatten

评论 (0) All

登陆 | 还没注册？