CSS_字体

俗话说的好，一个网站品质如何一看它用的字体就一目了然

字体属性：属性一类字体的大小和外观

网页中的字体有三个来源

①用户机器中安装的字体，随操作系统一起安装，由本地应用共享+

②第三方网站上的字体

③保存在自己Web网站上的字体

 

与字体相关的6个属性

font-family

font-size

font-style

font-weight

font-variant

font

 

font-family:字体族

用于设定元素中文本的字体，属性可以继承。在指定文本字体的时候，需要多列出几种后备字体，以首选字体无效，这个字体列表叫做字体栈，比如

body{font-family: " Helvetica Neue ",cursive,sans-serif}

上面代码相当于在声明：使用Helvetica Neue字体显示网页，如果机器中没有，则使用cursive替代，如果cursive也没有，则随便找一种无衬线字体，这个的sans-serif属于通用字体

 

通用字体

使用通用字体的目的是在最坏的情况下，确保网页能够显示出来。通用字体一共有5种

Serif：衬线字体，在每个字符笔画的末端都会有一些装饰线

Sans-serif：无衬线字体，字符笔画的末端没有装饰线

Monospace:等宽字体

Fantasy：不能归入其他类别的字体

 

Font-size:字体大小

实际上，浏览器的内置样式表已经为每个HTML元素内置了font-size，所以你在设置font-size时，实质是在修改它的默认值。

设置字体大小的单位

①绝对单位：像素，点，设置多大就多大，与祖先元素无关

②相对单位：百分比，em，字体大小是相对于最近的“被设定过字体大小的”祖先元素来确定

 

另外CSS3中，新增了一个rem，这个单位是集相对大小和绝对大小有点于一身

 

 

Font-style:字体样式

可以取值:italic,oblique,nomal，用来设置字体为斜体，正体和常规，需要注意的时候，设置完italic斜体之后，须通过normal设置回正体，使用oblique设置斜体也是一样。Normal的作用是取消特殊格式

Font-weight:字体粗细

可以取值数字或关键字，但实际上对于font-weight来说只有两个值，即可bold和normal

 

Font-varitant字体变化

可取值small-caps,normal，上面已说过了normal值用于消除特殊格式，而small-caps值，用于把字体中的小写英文字母变化为大写英文字母

 

字体的简写规则：

如果要简写必须满足下面规则

规则1：必须声明font-family字体族和font-size字体大小

规则2：所以值必须按照一下顺序声明

①font-weight，font-style，font-varitant之间不分先后

②然后是font-size

③最后是font-family

比如下面代码是把font-weight设置bold，font-style设置italic，font-variant设置samll-caps，font-size设置200%，font-family设置sans-serif

 

body{font: bold italic small-caps 200% sans-serif}

 

此为本人学习笔记，欢迎高手指点