手机默认字体

Web中常⽤字体介绍

1、在Web编码中，CSS默认应⽤的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引⼊特殊的浏览器

加载字体。

浏览器中展⽰⽹页⽂字内容时，⽂字字体都会按照设计师在css中定义的字体族的顺序来进⾏显⽰。什么是字体族？字体族就是你在css

代码中看到“font-family”的代码内的⼀类字体名称，例如下⾯这⾏代码：

font-family:"ComicSansMS","幼圆","⿊体",sans-serif;

按照W3C标准，浏览器在解析⼀⾏代码时⾸先会在系统中查找ComicSansMS字体，如果系统内存在这个字体那么浏览器就会使⽤

ComicSansMS字体，如果没有的话就接着查找幼圆字体，以此类推直到浏览器可以表达系统存在的字体为⽌。

注意了，“sans-serif”不是某个字体的名称，⽽是⼀种在前⾯叙述的字体都⽆效时⽽最终选⽤的字体，称为浏览器通⽤字体，它取决于你

所⽤的浏览器默认的通⽤字体是什么，可能是“Arial”，也有可能是“Helvetica”。

2、⽹页常⽤字体通常分为5类：serif(衬线)、sans-serif(⽆衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体)，这些通⽤的名称允许

⽤户代理从相应集合中选择⼀款字体。

serif字体在字符笔画末端有叫做衬线的⼩细节，这些细节在⼤写字母中特别明显。

sans-serif字体在字符笔画末端没有任何细节，与serif字体相⽐，他们的外形更简单。

monospace字体，每个字母的宽度相等，通常⽤于计算机相关书籍中排版代码块。

fantasy和cuisive字体在浏览器中不常⽤，在各个浏览器中有明显的差异。

3、⽹页常⽤字体

Sans-serif:

Helvetica:被评为设计师最爱的字体，Realist风格，简洁现代的线条，⾮常受到追捧。在Mac下⾯被认为是最佳的⽹页字体，在Windows下

由于Hinting的原因显⽰很糟糕。

Arial:Helvetica的「克隆」，和Helvetica⾮常像，细节上⽐如R和G有⼩⼩差别。如果字号太⼩，⽂字太多，看起来会有些累眼。Win和Mac

显⽰都正常

LucidaFamily:LucidaGrande是MacOSUI的标准字体，属于humanist风格，稍微活泼⼀点。Mac下的显⽰要⽐Win下好。

Verdana:专门为了屏显⽽设计的字体，humanist风格，在⼩字号下仍可以清楚显⽰，但是字体细节缺失严重，最好别做标题。

Tahoma:也是humanist风格，字体和Verdana有点像，但是略窄⼀些，counter略⼩，曾经是Windows的标准字体，Mac10.5之后默认也有

安装。

TrebuchetMS:为微软设计的⼀个humanist风格字体，个⼈觉得个性太过突出，⽤得不好会不搭。

Serif：

Georgia:基本上适合正⽂屏显的衬线字体，⾮Georgia莫属了。笔画粗重，衬线明线，轮廓较⼤，⼩字体显⽰也很清晰，同时细节还算OK。

Times:Times是为了报纸⽽设计的，特点是可以在有限的空间塞进去更多的⽂字，笔画较弱，⼩字号正⽂屏显看起来累眼。曾经Engadget

改版的时候⽤了Times作为正⽂，被骂得很惨之后换成了Georgia。

中⽂：

宋体：Win最常见的字体，⼩字体点阵，⼤字体TrueType，但是⼤字体并不好看，所以最好别做标题。

微软雅⿊：Vista之后新引⼊的字体，打开Cleartype之后显⽰效果不错，不开Cleartype发虚。

华⽂细⿊：Mac下的默认中⽂。

4、写个⼩demo，在各种浏览上测试了⼀下，各种浏览器对这个字体的解析还是有差异的

/*重置{*/

*{padding:0;margin:0;}img{border:0;}li{list-style:none;}

/*}重置*/

div{font-size:1.2em;}

--⽹页字体通常分为5类--

你好helloworld  sans-serif(⽆衬线)