📜  html 字体大小 - Html (1)

📅  最后修改于: 2023-12-03 15:31:16.776000             🧑  作者: Mango

HTML 字体大小

在 HTML 中设置文本的字体大小是一项常见的任务。下面将介绍如何使用 HTML 标签和样式来设置文本的字体大小。

使用 HTML 标签设置字体大小

可以通过使用 h1h6 标签设置文本的字体大小。这些标签由大到小依次排列,h1 字体最大,h6 字体最小。

示例代码:

<h1>这是一个 h1 标题</h1>
<h2>这是一个 h2 标题</h2>
<h3>这是一个 h3 标题</h3>
<h4>这是一个 h4 标题</h4>
<h5>这是一个 h5 标题</h5>
<h6>这是一个 h6 标题</h6>

输出效果:

这是一个 h1 标题

这是一个 h2 标题
这是一个 h3 标题

这是一个 h4 标题

这是一个 h5 标题
这是一个 h6 标题
使用行内样式设置字体大小

也可以使用 HTML 的行内样式来设置文本的字体大小。使用属性名 font-size,属性值可以是像素、百分比、emrem

示例代码:

<p style="font-size: 16px;">这是一个字体大小为 16px 的段落</p>
<p style="font-size: 150%;">这是一个字体大小为父元素 1.5 倍的段落</p>
<p style="font-size: 2em;">这是一个字体大小为父元素 2 倍的段落</p>
<p style="font-size: 2rem;">这是一个字体大小为根元素 2 倍的段落</p>

输出效果:

这是一个字体大小为 16px 的段落

这是一个字体大小为父元素 1.5 倍的段落

这是一个字体大小为父元素 2 倍的段落

这是一个字体大小为根元素 2 倍的段落

使用样式表设置字体大小

除了使用行内样式,还可以使用 CSS 样式表来设置文本的字体大小。

示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>HTML 字体大小</title>
    <style>
        p {
            font-size: 16px;
        }
        .large {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>这是一个字体大小为 16px 的段落。</p>
    <p class="large">这是一个字体大小为 24px 的段落。</p>
</body>
</html>

输出效果:

这是一个字体大小为 16px 的段落。

这是一个字体大小为 24px 的段落。

总结

通过 HTML 标签、行内样式和样式表,可以方便地设置 HTML 文档中的文本字体大小。在实际应用中可以根据需要选择不同的方式进行设置。