CSS学习笔记（五）--CSS样式之字体

CSS 字体系列

1. 通用字体

• Serif 字体

• Sans-serif 字体
• Monospace 字体
• Cursive 字体
• Fantasy 字体

font-family 定义文本的字体系列。
body {font-family: sans-serif;}
组合字体
h1 {font-family: Georgia, serif;}
通过结合特定字体名和通用字体系列来解决没有安装 Georgia 字体，使用默认字体

字体风格

font-style最常用于规定斜体文本。
该属性有三个值：

• normal - 文本正常显示
• italic - 文本斜体显示
• oblique - 文本倾斜显示

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体变形

font-variant 属性可以设定小型大写字母。报纸首字母特别大。
p {font-variant:small-caps;}

字体加粗font-weight

使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字体大小font-size

请始终使用正确的 HTML 标题，比如使用

-

来标记标题，使用

来标记段落。

1. 像素px来设置字体大小

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

2. em 来设置字体大小 1em=16px

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

3. 结合使用百分比和 EM
   在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
   实例

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}