0 Comments

CSS 字体库(CSS Font Stacks)

发布于:2013-03-21  |   作者:广州网站建设  |   已聚集:人围观

CSS 字体库(CSS Font Stacks)

虽然在安全字体的选择受到了限制,你不必仅仅使用那些样式表里的字体。使用CSS 字体库里的字体,它是一个按优先顺序排列的CSS 所钟爱的字体的列表,你可以告诉用户浏览器在这个列表中循环,直到找到一个安装在用户操作系统中的字体,然后使用它显示任何被定义的文本。

所有系统最常用的字体,来自 Codestyle.org 于2009
年11 月公布的“联合字体调查结果”(Combined font survery results)。

例如,如果你想用Baskerville 字体,你可以把它和作为替换的字体一起列在CSS 字体库中。

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. body { font-family: Baskerville, Times New Roman, Times,  
  2. serif;  

如果用户的电脑上没有安装Baskerville 字体,浏览器会检查下一个字体,也就是Times New Roman 字体,然后是Times,如果这些字体都没被安装,浏览器将使用任意一个衬线(serif)字体。

正如Nathan Ford 在它的文章“优化CSS 字体库”(BetterCSS Font Stacks)中提到的,当你选择字体库的时候,你需要首先考虑文本的上下文。一些字体显示正文的效果较好,然而另一些显示标题的效果较好。考虑一下如果文本元素是标题或段首的情况。总体来说,字库应该遵循以下的方案。

字体名称:理想字体、替代字体、一般字体、通用字体。

作为标题最理想的字体,你可以在“安全的”字体外探索排版的可能性。很多字体具有良好的市场渗透力,所以除非你选择了一个非常不常用的字体,总有一些用户会喜欢它。对于正文字体的“理想”程度,可以通过它适合整个设计的程度和易读性来衡量。

标题和文本块的“替换字体”通常和“理想字体”相似(比如字体形状),但是比“理想字体”更通用,安装得也更广泛。

“一般字体”和前两者类似,但是不具备复杂的特性,通常比较简单也比较普通。

最后,“通用字体”是在前面所有字体都没有被安装的情况下的选择,它将以任意通用的字体显示内容。

下面是标题使用的主流字库。

Baskerville, “Palatino Linotype”, Times, Times New Roman,serif;

Cambria, Georgia, Times, Times New Roman, serif;

Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif;

Futura, Century Gothic, AppleGothic, sans-serif;

Garamond, Hoefler Text, Palatino, Palatino Linotype, serif;

Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida SansUnicode, sans-serif;

Georgia, Times, Times New Roman, serif;

GillSans, Trebuchet, Calibri, sans-serif;

Helvetica, Helvetica Neue, Arial, sans-serif;

Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif;

Palatino, Palatino Linotype, Hoefler Text, Times, Times NewRoman, serif。

 

在试验中,Travis Gertz 使用了不同的CSS 字库,来为用户提供美丽的版式设计。在上面的例子中,使用了Helvetica Neue 作为正文的字体,Baskerville 作为日期、标题和引用文本块的字体。

 

Trebuchet, Tahoma, Arial, sans-serif

Verdana, Tahoma, Geneva, sans-serif下面是正文使用的流行字库。

Arial, Helvetica Neue, Helvetica, sans-serif

Baskerville, Georgia, Cambria, Times, Times New Roman, serif

Cambria, Georgia, Times, Times New Roman, serif

Century Gothic, Apple Gothic, sans-serif

Consolas, Lucida Console, Monaco, monospace

Courier New, Courier, monospace

Futura, Century Gothic, AppleGothic, sans-serif

Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode,Verdana, sans-serif。

在它的试验中,Travis Gertz 使用了不同的CSS 字库,来为用户提供美丽的版式设计。在上面的例子中,他使用了Helvetica Neue 作为正文的字体,Baskerville 作为日期、标题和引用文本块的字体。

仔细考虑字体问题可以预先避免很多问题。

当你定义字体库时,要确保你选择的字体不会太罕见,以至于在整个设计中替换字体和一般字体也无法正常匹配。把非常不同的字体放在一个字体库中通常不是一个很好的主意,因为字体大小、行高和行宽的不同可能会使正文和标题产生令人吃惊排版效果,甚至使它们变得不易阅读或使版面零乱。最后,你需要考虑一下各种可能的情况,比如,你的标题字体库中第二个字体被使用,而你的正文字体库中第三个字体被使用。在这种情况下文本是否是连贯可读的?其他的组合情况下又会是什么样?

广州网站建设,网站建设,广州网页设计,广州网站设计

标签:
飞机