原文: 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 改变文字大小
你用来改变内部和外部 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 文本大小,让你能够创建更好的网页。
祝你编码愉快!