HTML 取消文本的粗体

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

HTML 取消文本的粗体

作者：迹忆客最近更新：2023/03/27 浏览次数：

Unbolding 是将粗体文本或标题重新格式化或更改为非粗体字体。有多种方法可以帮助我们在 HTML 和 CSS 中使标题或文本不加粗，但在本文中，我们将讨论如何从标题的一部分中取消加粗或删除加粗样式。

可以使用不同的方法从文本中删除粗体样式。让我们深入研究并逐一讨论。

从标题中删除粗体样式的不同方法

以下是用于从 HTML 和 CSS 中的标题和纯文本中删除粗体样式的方法。

分别在 CSS 和 HTML 中取消粗体文本

要从标题中删除粗体样式，我们需要使用带有某些属性的  标记。在这种方法中，我们同时使用 CSS 和 HTML 文件。

首先，将粗体文本包裹在 HTML 文件中的  中，并将类分配给  标签，然后为 CSS 文件中的  类赋予一个属性名称 font-weight: normal 。

CSS 示例：

.notbold{
font-weight:normal;
}

HTML 示例:

<h1>
    The bold text,<span class="notbold">The unbold text</span>
</h1>

使用内联 CSS 属性取消粗体文本

此方法还使用  标记从标题中删除粗体样式。但是这个方法没有像方法#1 那样使用单独的 .css 文件，但是我们可以使用内联 CSS 来从标题中删除粗体样式。

因此，要取消标题中文本的粗体，首先将粗体文本包装到  中，然后将 style="font-weight: normal" 赋给  标记。

HTML 示例：

<h1>
    This bold text, <span style="font-weight:normal">The unbold text</span>
</h1>

使用 `` 标签取消粗体文本

此方法使用  标记取消标题中文本的加粗。要取消加粗文本，请将加粗文本包装到  中，然后将 font-weight: normal 分配给 CSS 文件中的 。

CSS 示例：

span{
    font-weight:normal;
}

HTML 示例:

<h1>
    This is bold text bold, <span>but the unbold text</span>
</h1>

使用内联样式属性取消粗体文本

要从标题中删除粗体样式，我们可以使用此方法的样式属性。通过将带有 font-weight:normal 的样式属性分配给 <h> 标签可以帮助我们取消标题的加粗。

HTML 示例：

<h1 style="font-weight: normal;">HTML Unbold</h1>

完整代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML Unbold</title>
    <style>
        .notbold{
    font-weight:normal;
}
span{
    font-weight:normal;
}
    </style>
</head>
<body>

    <!--Method#1-->
    <h1>
    This is bold text bold, <span>but the unbold text</span>
    </h1>
    <!--Method#2-->
    <h1>
    This bold text, <span style="font-weight:normal">The unbold text</span>
    </h1>

    <!--Method#3-->
    <h1>
    This is bold text bold, <span>but the unbold text</span>
    </h1>

    <!--Method#4-->
    <h1 style="font-weight: normal;">HTML Unbold</h1>

</body>
</html>

输出结果如下：

HTML 取消文本的粗体

总结

了解如何从标题中删除粗体样式。我们已经讨论了正在展开的内容以及我们如何从标题中删除粗体静物。此外，本文还学习了从标题中删除粗体样式的不同方法。

上一篇：更改 HTML 文本字符串中一个单词的颜色

下一篇：HTML 中禁用右键单击上下文菜单

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享