如何在CSS中更改字体大小

有不同的方式，您可以提请注意网页上的文本。你可以做到霓虹黄色，例如。你可以大胆的或者强调它。你可以突出一个短语在一个句子中。

除了这些格式选项外，还可以更改文本的字体大小以绘制读者的眼睛并建立消息层次结构。您将在此博客文章中注意到标题具有最大的字体大小。接下来是我的H2S，H3S，H4S，所有这些都大于它们所包含的

元素，所以访问者从不同部分的顶部开始。

标题级别不是您唯一的选项，可以在您的网站上更改字体大小。假设您想缩小或放大标准标题级别，或者您要更改页面上的其他元素的字体大小。在这种情况下，您可以使用CSS。让我们走过以下过程。

注意：我会使用的W3Schools在线代码编辑器创建以下示例。您可以单击任何源链接以查看示例后面的完整代码片段并尝试自己的。

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

来源

这些值提供了不同的方法，可以在网页上设置字体大小。您选择的那个将取决于您网站的需求和目标。让我们仔细看看这些价值观，称重下面各自的利弊。

字体大小属性值

在CSS中，可以使用以下任何值指定字体大小属性。对于每个属性值，我将提供其语法的示例以及简要说明。

absolute-size关键字


元素 {
字体大小：小;
}

绝对大小关键字基于默认字体大小。最常见的是，默认字体大小是介质（它转换为16像素或1EM），尽管它可能因浏览器和字体系列而异。请注意，在最新版本中Bootstrap CSS.，默认字体大小为16px。

Absolute-size关键字是：

xx-small
x-small
小的，
中等的
大
X-Light.
xx-light.
XXX-Light.

Absolute-size关键字使其易于将文本设置为指定的大小并为您的页面创建字体层次结构。但是，它们不允许用户在所有浏览器中更改文本大小，这使其成为可访问设计的差。更包含所有用户，尝试相对大小的关键字。

相对大小关键字


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

相对尺寸关键字将相对于父元素的字体大小设置较大或更小的字体。这些相对尺寸大致基于上述绝对尺寸关键字的比率。

因此，如果父元素具有大小的字体大小，则具有较小的相对大小的子元素将具有介质的字体大小。让我们来看看这个假设的代码。

这是HTML：


父元素
子元素

这是CSS：


。相对的 {
字体大小：更小;
}

请注意，我使用类选择器“.relative”来定位一个H2，而不是使用类型选择器，它将针对H2S。您可以了解有关CSS选择器的更多信息CSS选择器是什么？他们如何工作？

以下是代码将如何在网站的前端呈现：

来源

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

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

像素


元素 {
字体大小：32px;
}

使用像素（PX），因为您的长度值将使您以精确度设置字体大小，无论访问者如何使用。您可以准确地指定您希望浏览器呈现文本的高度的像素数（虽然结果可能会略有不同，但浏览器使用的算法可能会略有不同）。

然而，像素的固定性质也是一个缺点。它们未针对所有设备进行优化 - CSS-Tricks发现iPad Mini上的网站将与iPad上的网站相同例如 - 它们不是可访问的长度值。由于用户无法在某些浏览器中更改字体大小，因此可以使用更包含的包含和响应的选项。

ems.


元素 {
字体大小：2EM;
}

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

唯一的缺点是EMS化合物。所以说一个元素的字体大小2em包含另一个元素。嵌套元素将是大小或4em的两倍。请参阅下面的代码。

这是HTML：


 iam 较大的比句子的其余部分。

这是CSS：


跨度 {
字体大小：2EM;
}

这是它将在网站的前端呈现：

来源

REMS.


元素 {
字体大小：2REM;
}

Rems是EMS等相关单元 - 但它们不属于化合物。这是因为EMS是字体相对单元，这意味着字体大小相对于父元素的字体大小，而REMS是基于root。含义，字体大小相对于根元素使用的字体的大小，或文档顶部的元素。

请说我将根元素的字体大小设置为16px，以便CSS未修改的文档中的任何文本将为16 PX。但我想改变类似于上面示例中提到的

元素的字体大小。让我们来看看下面的代码。

这是HTML：


本文档的字体大小为16px。
我不大于而不是句子的其余部分。但我比根元素大三倍。

这是CSS：


html {
字体大小：16px;
}
跨度 {
字体大小：3REM;
}

这是它将在网站的前端呈现：

来源

请注意嵌套的元素如何与其他元素相同的字体大小。

<百分比>


元素 {
字体大小：110％;
}

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

因此，设置为36px的

元素包含段落元素和两个跨度元素。跨度元件的字体大小分别设定为50％和200％。然后，具有50％值的元素将是18px，而具有200％值的元素将为27px。让我们来看看这个假设的代码。

这是HTML：

全尺寸文本（36px） 50％（18px） 200％（72px）

这是CSS：


.parent {
字体大小：36px;
}
.smaller {
字体大小：50％;
}
.larger {
字体大小：200％;
}

以下是代码将如何在网站的前端呈现：

来源

CSS中的响应字体大小

上面描述的属性值都分享了一个共同点：它们并不反应。如果您想将字体大小设置为响应于所有设备并显示，可以使用视口宽度单元，缩短为VW。

大众是另一个相关单元。它不相对于父元素或根元素，而是对视口的宽度（1％精确）。意思是，如果视口为100 CMS宽，1VW = 1厘米。如果视口宽50厘米，1VW = 0.5厘米等。

说我希望我的段落的字体大小为浏览器窗口宽度的10％。

这是HTML：

了解字体大小如何随着浏览器窗口的宽度而更改？

这是CSS：


p {
字体大小：10VW;
}

以下是代码将如何在网站的前端呈现：

来源

CSS中最大字体大小

在VM中设置字体大小时，您必须小心您的文本在大屏幕上不会太大。不幸的是，CSS没有MAX-Font-uty，但您可以通过使用媒体查询来阻止您的字体无法变得太大。

您只需在某个屏幕尺寸断点处使用媒体查询并强制字体大小回到SET像素值。所以说，当视口超过1000px时，我想强制我的字体大小回到30px。

这是HTML：


了解这本文如何延伸和伸展和拉伸 - 直到浏览器击中1000px。然后文本将再次缩小。

这是CSS：


身体 {
字体大小：10VW;
}
@media屏幕和（min-width：1000px）{
身体 {
字体大小：30px;
}

这是结果：

来源

控制字体大小

与Google文档或Microsoft Word中的字体大小相比，CSS中的字体大小更改为复杂 - 但可以在HTML和CSS中使用某种练习掌握。

最初发布于5月18日，2020年7:00:00，Updated 5月18日2020年

话题：

Bootstrap＆CSS

`子元素`

如何在CSS中更改字体大小