HTML5之CSS-网页文本美化-字体样式

    做了挺长时间的程序员，逐渐的让我意识到，其实技术是给自己打开了一扇窗户，让自己更好的去了解这个世界。

    今天，来了解文字在网页在中，是如何去设置的。

    中间来一个小插曲，我想大家应该都用过办公软件，那么办公软件的文档工具，能操作文本的一些什么属性呢？首先，应该是字体的种类，然后就是设置，字体的大小，粗体，斜体，颜色，装饰（下划线，删除线）字母大小写等等。针对文字的一些属性设置，很显然，在网页的文本中当然也需要去设置这些属性。那么如何去设置呢？

    字体类型 font-famliy: cursive serif；它可以设置各种字体。并且可以给一个字体组，排在前面的优先级较高，如果用户没有列表中的字体，则会引用系统默认的字体。（个人感觉，这并不适合网页风格的统一性，应该有种方式，能够让字体统一起来，如果用户系统里不存在该字体，给它安装一个字体即可。很显然这是有代价的，看如何取舍）

    字体大小 font-size: 20px [2em] [200%][large]  。简单来说，就是两种取值，一种是相对大小，一种是固定大小(常用的就两种 百分比以及固定像素的用法。)相对值是相对于父元素的字体大小。如果父元素同样设置了相对值 2em，子元素依然取用相对值 2em ,那么子元素的字体将是顶级元素的4倍大小，从而造成字体混乱，因此要避免相对值的嵌套写法。

    粗体：font-weight: 400 [normal] || 900 [bold]    900或者bold取值都是最大值，400 或则normal表示正常值，其他值也就是其中的过渡值。

    斜体：font-style:italic ||normal||oblique  其中，italic和oblique都有倾斜的效果，后者更倾向于倾斜的字体类型，前者，更倾向于强制倾斜。

    颜色：color:blue 。（插曲，由于习惯用 font- xx  这种模式，然后突然前面的font都没有了，都有点不适应。）其实设置颜色，除了基本的颜色的英文名称之外还有一些其他取色标准。rgb调色，十六进制等等。（一般都是使用取色器去调整这些颜色的。所以取值都无关紧要的感觉。）(扩展：css3为了更方便的设置颜色，还提供了更规范的HSL表示方法，以及HSLA RGBA等来控制透明度的写法)

    装饰：text-decoration:none||overline||underline||blink||linethrough 。其实就是下划线，上划线，删除线等。(PS:blink这种闪烁效果 好像支持效果不大好，IE 谷歌浏览器都不支持)

    字母大小写：font-variant:normal  || capitalize || uppercase || lowercase     正常的，首字母大写的，全大写，全小写。（PS 各个浏览器对于首字母大写的实现方式有些许不同，有些认为必须要以空格分开才看做是一个单词，有些认为，只要是一个单词，那么就应该大写，比如Text-Transform ）

    最后其实发现，除了text-decoration 以及color   都是 font- xx 开头的，还有一些值的设置，比如蓝色，可以用blue表示，可以理解为，这是老外们的一种简单的语义化设置操作。

    css还给整个字体家族提供了一种综合的简便写法。能够依次的设置字体属性font-style font-variant font-weight font-size/line-height font-family  。其中的某个值是可以为空的，如果为空，则选择默认的值。这种写法适合设定一些统一设定值。

    小结：css的值设定基本可以理解为是英文的语义化设置，只要能够记住这些单词，那么久能够很好的理解css正在做的事情。

属性的取值也部分采取了语义化设置。如颜色 blue  首字母大小写，font-variant 

    font-style ： 字体-样式 （斜体）

    font-variant: 字体-词的变体 （理解为对字母大小写的变更）

    font-weight:字体-重量 （粗体）

    font-size/line-height  字体-大小 /行高  （绝对值：13px ，相对值：200%）

    font-family ：字体：家族 （通用字体：serif  fantasy 等等）