文本与字体样式2.0

冷不防 2022-11-15 11:28 180阅读 0赞

### 字体粗细与风格 ###

*  任务描述
 *  相关知识
 *   *  字体粗细font-weight
     *  字体风格font-style

# 任务描述 #

上一篇中，我们学习了使用`color`，`font-family`和`font-size`来设置字体的属性。本篇中，我们将继续学习如何在网页中设置字体粗细以及字体风格。

本关任务是使用CSS字体属性设置页面字体的粗细和风格，设置之后页面标题和页脚效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]  
**要求：**

*  同时设置 h1, h2 的font-weight为normal；
 *  设置footer的字体粗细为light；显示效果为斜体(italic)。

# 相关知识 #

## 字体粗细font-weight ##

我们使用`font-weight`属性设置文本的粗细。印刷世界中，根据内容的需要会设置不同的字体粗细，同样的在网页中也要更具内容设置。

*  font-weight设置的数值在100~900之间，分为9级加粗度。有些字体会内置加粗的级别。
 *  例如100 对应最细的字体，900对应最粗的字体； 400对应normal·，而 700 则等价于 bold。
 *  另外，设置值为lighter, bolder代表将当前元素的粗体设置为比其父元素粗体更细或更粗一步。

例如，对于如下实例：

<!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>字体粗细</title>
      <style type="text/css"> #normal { font-weight: 400; } #light { font-weight: 100; } </style>
    </head>
    <body>
      <h1>Blod: 温馨提示 </h1>
      <p id="normal">Normal: 少一串脚印，多一份绿意。</p>
      <p id="light">Light: 保护环境，从我做起。light</p>
    </body>
    </html>

其在网页中的显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]

## 字体风格font-style ##

我们在设置斜体文本时使用 font-style 属性。

**它属性有三个值：**

*  normal - 文本正常显示；
 *  italic - 文本斜体显示；
 *  oblique - 文本倾斜显示。

例如：

<!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>字体风格</title>
      <style type="text/css"> p { font-size: 25px;} .normal { font-style:normal} .italic { font-style:italic} .oblique { font-style:oblique} </style>
    </head>
    <body>
      <p class="normal">This is a normal paragraph.</p>
      <p class="italic">This is a italic paragraph.</p>
      <p class="oblique">This is a oblique paragraph.</p>
    </body>
    </html>

字体显示效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]  
你可能注意到本实例使用英文作为内容，在中文中，是不推荐使用斜体的，换句话说，中文是没有斜体的。虽然可以使用样式倾斜，但不利于阅读。

**提示：**

*  在使用时选择normal的情况很好判断，但是如何在italic和oblique中进行选择呢？
 *  其实，一般情况下，italic 和 oblique文本在网页中看起来完全一样。
 *  斜体（`italic`）是一种简单的字体风格。
 *  与此不同，倾斜（`oblique`）文本则是正常竖直文本的一个倾斜版本。

**代码文件**：

**step8/CSS/style.css:**

body {
        /*背景渐变*/
        background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #7ECABA, #E2FCCB);
        /* 标准的语法 */
        font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
        /*居中页面*/
        width: 45em;
        margin: 0 auto;
    }
    
    h1,
    h2 {
        /* 设置h1, h2 的font-family*/
        font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
        /* ********** BEGIN ***********/
        font-weight: normal;
    
        /* ********** END ***********/
    }
    
    h1 {
        /* 设置h1元素为 35px 的字体大小 */
        font-size: 2.1875em;
        /* 35px/16px */
    }
    
    h2 {
        background-color: #eaebef;
        /* 设置h2元素的字体颜色为：#7d717c */
        color: #7d717c;
        /* 使用em的方式设置h2元素为 28px 的字体大小 */
        font-size: 1.75em;
        /*28px/16px */
    }
    
    h3 {
        background-color: white;
        /* 使用em的方式设置h3元素为 20px 的字体大小 */
        font-size: 1.25em;
        /* 设置h3元素的字体颜色为：green */
        color: green;
        padding-left: 10px;
    }
    
    hr {
        height: 1px;
        border: none;
        border-top: 2px dashed #88b2d2;
    }
    
    /* 子选择器 */
    
    em,
    a:link,
    .intro .subhead {
        font-weight: bold;
    }
    
    footer {
        /* ********** BEGIN ***********/
        font-weight: light;
        font-style: italic;
    
    
        /* ********** END ***********/
        margin: 10px auto;
    }
    
    footer a {
        font-style: normal;
    }
    
    /* CONTENT
    ----------------------------------- */
    
    .architect {
        background-color: #fff;
        padding: 1.5em 1.75em;
    }
    
    /* :::: Intro ::::: */
    
    .intro {
        background-color: #888888;
        /* 设置 .intro 类元素的字体颜色为 #fefefe */
        color: #fefefe;
        padding: 1px 1.875em .7em;
    }
    
    .intro .subhead {
        /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
        font-size: 1.125em;
    }
    
    .intro p {
        font-size: 1.0625em;
    }
    
    /* :::: chapter Descriptions ::::: */
    
    .chapter p {
        font-size: .9375em;
    }
    
    img {
        border-radius: 8px;
    }
    
    /* :::: Links :::: */
    
    a:link {
        /* 设置 a:link 元素的字体颜色为 #b44f4f */
        color: #e10000;
    }
    
    a:visited {
        color: #b44f4f;
    }
    
    a:hover {
        color: #f00;
    }
    
    .intro a {
        color: #fdb09d;
    }
    
    .intro a:hover {
        color: #fec4b6;
    }

【还有三个文件，和前面的1.0是一样的，就不放上来了】

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/95645fc6ee3349348a93a336e91f1106.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210331165442208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021033116563959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70