- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-25 09:43:22
CSS Fonts(字体)
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）
CSS字体系列：
在 CSS 中，有两种不同类型的字体系列名称：
通用字体系列：拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
特定字体系列 ： 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
| 字体 | 示例 |
| Serif 字体 | This is a headingThis is a paragraph |
| Sans-serif 字体 | This is a headingThis is a paragraph |
| Monospace 字体 | This is a headingThis is a paragraph |
| Cursive 字体 | This is a headingThis is a paragraph |
| Fantasy 字体 | This is a headingThis is a paragraph |
设置字体系列
font-family 属性用于设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"，多个字体系列是用一个逗号分隔指明
效果图：
对于较常用的字体组合，看看我们的 Web安全字体组合
设置字体样式
主要是用于指定斜体文字的字体样式属性
这个属性有三个值：
normal：正常显示文本
italic：以斜体字显示的文字
oblique：文字向一边倾斜（和斜体非常类似，但浏览器不太支持）
<style type="text/css">
h1{
font-style: normal;
}
h2{
font-style:italic;
}
h3{
font-style:oblique;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
</body>点击 "运行实例" 按钮查看在线实例
效果图：
设置字体大小：
font-size 属性设置文本的大小。
font-size 值可以是绝对或相对值。
绝对值：将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小（不利于可用性），绝对大小在确定了输出的物理尺寸时很有用
例：像素（px）
相对大小：相对于周围的元素来设置大小允许用户在浏览器改变文本大小
例：em
1em 等于当前的字体尺寸，如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
<style type="text/css">
.p1{
font-size:16px;
}
.p2{
font-style:1em;
}
</style>
</head>
<body>
<p class="p1">This is a heading</p>
<p class="p2">This is a heading</p>
</body>点击 "运行实例" 按钮查看在线实例
效果图：
设置字体加粗：
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
<style type="text/css">
.p1{
font-weight:bold;
}
.p2{
font-weight:700;
}
</style>
</head>
<body>
<p class="p1">This is a heading</p>
<p class="p2">This is a heading</p>
</body>点击 "运行实例" 按钮查看在线实例
效果图：
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
推荐手册