您可以在网页上引起对文本的注意。你可以做到orange, for example. You can大胆的orunderlineit. You can highlight一个短语在一个句子中。

除了这些格式选项外，您还可以更改文本的字体大小，以吸引读者的眼睛并建立视觉层次结构。您会在此博客文章中注意到标题（

)has the largest font size. Next up are my heading elements (

,

, and

), all larger than the

elements beneath them. This way, the visitor (you) knows where different sections begin.

HTML标题并不是更改网站上字体尺寸的唯一方法。假设您要缩小或放大默认标题尺寸，或者想更改页面上其他元素的字体大小。在这种情况下，您可以更改字体大小CSS。Let’s walk through the process below.

如何更改CSS中的字体尺寸

font-size是控制网页上字体大小的CSS属性。您可以使用几种不同的值来定义font-size财产。请查看下面的示例，其中包括可以在CSS中使用的不同值和单位。

See the Pen字体大小：不同的值by Christina Perricone (@hubspot） 在CodePen。

These values offer different approaches to setting the font size on your web page. The one you choose will depend on the needs and goals of your site. Let’s take a closer look at these values, weighing the pros and cons of each.

减少和增加字体大小属性值Font Size

In CSS,font-sizecan be specified with any of the following values. For each property value, I’ll give an example of its syntax and a brief description.

绝对大小的关键字

元素{font-size：small;}

绝对大小的关键字s are based on the default font size. Most commonly, the default font size is中等的(which translates to 16 pixels or 1em) though it can differ by browser and font family. Note that in HTML the default font size is 16px.

The absolute-size keywords are:

• xx-small
• x-small
• small
• 中等的
• 大的
• x-large
• xx-large
• xxx-large

以下是每个浏览器中的外观：

See the Pen字体大小：绝对尺寸by Christina Perricone (@hubspot） 在CodePen。

绝对大小的关键字s make it easy to set text to a specified size and create a font hierarchy for your page. However, they do not allow a user to change the text size in all browsers, which makes it a poor choice for accessible design. To be more inclusive of all users, try relative-size keywords.

Relative-size keyword

元素{字体大小：较大；}

Relative-size keywords set the font larger or smaller relative to the parent element's font size. These relative sizes are roughly based on the ratio of the absolute-size keywords described above.

因此，如果父元素的字体大小为大的，一个定义相对大小的子元素较小will have a font size of中等的。让我们看一下这个假设的代码。

See the Penfont-size: relative sizeby Christina Perricone (@hubspot） 在CodePen。

Notice that I've used the class selector ".relative" to target one H2 rather than using the type selector, which would target both H2s. You canlearn more about CSS selectors in our explainer。

相对大小的关键字使得可以轻松地设置文本大小相对于周围元素。它们比绝对大小的关键字的优势是，它们允许用户更改所有浏览器中的文本大小，这使其成为可访问性的理想选择。

Length

有一些长度值可以定义CSS中的字体大小属性。在这里，我们将重点介绍三个最常见的：像素，EM单位和REM单位。

Pixels

元素{font-size：32px;}

Using pixels (px) as your length value will enable you to set your font size with precision, regardless of the browser a visitor is using. You can specify exactly the number of pixels in height that you want a browser to render your text (although the results may vary slightly depending on the algorithms the browsers use).

See the Pen字体大小：pxby Christina Perricone (@hubspot） 在CodePen。

However, the fixed nature of pixels is also a drawback. They’re not optimized for all devices — CSS-Tricks found that websites on the iPad minirender the same as websites on the iPad, for example — and they’re not an accessible length value. Because users cannot change the font size in some browsers, there are more inclusive and responsive options you can use.

EMS

元素{font-size：2em;}

The em unit sets the font size relative to the font size of the parent element. So, giving text afont-sizeof2emwill make this text twice the size of its surrounding text.

Setting font size in em units is ideal for an inclusive design. Since ems are a relative unit, users can adjust the text size in all browsers.

唯一的缺点是EMS化合物。所以，说一个element with a font size of 2em contains anotherelement. That nestedelement would be twice the size, or 4em. See the code below.

See the Penfont-size: emby Christina Perricone (@hubspot） 在CodePen。

rems

element { font-size: 2rem; }

remsare a relative unit like ems, but they don’t compound. That’s because ems are font-relative units, meaning the font size is relative to the parent element's font size, while rems are root-based. Meaning, the font size is relative to the size of the font used by the root element, orelement at the top of the document.

Say I set the font size of the root element to12pxso that any text in the document that isn’t modified by CSS will be 12 pixels. But, I also want to change the font size of a

元素{字体大小:110%; }

element { font-size: 10vw; }