一、字体样式
1.常用的字体样式属性
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
可以看到，大部分字体样式属性是以
font为前缀，font意思就是字体。
二、font-family（字体类型）
我们常说的宋体、楷体等就是字体类型。
在
CSS中，使用font-family属性定义字体类型。
1.语法格式
<style type="text/css">
font-family: 字体1,字体2,字体3,...,字体N;
</style>
（1）说明
可以看大，
font-family可以有多个属性值，也就是指定了多种字体，使用字体时按从左到右的顺序排列，以英文逗号隔开。
① font-family的默认值
若不指定
font-family，则浏览器通常默认使用宋体。
（2）属性值与双引号
若字体类型的属性值只有一个英文单词时，则不需要加上双引号；若是多个英文单词或中文，则需要加上双引号。
（3）多个属性值
电脑上安装的字体不尽相同，可能有些字体安装了，有些字体没有安装。
通过指定多个属性值，来优先使用第一个属性值，若是第一个属性值没有安装，则使用第二个属性值，依此类推，若是指定的多个属性值都没有安装，则会使用默认字体类型。
（4）实际开发
在实际开发中，美观的中文字体通常使用
宋体、微软雅黑；美观的英文字体有Times New Roman、Arial、Verdana。
三、font-size（字体大小）
在
CSS中，使用font-size属性来定义字体大小。
1.语法格式
<style type="text/css">
font-size: 像素值;
</style>
（1）说明
font-size属性取值有2种：
- 关键字：如small、medium、large等。
- 像素值：如16px等。
① 实际开发
在实际开发中，关键字这种方式基本不会用，所以我们掌握像素值即可。
（2）px像素值
关于px是什么，请看我的另一篇文章
01-CSS基础。
四、font-weight（字体粗细）
在
CSS中，使用font-weight属性来定义字体粗细。注意，字体粗细跟字体大小是完全不一样的，可千万不要弄混了，粗细指“肥瘦”，大小指“宽高”。
1.语法格式
<style type="text/css">
font-weight: 取值;
</style>
（1）说明
font-weight属性取值有2种：
- 一种是
100~900的数值。
- 另一种是关键字。
（2）属性值
| 属性值 | 说明 |
|---|---|
| normal | 正常（默认值） |
| lighter | 较细 |
| bold | 较粗 |
| bolder | 很粗 |
① 实际开发
在实际开发中，一般只会使用到
bold这一个属性值，其它的基本用不上。
② 属性值为数值
font-weight属性的值可以是100~900的数值。其中，100相当于lighter，400相当于normal，700相当于bold，900相当于bolder。
Ⅰ.实际开发
在实际开发中，不建议使用数值作为
font-weight属性的值。
五、font-style（字体风格）
在
CSS中，可以使用font-style属性来定义斜体效果。
1.语法格式
<style type="text/css">
font-style: 取值;
</style>
（1）说明
font-style属性取值有2种：
- 关键字：如small、medium、large等。
- 像素值：如16px等。
（2）属性值
| 属性值 | 说明 |
|---|---|
| normal | 正常（默认值） |
| italic | 斜体 |
| oblique | 斜体 |
（3）示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>字体样式</title>
<style type="text/css">
#p1{
font-style: normal;
}
#p2{
font-style: italic;
}
#p3{
font-style: oblique;
}
</style>
</head>
<body>
<p id="p1">font-style取值为normal</p>
<p id="p2">font-style取值为italic</p>
<p id="p3">font-style取值为oblique</p>
</body>
</html>
font-style示例1.png
① italic与oblique的区别
从上图可看到，italic与oblique的效果是一样的。
其实，
italic是字体的一个属性，但并不是所有的字体都有italic属性。对于有
italic属性的字体，我们可使用font-style: italic;，但对于没有italic属性的字体，只能使用font-style: oblique;来实现。
（4）实际开发
在实际开发中，
font-style属性很少用到。
六、color（字体颜色）
在
CSS中，可以使用color属性来定义字体颜色。
1.语法格式
<style type="text/css">
font-style: 颜色值;
</style>
（1）说明
color属性取值有2种：
- 关键字：如small、medium、large等。
- 16进制RGB值：如16px等。
① 关键字
关键字就是颜色的英文名称。
② 16进制RGB值
在开发中，单纯靠关键字满足不了实际开发需求，因此引入了
16进制RGB值。
16进制RGB值类似于#00FFFF形式的值。
Ⅰ.获取16进制RGB值
常用的有2种方法：
- 在线工具。
- Color Picker。
Ⅱ.2个重点色值
对于
16进制RGB值有2个重点色值需要重点记忆：
000000：黑色
FFFFFF：白色
网友评论