web前端开发【连载5】-前端字体

最近江苏都是阴雨连绵，但是不管天气怎么不好，我们都要保持一个好心情哦O(∩_∩)O~

粘人的傻球

web前端字体

在做页面的时候都会遇到各种字体，根据UI的设计，不同的模块可能会用到不同的字体，但是每次都是根据UI的设计稿来获取字体，但是作为前端开发，连最基本的字体种类都不知道，今天就来全面的整理一下，有时候各种不协调就败在字体上面：

1. 在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。
   　　 浏览器中展示网页文字内容时，文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族？字体族就是你在css代码中看到“font-family”的代码内的一类字体名称，例如下面这行代码：
   font-family:"Comic Sans MS","幼圆","黑体",sans-serif;
   　　按照W3C标准，浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体，如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体，如果没有的话就接着查找幼圆字体，以此类推直到浏览器可以表达系统存在的字体为止。
   　　注意了，“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显示都正常
   Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
   Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
   Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
   Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。
   Serif：
   Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
   Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。
   中文：
   宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
   微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
   华文细黑：Mac下的默认中文。

手机端字体思考可以参考：【原】移动web页面使用字体的思考