文本与字体样式2.0

最新推荐文章于 2023-05-23 17:25:50 发布

少年游四方

最新推荐文章于 2023-05-23 17:25:50 发布

阅读量951

点赞数 2

分类专栏： # Web技术应用基础——CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_45823118/article/details/115354529

版权

Web技术应用基础——CSS 专栏收录该内容

13 篇文章 21 订阅

订阅专栏

字体粗细与风格

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

任务描述

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

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

同时设置 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>

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

字体风格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>

字体显示效果如下：

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

提示：

在使用时选择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是一样的，就不放上来了】

少年游四方

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
文本与字体样式2.0

字体粗细与风格任务描述相关知识字体粗细font-weight字体风格font-style任务描述上一篇中，我们学习了使用color，font-family和font-size来设置字体的属性。本篇中，我们将继续学习如何在网页中设置字体粗细以及字体风格。本关任务是使用CSS字体属性设置页面字体的粗细和风格，设置之后页面标题和页脚效果如下：要求：同时设置 h1, h2 的font-weight为normal；设置footer的字体粗细为light；显示效果为斜体(italic)。相关知识字
复制链接

扫一扫