HTML font size——如何使用内联 CSS 样式更改文本大小

在 HTML 中，你选择的字体将对网页的外观发挥重要作用。

你可以选择字体的颜色、粗细、大小等。所有这些功能使你的网站和应用程序看起来更好，给用户更美观的体验。

使用 CSS 中的 font-size 属性，你可以更改网页上文本的大小。你可以在你编写的任何类型的 CSS 中使用此属性——外部、内部或内联。

在本文中，我将向你展示如何使用内联 CSS 中的 font-size 属性更改文本的大小。

什么是内联 CSS

内联 CSS 是可用于设置任何 HTML 元素样式的三种不同方式之一。

不是使用 class 或 id 属性定位元素，或者将元素本身作为选择器并使用它来设置样式，而是将所有 CSS 样式放在开始标记中。

此外，你必须确保样式的所有属性和值都在 style 属性内。此 style 属性是所有 HTML 标记都接受的众多属性之一。

在下面的示例中，我使用内联 CSS 将文本的背景颜色更改为深红色，将文本颜色更改为 #f1f1f1（浅灰色），将字体粗细更改为 bold。

<p style="background-color: crimson; color: #f1f1f1; font-weight: bold">
      Hello Campers...
</p>

顺便说一下，我的浏览器放大到了 400%，这就是为什么一切看起来都那么大的原因。我没有应用任何其他样式来实现这一点:)

要使用内联 CSS 更改文本的大小，你必须使用 style 属性来完成。你键入 font-size 属性，然后为其分配一个值。

有内置值，例如 large、larger、medium、small、x-large 等等：

在下面的代码片段中，我将 “Hello Campers...” 文本的大小更改为 x-large，这是 font-size 属性的内置值之一。

<p style="font-size: x-large">Hello Campers...</p>

你还可以使用带有任何单位（例如像素 px、rem 或 em）的数字来设置 font-size 属性的值。

最好使用编号值，因为它们使你可以更自由地选择所需的任何字体大小。

在下面的代码片段中，我使用内联 CSS 将文本的大小更改为 30px：

<p style="font-size: 30px">Hello Campers...</p>

在本文中，你学习了如何使用内联 CSS 和 font-size 属性更改文本大小。你还看到了如何为 font-size 属性赋值。

不过请注意：内联 CSS 非常适合设置样式，但你不应过分依赖它，因为它会使你的 HTML 难以阅读，尤其是在你在团队中工作时，你不想成为唯一能够阅读你自己的代码的人。

请注意，它还会覆盖具有内部或外部样式的任何样式集。你应该改用外部样式或内部样式，因为它们使你的 HTML 和 CSS 代码分开，这样更有利于可读性。

例如，在为 font-size 属性赋值时，最好以 rem 单位而不是 px 为单位赋值。这是因为当你使用 rem 时，浏览器将能够在用户放大或缩小时进行字体大小调整，而使用 px 时不会发生这种情况。

感谢你阅读本文，编码愉快！