如何在CSS中改变字体大小

有不同的方法可以让你的注意力集中到网页上的文字上。你能做到的橙色为例。你可以大胆的或下划线它。你可以强调一个短语一个句子中去。

除了这些格式选项，您还可以更改文本的字体大小，以吸引读者的眼球，并建立视觉层次。你会注意到这篇博文的标题(<标题>)的字体大小最大。接下来是标题元素(< h2 >，< h3 >,< h4 >)，全部大于< p >元素。这样，访问者(你)就知道不同的部分从哪里开始。

HTML标题并不是改变网站字体大小的唯一方法。假设您想要缩小或放大默认标题大小，或者想要更改页面上其他元素的字体大小。在这种情况下，您可以更改字体大小CSS．让我们在下面回顾一下这个过程。

字体大小是控制网页上字体大小的CSS属性。可以使用几个不同的值来定义字体大小财产。看一下下面的示例，它包含了可以在CSS中使用的不同值和单元。

看到这支笔字体大小:不同的值作者:Christina Perricone (@hubspot)CodePen．

这些值提供了不同的方法来设置网页上的字体大小。您将根据您的站点的需要和目标来选择。让我们仔细看看这些值，权衡它们的利弊。

减小和增加字体大小的属性值

在CSS中,字体大小可以用以下任意值指定。对于每个属性值，我将给出它的语法示例和简要描述。

绝对规模的关键字


元素{font-size:小;｝

绝对大小关键字基于默认字体大小。最常见的是，默认字体大小是媒介(翻译为16像素或1em)，尽管它可以根据浏览器和字体系列而不同。注意，在HTML中，默认字体大小是16px。

绝对大小的关键字是:

xx-small
x-small
小
媒介
大
超大号
xx-large
xxx-large

下面是它们在浏览器中的样子:

看到这支笔字体大小:绝对规模作者:Christina Perricone (@hubspot)CodePen．

绝对大小关键字可以方便地将文本设置为指定的大小，并为页面创建字体层次结构。然而，它们不允许用户在所有浏览器中更改文本大小，这使其成为可访问设计的糟糕选择。为了更包容所有用户，可以尝试相对大小的关键字。

相对大小的关键字


元素{font-size:更大;｝

relative -size关键字设置字体相对于父元素的字体大小变大或变小。这些相对大小大致基于上面描述的绝对大小关键字的比例。

如果父元素的字体大小为大，定义相对大小为的子元素小字体大小为媒介．让我们看看这个假设的代码。

看到这支笔字体大小:相对大小作者:Christina Perricone (@hubspot)CodePen．

注意，我使用了类选择器。而不是使用类型选择器，后者将针对两个H2s。你可以在我们的解释中了解更多CSS选择器．

相对大小关键字可以方便地设置相对于周围元素的文本大小。相对于绝对大小的关键字，它们的优势在于允许用户在所有浏览器中更改文本大小，这使得它成为一个很好的可访问性选择。

长度

在CSS中，有一些长度值可以定义字体大小属性。在这里，我们将重点关注三个最常见的单位:像素、em单位和rem单位。

像素


元素{font-size: 32px;｝

使用像素(px)作为长度值将使您能够精确地设置字体大小，不管访问者使用的浏览器是什么。您可以精确地指定希望浏览器呈现文本的高度像素数(尽管结果可能会因浏览器使用的算法而略有不同)。

看到这支笔字体大小:px作者:Christina Perricone (@hubspot)CodePen．

然而，像素的固定属性也是一个缺点。它们并不是针对所有设备进行优化——CSS-Tricks发现iPad mini上的网站渲染与iPad上的网站相同它们不是一个可访问的长度值。因为用户无法在某些浏览器中更改字体大小，所以可以使用更具包容性和响应性的选项。

Ems


元素{font-size: 2em;｝

em单元设置相对于父元素的字体大小的字体大小。所以，给文本a字体大小的2他们将使该文本的大小是其周围文本的两倍。

以em单位设置字体大小是包容性设计的理想选择。由于ems是一个相对单位，用户可以在所有浏览器中调整文本大小。

唯一的缺点是ems是复合的。所以,说< span >元素包含另一个字体大小为2em的元素< span >元素。的嵌套< span >元素的大小是它的两倍，即4em。参见下面的代码。

看到这支笔字体大小:新兴市场作者:Christina Perricone (@hubspot)CodePen．

雷姆


元素{font-size: 2rem;｝

雷姆和ems一样是一个相对单位，但它们不会复合。这是因为ems是相对于字体的单位，这意味着字体大小是相对于父元素的字体大小的，而rems是基于根的。也就是说，字体大小与根元素使用的字体大小或< html >元素。

假设我设置根元素的字体大小为12 px因此，文档中任何未经CSS修改的文本都将是12像素。但是，我也想改变字体的大小< div >元素，该元素与上面示例中提到的元素类似。让我们看看下面的代码。

注意，嵌套的元素与另一个元素的字体大小是相同的。

看到这支笔字体大小:快速眼动作者:Christina Perricone (@hubspot)CodePen．

百分比


元素{font-size: 110%;｝

百分比值设置元素的字体大小相对于父元素的字体大小。

说一个< div >设置为的元素36个像素包含一个< p >元素和两个< span >元素。的字体大小的< span >元素分别设置为50%和200%。然后< span >元素的50%值将是18px< span >值为200%的元素将为27个像素．下面是代码运行时的样子:

看到这支笔字体大小:百分比作者:Christina Perricone (@hubspot)CodePen．