3.CSS字体属性

news2025/1/4 12:09:11

3.1字体系列

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

p{font-family:"微软雅黑"}

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

3.2字体大小

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

p{

font-size:20px;

}

px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px;
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
可以给body指定整个页面文字大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签化比较特殊，需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

3.3 font-weight字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体大小</title>
    <style>

      .bold {
        /* font-weight:bold; */
        /* 这个700=bold */
        /* 实际开发中，我们更提倡使用数字，表示加粗或者变细 */
        font-weight: 700;
      }
      h2 {
        font-weight: 400;
        /* font-weight:normal */

      }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p class="bold">拼死也要克服它，</p>
    <p >这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

属性值	描述
normal	默认值(不加粗的)
bold	定义粗体（加粗的）
100-900	400等同于normal,而700等同于bold 注意这个数字后面不跟单位

学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗

实际开发时，我们更喜欢用数字表示粗细

3.4 字体样式

css使用font-style属性设置文本的风格

p{

font-style:normal;

}

属性值	作用
normal	默认值，浏览器会显示标签的字体样式 font-style:normal
italic	浏览器会显示斜体的字体样式

注意：平时我们很少给文字加斜体，反而要给斜体标签(em,i)改为不斜体字体。

3.5 字体复合属性

body {

font:font-style font-weight font-size/line-height font-family;

}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体大小</title>
    <style>

     .fuheziti{
        font: italic 700 16px microsoft yahei;
     }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p class="fuheziti">拼死也要克服它，</p>
    <p >这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

实现效果：