3.字体样式-CSS基础

一、字体样式

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：白色