HTML 字体大小——如何用 HTML 标签改变文本大小

原文： HTML Font Size – How to Change Text Size with an HTML Tag

当你用 HTML 标签添加文本到 HTML 文件中时，有时你需要调整文本在浏览器中的显示方式。

在这篇文章中，你将学习如何用 HTML 标签改变文本大小。

在继续之前，你必须知道我们只有一种方法可以做到这一点：通过 CSS 的 font-size 属性，我们可以通过内联、内部或外部样式设计来使用 font-size 属性。

在过去，我们可以在 HTML 标签中调整文本大小而不使用 CSS。但那是在 HTML5 之前。我们使用标签添加文本，它可以接受一个 size 属性，如下图所示：

<font size="5">  
    Hello World 
</font>

这个 size 属性的取值范围是 1-7，其中文本大小从 1 增加到 7。但就像我说的，这个方法已经过时了，大多数人甚至不知道它的存在。

如果你急着想知道如何改变你的文本大小，那就来看看吧。

// 使用内联 CSS
<h1 style="font-size: value;"> Hello World! </h1>

// 使用内部/外部 CSS
selector {
    font-size: value;
}

假设你并不着急。让我们深入了解一些。

如何用内联 CSS 改变文本大小

内联 CSS 允许你将样式应用于特定的 HTML 元素。这意味着我们直接将 CSS 放入一个 HTML 标签。我们使用 style 属性，它存放我们所有的样式。

<h1 style="...">Hello World!</h1>

我们使用 font-size 属性和相应的值，通过内联 CSS 来改变文本大小。这个值可以使用任何你喜欢的 CSS 单位，如 em、px、rem 等等。

<h1 style="font-size:4em; "> Hello World! </h1>
<p style="font-size:14px; "> Any text whose font we want to change </p>

完美的语法应该是：

<TEXT-TAG style="font-size:value;"> ... </TEXT-TAG>

你用来改变内部和外部 CSS 样式的文字大小的方法是相似的，因为你使用了一个选择器，语法如下：

selector {
    font-size: value;
}

选择器可以是我们的 HTML 标签，也可以是一个类或一个 ID，比如：

// HTML
<p> Any text whose font we want to change </p>

// CSS
p {
    font-size: 14px;
}

或者我们可以使用一个类：

// HTML
<p class="my-paragraph" > Any text whose font we want to change </p>

// CSS
.my-paragraph {
    font-size: 14px;
}

在这篇文章中，你学到了如何使用 CSS 来改变 HTML 元素的字体/文本大小。你还看到了在引入 HTML5 之前，开发者是如何做到这一点的。

另外，请记住，使用内部或外部样式来设计你的 HTML 元素总是更好的，因为与内联样式相比，它具有很大的灵活性。

例如，你可以为所有的 p 标签使用一个 CSS 类，而不是为所有的 p 标签元素添加内联样式。

使用内联样式并不被认为是最佳做法，因为它导致了大量的重复——你不能在其他地方重复使用这些样式。要了解更多，你可以阅读我的文章《如何在 HTML 中使用 CSS 内联样式》。

我希望这个教程能帮助你理解如何改变 HTML 文本大小，让你能够创建更好的网页。

祝你编码愉快！