http://www.web008.net

美高梅手机版实战运用篇,那20款字体你能够在web中放心使用

谈谈网页设计中的字体应用(4):实战应用篇·下

2015/03/30 · CSS, HTML5 · 字体

原文出处: 棕熊的博客   

Yoho, 大家好,又是我哟~

首先抱歉让大家等了这么多时间。最近实在比较繁忙啦。不过我还是会尽量抽空出来给大家讲点有的没的,欢迎大家继续关注哦。

上次我讲了在实际应用font-family时会遇到的浏览器兼容性问题。这次我 要从操作系统方面来讲如何安排字体族。另外,由于中文字体的选择范围实在太小,所以本章中设计的内容主要以西文字体为主,比较适合上一章中的“方案二”。

web前端开发外包,最重要的是什么?我个人认为无非两点——标准和兼容性,做web前端开发不得不知道的事——这几款字体你可以在网页web中随意的引用,因为这几款字体都是微软自带字体,无需第三方加载字体文件,可直接引用,兼容性好。当然MAC系统除外。

– 不同操作系统的常用字体

如何让你的字体在任何系统,任何电脑上都看起来一致?

原则很简单。尽可能使用所有操作系统都存在的字体。虽然听起来比较简单,但是其实还是很tricky的一件事情。为此,你首先需要了解常用的操作系统的字体。

下面我会列出一些除了windows以外的常用操作的默认字体。windows么……想来大家应该已经很熟悉了

1,  Arial

– Mac OS X 中的常用字体

一个典型安装的 Mac OS X 10.4 会包含以下常用西文字体(某些非常用字体就不列出了):

sans-serif serif monospace
Helvetica Times Courier
Arial Times New Roman Courier New
Arial Narrow Georgia
Arial Black
Comic Sans MS
Gill Sans
Impact
Trebuchet MS
Verdana
Lucida Grande

微软公司的网页核心字体之一,最常用的sans-serif字体,当字号很小时不容易阅读。但是,大写的“I”和小写的“l”是无法区别的,你可以考虑用Tahoma字体来替代。

– 典型的 Linux 字体

典型的Linux只有kernel,所以字体要自己安装

既然这样,自然无法正确预测使用Linux的用户装了啥字体。不过好在大家都会装一些常用的字体,因此不会有什么大问题。

 

(苹果系统没有这种字体,但有一种对应于Arial的字体叫Helvetica,它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好。)

– 比较各个操作系统的字体,我们会发现——

其实,windows 常用的字体其它操作系统都有,甚至很多人认为windows only 的 Arial 字体也不例外~

不少设计师都认为 Arial 是个不典雅的字体,所以希望在 Mac 上能用更经典的 Helvetica 字体来代替,于是产生了这种代码:

CSS

font-family: Arial, Helvetica, sans-serif;

1
font-family: Arial, Helvetica, sans-serif;

但是因为Mac OS 其实也有Arial 字体,所以永远都只会显示Arial

其实这种问题,只要稍加修改就OK了啦:

CSS

font-family: Helvetica, Arial, sans-serif;

1
font-family: Helvetica, Arial, sans-serif;

但是事情往往不是这么简单的。比如上面的Mac OS X字体表中,由个 Lucida Grande 字体。照理说这个字体是Mac only的,所以大家理应可以放心的这么写:

CSS

font-family: "Lucida Grande", Arial, sans-serif;

1
font-family: "Lucida Grande", Arial, sans-serif;

那么Mac用户可以看到Lucida Grande, 而PC用户可以看到Arial字体。多好的应用典范。

但是实际上呢,不少PC用户居然看到了乱码,而不是 Arial 字体

怎么回事呢?因为市面上有不少字体下载网站,而上面就有那个Lucida Grande下载。可惜这个广为流传的 Lucida Grande 是个rip版,而且rip的时候有缺陷,导致所有换行字符都会显示成一个乱码……

——囧大了

不要说这种事情只会在乱装英文字体的用户上发生哟。能在XP上显示微软雅黑的,不都是rip版的嘛——那个网上广为流传的版本,也存在着类似缺陷,只不过不至于严重到产生乱码而已。所以在选择字体时需要注意一下。

CSS写法:font-family: Arial, Helvetica, sans-serif;

– 常用西文字体介绍

美高梅手机版 1

Tahoma是我本人比较喜欢的一种非衬线字体。首先几乎所有的系统都默认安装了这个字体,所以不会存在兼容性问题,其次,这个字体也比较均衡,显示段落也不错。

美高梅手机版 2

说老实话,Verdana太宽了,不适合中英文混排。很多时候Verdana的一个字母都要比同样size的中文字符宽了。国外设计师喜欢用Verdana, 很多时候是因为Verdana 11px以下的小字效果的确十分理想,但是国内很多设计师想也不想就照搬过来,并用在12px 乃至14px的布局上,导致本来就局促的空间更显紧张,所以不推荐作为font-family 打头阵的字体。

如果要使用Verdana字体的话,就一定要考虑它和一般系统default的sans-serif字体之间的大小差距。不论和Helvetica 或者Arial 比起来,Verdana都大得多了。不过好在几乎所有的系统也都会默认安装这个字体……

美高梅手机版 3

Trebuchet MS 是个很多人都会忽视的字体。其实我个人也比较欣赏这个字体的。与其使用Verdana, 还不如用这个线条更圆润的的字体来替代。对各种操作系统也有很好的支持。

缺点是和Verdana一样,因为过宽,而不适合用在中英文混排。也要注意和default sans-serif font 宽度差距的问题。

因为考虑到有些Linux 系统可能不会安装这个字体,所以如果要用在一个font-family的开头话,可以使用Verdana 做后续字体。

美高梅手机版 4

Windows 操作系统的默认sans-serif 字体。没啥好说的,永远都不会用到的默认字体。

美高梅手机版 5

为啥同样是默认字体,Helvetica 就这么典雅呢?  哪怕就是用在font-family的开头也是能独挡一面的啦。

另外,这里有个 Helvetica 和 Arial 打架的flash游戏~ 像超级玛利一样踩 Arial 字符就可以了。顺便没有 Helvetica 字体的人可以看一下两个字体的具体区别~ 茶~

美高梅手机版 6

我最喜欢用的 serif 字体。不仅很适合做正文,也适合做标题。尤其是意大利体的 Georgia Italic 更是魅力难挡。缺点仍旧是不适宜和汉字混排,因为Georgia的衬线哪怕对于宋体来说也太重了,所以看上去硬邦邦的……

美高梅手机版 7

Windows 的默认serif 字体。没啥好说的,西文字体的元老了。很多字体,比如大家都熟悉的Courier New都是从Times New Roman派生出来的。

不过现在印刷业都很少用这个字体了,更多的是在用它的后代——Times Europa 和 Times Europa Office。

在具体的网页字体应用上,要注意同样字号的Times New Roman比普通字体小的多,所以一定要考虑进字体大小的变化

美高梅手机版 8

常用的等宽字体之一。其实等宽字体的选择比较小啦,所以基本上要兼容所有系统,也就只能选这个字体了。

不过还好,等宽字体通常都是在写代码的时候有用,所以只要等宽就没什么大问题。类似于 Lucida Sans Typewriter, Lucida Console, Monaco 之类的字体也都很好用。

2, Arial Black

– 综上所述,总结几套实用而简单的font-family

CSS

font-family: Tahoma, Helvetica, Arial, sans-serif;

1
font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字体。推荐使用在13px以上的环境。

CSS

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

1
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的宽扁字体。推荐在11px以下环境使用。

CSS

font-family: Geogia, Times New Roman, Times, serif;

1
font-family: Geogia, Times New Roman, Times, serif;

衬线字体的不二之选。

CSS

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

1
font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等宽字体。写代码很好用。另外,如果觉得Lucida Console太宽的话,可以换成比较窄的Lucida Sans Typewriter。话说老赵blog上的代码块使用的就是Lucida Sans Typewriter 哟~

CSS写法:font-family: ‘Arial Black’, Gadget, sans-serif;

– 你知道吗?

  • 字体的别名系统中的一个字体是允许有多种别名形式存在的。比如,在windows 下,Georgia 也可以用 Georgia MS 来命名,它们其实是同一种字体。宋体的正式名称是SimSon,而“宋体”只是它的别名。按照规范,浏览器应该能自动识别字体的别名,并映射到正确的字体文件。比如,font-famliy: SimSon 和 font-family: “宋体” 应该具有等价的效果。可惜,似乎很多浏览器都不能正确执行前一条定义……
  • 什么时候在字体名称前面加引号大家来看这个字体样式定义:
CSS

font-family: Times New Roman, 宋体, serif;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b9b63bc5650953555-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b9b63bc5650953555-1" class="crayon-line">
font-family: Times New Roman, 宋体, serif;
</div>
</div></td>
</tr>
</tbody>
</table>

很多人都会说,这个样式写法是错的,因为 Times New Roman
和宋体都应该用引号括起来,像下面这样:



CSS

font-family: "Times New Roman", "宋体", serif;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b9b63bc8049008790-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b9b63bc8049008790-1" class="crayon-line">
font-family: &quot;Times New Roman&quot;, &quot;宋体&quot;, serif;
</div>
</div></td>
</tr>
</tbody>
</table>

实际上呢,上面两种写法都是对的。和很多人想象中的不一样,字体名称外面的引号其实并非必须的。那么加引号和不加引号有什么区别呢?

其实最大的不同在于对字体名称中空白字符(如空格、制表符)的解释。

不加引号的时候,浏览器对于字体名称中空白字符的解释应该和XML中一样,即忽略字体名称左右的空白字符,并且单词中间的空白字符被解释为一个空格。比如
font-family:         Times       New  Roman                , serif;
会被解释成 font-family: Times New Roman, serif;

加引号的时候,浏览器必须保留引号内所有的空白字符。如果写成
font-family: “Times       New Roman”; 那么浏览器不会显示 Times New
Roman 字体,而是搜索一个叫做“Times       New Roman”的字体。

至于“宋体”这样的字体名称,因为中间没有空白字符,因此完全没有必要加引号。但是考虑到并非左右的操作系统都有汉字支持,并且并非所有的程序员都会注意css文件的正确编码问题,所有保险起见,一般会加上引号。当然,解决这种问题的最好方法是使用别名。比如宋体,其实应该写成SimSon,这样哪怕浏览者的系统不支持中文,并且这个css文件被错误的编码成了GB2132也没问题,浏览器还是知道这是宋体,并且做出正确的字体搜索。可惜,不是所有浏览器都支持就是了……

网页设计中的字体应用这个专题就讲到这里了,希望对大家有所帮助。下次我打算讲一下在项目中如何应用样式表管理,适合稍微有些样式表基础,并且正在参与、或者有意参与大型开发项目的朋友们听哦~ 其中还可能穿插一些小文章,解释一些实际工作中大家遇到的容易误解的地方。不过最近偶会比较忙一些,所以可能会花些时间来写,请大家耐心等待啦。

那么,大家下次见了哟~

赞 1 收藏 评论

美高梅手机版 9

3, Arial Narrow

CSS写法:font-family: ‘Arial Narrow’, sans-serif;

4, Verdana

微软公司的网页核心字体之一,微软公司专门为屏幕显示而开发的。应用广泛。易于阅读。是显示器中最清晰的字体,即使字号很小,也很容易阅读。但字号最好介于10~14像素之间,超出这个范围就不好看了。

CSS写法:font-family: Verdana, Geneva, sans-serif;

5,  Georgia

微软公司的网页核心字体之一,可用性好。可读性比Times New Roman强。是网站设计中,浏览效果最好的serif字体,因为它是专为网上阅读设计的。)

CSS写法:font-family: Georgia, serif;

6,  Times New Roman

微软公司的网页核心字体之一,可能是最常用的serif字体,是网站浏览器默认的字体,12pt以上的字体容易阅读,但小字号的字体易读性差。(苹果系统没有这个字体,有一个对应于Times New Roman的字体叫Times)

CSS写法:font-family: 'Times New Roman', Times, serif;

7, Trebuchet MS

微软公司的网页核心字体之一,与Arial相似。Trebuchet MS比Arial看起来优雅、古典一点。可以用来做标题,但小字号阅读起来会很困难(低于13PIX阅读起来就很累了,不太推荐用来做正文字体)。在苹果系统上也可以用Helvetica做替代。

CSS写法:font-family: 'Trebuchet MS', Helvetica, sans-serif;

8 , Courier New

微软公司的网页核心字体之一,老式打印机字体,有一种独特的机械工整感觉。呈现计算机编码时,还会用到这种字体。12 pt的Courier New字体曾是美国国务院的公文标准字体,但于2004年1月停用,改使用14 pt的Times New Roman,因为其具“现代性”和“易读性”。

CSS写法:font-family: 'Courier New', Courier, monospace;

9,  Impact

微软公司的网页核心字体之一,Impact是1965年发表的一个无衬线字体,其特粗的笔画、紧缩的间距。字体较为粗犷,适合使用在标题上,而不常用在内文。

CSS写法:font-family: Impact, Charcoal, sans-serif;

10,  Comic Sans MS

微软公司的网页核心字体之一,手写体。这是一种争议很大的字体,建议不要用在正规的金融、政府、商业机构站点。

CSS写法:font-family: 'Comic Sans MS', cursive;

11,  Tahoma

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。