前端学习第五天！-CSDN博客

本文链接：https://blog.csdn.net/m0_59060850/article/details/128933230

接上篇→

3.CSS Fonts（字体）属性

用于定义字体系列、大小、粗细、和文字样式（如斜体）。

3.1字体系列

CSS使用font-family属性定义文本的字体系列。

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei","微软雅黑";}

注意：

各种字体之间用英文逗号隔开；

一般情况下，如果有空格隔开的多个单词组成的字体，加引号；

尽量使用默认字体保证任何用户在浏览器中都能正确显示。

几种常见字体：body{font-family:'microsoft YaHei',tahoma,arial,'Hiragino Sans GB;}

注意括号里的字体为运行时依次查询，直到找到可用字体类型。

3.2字体大小

CSS使用font-size属性定义字体大小

p {
    font-size: 20px;
}

谷歌浏览器默认文字大小为16px;

不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确的大小。

给body进行整个页面字体大小设置（标题特殊，需要单独设置）

3.3字体粗细

CSS使用font-weight属性设置文字的粗细

.bold {
font-weight: bold;
}

或
.bold {
font-weight: 700;
}
均为加粗

<p class="bold">hhh</p>

属性值	描述
normal	默认值（不加粗）
bold	粗体
100-900	400等同于normal；700等同于bold ；注意：数字后不跟单位

3.4字体样式

CSS使用font-style属性设置字体风格

p {
font-style: normal;
}

属性值	作用
normal	默认值，显示标准字体
italic	显示斜体字样

3.5字体复合属性

字体属性可以把以上文字样式综合来写，这样可以节约代码：

例子练习如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahei'; */
            /* 可简写为 */
            /* font: font-style font-weight font-size font-family ; */
            /* 不可颠倒顺序 */
            font: italic 700 16px 'Microsoft yahei';
        }

    </