四、css中字体(font)的常用属性字体 font-size(可继承), chrome 浏览器的默认字体大小是16p

1. 字体

font-size(可继承), chrome 浏览器的默认字体大小是16px。
- 由于字体设计的原因，不同的字体使用相同的长度单位，可能具体表现出来的结果不一样，有些大有些小。
- 默认的很多字体都靠下。取决于基线，x的最下端就是基线。引用mdn的一句话就是：基线是指欧洲和西亚文字排版中，用于在上面放置字符的一条假想的基准线。字符下降的部分，比如 g 和 p，会向下超出基线，带弧形的会向上和向下扩展的字形（Glyph (en-US)），比如 C 或 3，会略微向下超出基线。地址：developer.mozilla.org/zh-CN/docs/…
font-family,指定字体族. font-family: "微软雅黑", "新宋体",serif
- 写英文名兼容性更好。
- 字体有两种,衬线(serif)和非衬线(sans-serif),一般在末尾加上一个作为保底。
- windows操作系统的默认字体是微软雅黑。
- 当前面一种(微软雅黑)不存在时,往后找(新宋体)，依然不存在就往后用一个衬线字体作为保底。
font-style,指定字体是否倾斜。可选值：inherit、italic、oblique、normal。
- normal 正常的
- inherit 从父代继承
- italic 优先使用字体的倾斜样式（设计人员设计的），没有就强制倾斜。
- oblique 直接强制倾斜字体
font-weight,指定字体的粗细。可选值：lighter、normal、bold、bolder
- lighter 细的
- normal 正常的
- bold 加粗
- bolder 更粗（没有的情况下使用bold）
复合属性
- 直接使用font属性 :font: ...,font-size,font-family;。
- font-size,font-family不能缺少,最后一位必须使用font-family,倒数第二位必须使用font-size，其它位置不做限制。
- 各个属性之间用空格隔开。
- 字体族之间依然使用","隔开

上代码

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        body {
            font-size: 20px;
            font-family: "微软雅黑", serif;
        }

        /*利用css的继承特性，可以指定默认的字体大小*/
        .div1 {
            font-size: 40px;
            font-family: "楷体", serif;
        }

        .div3 {
            font-size: 20px;
            font-family: "宋体", serif;
        }

        .div2 {
            font-size: 30px;
            font-family: "华文彩云", serif;
        }

        .div4 {
            font-size: 16px;
        }

        /*使用字体名称的时候了，用英文兼容性更好*/
        /*serif 衬线*/
        /*sans-serif 非衬线*/
        .div6 {
            font-size: 50px;
            font-family: "STHupo", "Microsoft YaHei", serif;
        }

        .div7 {
            font-size: 50px;
            font-family: "STHupo", "Microsoft YaHei", sans-serif;
        }

        .div9 {
            /*斜体 有就用，没有就强制倾斜*/
            font-style: italic;
            font-weight: lighter;

        }

        .div10 {
            font-style: oblique;
            font-weight: normal;
        }

        .div11 {
            /*斜体 有就用，没有就强制倾斜*/
            font-style: italic;
            font-weight: bolder;

        }

        .div12 {
            font-style: oblique;
            font-weight: bold;
        }

        .div13 {
            font: bold italic 50px "华文彩云", "华文琥珀", sans-serif;
        }
    </style>
</head>
<body>
<h1>font-size</h1>
<div class="div1">Lorem ipsum dolor.</div>
<div class="div2">Nobis, possimus totam.</div>
<div class="div3">Amet illum, sequi!</div>
<div class="div4">Amet illum, sequi!</div>
<div class="div5">默认</div>
<hr>
<hr>
<h1>font-family</h1>
<div class="div6">Rock Test</div>
<div class="div7">Rock Test</div>
<div class="div8">Rock Test</div>
<hr>
<hr>

<h1>font-style font-weight</h1>
<div class="div9">Rock italic</div>
<div class="div10">Rock oblique</div>
<div class="div11">Rock test</div>
<div class="div12">Rock test</div>
<!--强调-->
<h1>em强调</h1>
<em>Rock Test</em>

<hr>
<hr>
<h1>复合属性</h1>
<div class="div13">复合属性</div>

</body>
</html>

四、css中 字体(font)的常用属性

1. 字体

四、css中字体(font)的常用属性