【从零开始学前端】day5——CSS Font（字体）

CSS Font 字体

通过 CSS 的 Font属性，定义字体的加粗，大小，文字样式等。

字体系列

font-family 属性设置文本的字体系列。

一般可以给font-family设置几个后备属性。如果浏览器不支持第一张，则可以自动使用第二种。 

TIP: 如果字体系列的名称超过一个汉字或英文单词，它必须用引号，如 font-family："宋体"。

p{font-family:"宋体";}

多个字体系列是用一个逗号分隔指明：

p{font-family:"宋体", Times, serif;}

字体样式

font-style是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常（normal） - 正常显示文本

斜体（italic） - 以斜体字显示的文字

倾斜的文字（oblique） - 文字向一边倾斜

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

italic VS oblique 

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。

倾斜（oblique）文本是正常竖直文本的一个倾斜版本。

字体大小

font-size 属性设置文本的大小，是字体最常用的属性之一。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

所以请遵守W3C规范，务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值分为绝对大小和相对大小。

1.绝对大小：

设置一个指定大小的文本

不允许用户在所有浏览器中改变文本大小

确定了输出的物理尺寸时绝对大小很有用

2.相对大小：

相对于周围的元素来设置大小

允许用户在浏览器中改变文字大小

h1 {font-size:24px;} 
h2 {font-size:1em;} /* 1em=12px */
body {font-size:100%;} 

字体粗细（字重）

font-weight 属性设置文本的大小。

font-weight常用的属性值有以下四种，字重由低到高依次是：

p.thiner {font-weight:lighter;}
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:bolder;}

当然，你也可以使用100~900的数值来表示属性值。其中，400相当于normal，700相当于bold。

p.thiner {font-weight:100;}
p.normal {font-weight:400;}
p.thick {font-weight:700;}
p.thicker {font-weight:900;}