css字体超出控制文字大小_可用于字体大小CSS长度单位的演练

css字体超出控制文字大小

This article was peer reviewed by Tom Hodgins. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

本文由Tom Hodgins同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

CSS provides a lot of units for developers to specify the length of different properties like margin, padding, line-height or font-size. The reason we have many units is that they are designed to serve different purposes. Even though you can use these units to specify the same value for a given CSS property, the actual magnitude of that value is calculated differently. This can make some units useful for situations where other units might not do that well. For example, if you want the width or height properties of an element to be dependent on the width or height of the viewport, the only trustworthy units to accomplish that are vh, vw, vmin and vmax.

CSS为开发人员提供了很多单位来指定不同属性的长度，例如margin ， padding ， line-height或font-size 。 我们拥有许多单位的原因是，它们旨在满足不同的目的。 即使您可以使用这些单位为给定CSS属性指定相同的值，该值的实际大小也将以不同的方式计算。 这可以使某些单元在其他单元可能做不到的情况下很有用。 例如，如果您希望元素的width或height属性取决于视口的宽度或高度，则完成此操作的唯一可信赖的单位是vh ， vw ， vmin和vmax 。

In this article, you will learn about different length units and how they affect the font size of elements they are applied to.

在本文中，您将了解不同的长度单位，以及它们如何影响所应用元素的字体大小。

像素单位(px) (Pixel Unit (px))

Pixels are fixed size units. They are generally referred to as a single dot on the user’s screen. However, devices nowadays can have different pixel densities. This means that the size of this dot we generally call pixel will be about 1/4th on a device whose pixel density is 4 times that of a standard device. This problem is avoided by calculating the size of CSS pixels using a reference pixel. The reference pixel is defined as the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length ( equal to 28 inches). This makes the size of a pixel equal to about 0.26mm.

像素是固定大小的单位。 它们通常被称为用户屏幕上的单个点。 但是，当今的设备可以具有不同的像素密度。 这意味着，在像素密度是标准设备的4倍的设备上，我们通常称为像素的点的大小约为1/4。 通过使用参考像素计算CSS像素的大小可以避免此问题。 参考像素定义为像素密度为96dpi且与阅读器的距离为一臂长(等于28英寸)的设备上一个像素的视角。 这使得像素的大小等于大约0.26mm。

Setting the font-size of different text elements on your webpage in pixels is neither easily maintainable nor user friendly. If you are redesigning a very big website, changing the fonts of all elements can turn into a bit of a nightmare. You will also have to adjust the font-size of a lot of elements at different breakpoints to accommodate different screen sizes. Moreover, any user who wants to make the text smaller or larger using their browser font size setting, won’t be able to do so.

以像素为单位设置网页上不同文本元素的font-size既不容易维护，也不方便用户使用。 如果您要重新设计一个非常大的网站，则更改所有元素的字体可能会变成一场噩梦。 您还必须在不同的断点处调整许多元素的font-size ，以适应不同的屏幕大小。 此外，任何想要使用其浏览器字体大小设置来缩小或放大文本的用户将无法做到这一点。

Let’s see how a font size set in pixels affects the computed font-size value for different elements. Here is the markup that we will be using as a reference for the next few sections.

让我们看看以像素为单位设置的字体大小如何影响不同元素的计算font-size值。 这是标记，我们将在后面的几节中将其用作参考。

<div class="container-box">
  This text is directly inside the parentdiv element.
  <p>This is the first paragraph of our container.</p>
  <p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
  <p>I have also included a link to SitePoint as a direct child of the containing div element.</p>
  <a href="https://www.sitepoint.com/">A link to SitePoint.</a>
</div>

Here is the CSS to set the font-size property for all the elements in pixels.

这是CSS，用于以像素为单位设置所有元素的font-size属性。

div {
  font-size: 20px;
}

code {
  font-size: 18px;
}

p, a {
  font-size: 22px;
}

See the Pen Setting Font Size in Pixels by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )按像素设置笔的字体大小 。

As you can see in the demo, the font-size of each element is equal to the pixel value that you have provided. It has no relation with the nesting of that element. For example, the font-size for both links is 22px. You can also try and change the text size setting in your browsers but it will not affect the font size of these elements.

如您在演示中所看到的，每个元素的font-size等于您提供的像素值。 它与该元素的嵌套无关。 例如，两个链接的font-size均为22px。 您也可以尝试在浏览器中更改文本大小设置，但这不会影响这些元素的字体大小。

In short, this lack of flexibility is a good reason why you should avoid using pixels when setting the font-size of an element.

简而言之，缺乏灵活性是在设置元素的font-size时应避免使用像素的一个很好的理由。

Em单位(em) (Em Unit (em))

Using the em unit for setting the font size can help you avoid any issues related to overriding user preferences. The value of 1em will depend on the value of the default font-size in the browser. Unless changed by you or the user, by default this value is equal to 16px.

使用em单位设置字体大小可以帮助您避免与覆盖用户首选项有关的任何问题。 1em的值将取决于浏览器中默认font-size的值。 除非您或用户更改，否则默认情况下该值等于16px。

The value of this unit for an element is determined by the computed font-size inherited by that element. This means that if an element inherits a font-size of 25px, the value of 2em for that element will be computed as 50px.

元素的此单位的值由该元素继承的计算的font-size确定。 这意味着，如果一个元素继承了25px的font-size ，则该元素的2em值将被计算为50px。

The following CSS sets the font-size of all elements from our previous example in em units:

以下CSS以em为单位设置了上一个示例中所有元素的font-size ：

div {
  font-size: 1.2em;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

See the Pen Setting Font Size in em Units by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint ) 以em为单位的笔设置字体大小 。

The second div in the above demo is nested inside another div element. We have also set the font-size for div elements to be 1.2em. This means that the font size of all the elements in the second div will be bigger by a factor of 1.2 than the corresponding element in the first div. For example, the computed font-size of the WikiPedia link in the first div is 19.2px and the computed font-size of the WikiPedia link in the second div is 23.04px. The ratio is exactly equal to 1.2.

上面演示中的第二个div嵌套在另一个div元素内。 我们还将div元素的font-size设置为1.2em。 这意味着第二个div中所有元素的字体大小将比第一个div相应元素的字体大小大1.2倍。 例如，计算出的font-size在第一维基百科链路的div是19.2px和所计算的font-size在第二维基百科链路的div是23.04px。 该比率完全等于1.2。

If you want to scale up or scale down the font-size of different elements in a responsive website at certain breakpoints, you can simply do so by specifying a different font-size from the html and body elements at that breakpoint. The font size of all other elements will then scale accordingly.

如果要在某些断点处放大或缩小响应网站中不同元素的font-size ，只需在该断点处指定与html和body元素不同的font-size 。 然后，所有其他元素的字体大小将相应缩放。

Since the value of this unit depends on the inherited font-size of a given element, this unit is particularly useful when you want to set font sizes for related elements inside independent sections of a website, for instance elements inside independent modules.

由于此单元的值取决于给定元素的继承font-size ，因此当您要为网站的独立部分内的相关元素(例如独立模块内的元素)设置字体大小时，此单元特别有用。

雷姆单位(rem) (Rem Unit (rem))

The only problem with em units is that you don’t always want the font-size of child elements to scale according to their parent’s font-size. This inheritance of the font-size can make the process of calculating a correct em value a lot more complex than it should be.

用em单位唯一的问题是，你并不总是希望font-size的子元素根据其父母的扩展font-size 。 font-size这种继承会使计算正确的em值的过程比应该的复杂得多。

You can overcome this drawback of the em unit using the rem unit. The value of 1rem is always equal to the value of the font-size for the root element. This way you will not face any problem with font-size inheritance.

您可以使用rem单元克服em单元的这一缺点。 1rem的值始终等于根元素的font-size的值。 这样，您将不会遇到font-size继承的任何问题。

The following CSS sets the font-size of our containing div in rem unit. The rest of the elements still have their font-size in terms of em unit.

以下CSS在rem单位中设置了包含div的font-size 。 其余元素的em unit仍然具有其font-size 。

div {
  font-size: 1.2rem;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

See the Pen Setting Font Size in rem Units by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint ) 以rem为单位的笔设置字体大小 。

Setting the font-size of the container div in rem units helps us avoid the issue with inherited font-size.

在rem单位中设置容器div的font-size有助于我们避免继承的font-size 。

As evident from the example, you can use this unit to set a font-size value for the parent container of different independent modules. This way, the font-size of all the elements inside the module can be based on their parent and at the same time be independent of other modules.

从示例中可以明显看出，您可以使用此单元为不同独立模块的父容器设置font-size值。 这样，模块内所有元素的font-size可以基于其父元素，并且同时独立于其他模块。

百分 (％) (Percent (%))

Percents behave like em units. They are generally used to set the font-size for root elements at different breakpoints to make calculations in responsive web design easier. Here is an example:

百分比的行为类似于em单位。 它们通常用于在不同的断点处设置根元素的font-size ，以使响应式Web设计中的计算更加容易。 这是一个例子：

html {
  font-size: 62.5%;
}

div {
  font-size: 2rem;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

Since the default value for the font-size in browsers is 16px, setting the font-size for the html element equal to 62.5% computes to exactly 10px. This makes the calculation of font sizes for all other elements very easy. For example, you can now just set the font-size of an element to 3rem to make it 30px, 4.2rem to make it 42px, and so on.

由于浏览器中的font-size的默认值为16px，因此将html元素的font-size设置为62.5％时，将精确计算为10px。 这使得所有其他元素的字体大小的计算非常容易。 例如，您现在可以将元素的font-size设置为3rem使其变为30px，将4.2rem设置为42px，依此类推。

See the Pen Setting Font Size in Percentage by SitePoint (@SitePoint) on CodePen.

见笔设置字体大小的百分比由SitePoint( @SitePoint上) CodePen 。

视口单位(vw，vh，vmin，vmax) (Viewport Units (vw, vh, vmin, vmax))

Viewport units are pretty interesting. They allow you to set the font-size for different elements based on the dimensions of the viewport. When done properly, this can eliminate the need for setting a different font-size value at multiple breakpoints. This is because the value of these units will keep changing continuously based on the width or height of the viewport. For instance, 1vw will be equal to 4px when the viewport is 400px wide and it will be equal to 10px when the viewport is 1000px wide. There is already an article on SitePoint that discusses viewport units and their applications. Go and check it out if you’d like to know more.

视口单位非常有趣。 它们允许您根据视口的尺寸设置不同元素的font-size 。 如果操作正确，则可以消除在多个断点处设置不同的font-size值的需要。 这是因为这些单位的值将根据视口的宽度或高度不断变化。 例如，当视口为400px宽时1vw等于4px，当视口为1000px宽时1vw等于10px。 在SitePoint上已经有一篇文章讨论了视口单元及其应用 。 如果您想了解更多信息，请去看看。

See the Pen Setting Font Size in Viewport Units by SitePoint (@SitePoint) on CodePen.

请参见CodePen上的SitePoint ( @SitePoint ) 以视口单位为单位设置笔的设置字体大小 。

The only problem with these units is that the computed font-size could make the text hard to read at very small and very large viewport sizes. The trick here is to use these units in combination with other units so that the text doesn’t become too small or too large. This technique has been discussed in more detail in this article about viewport unit based typography.

这些单位的唯一问题是，计算出的font-size可能会使在很小和非常大的视口大小下难以阅读文本。 这里的技巧是将这些单元与其他单元结合使用，以使文本不会变得太小或太大。 本文已在基于视口单元的版式中对这种技术进行了更详细的讨论。

其他绝对单位 (Other Absolute Units)

CSS also has defined a lot of absolute units which are of little use on screens but play an important role in print media. You can use points (pt) and picas (pc) to set the font-size in print stylesheets. Both these units have a fixed value of 0.0138 inches and 0.1666 inches respectively. Similarly, you can use inches (in), centimeters (cm) and millimeters (mm) to set the page margins in print stylesheets.

CSS还定义了许多绝对单位，这些单位在屏幕上很少使用，但在印刷媒体中起着重要作用。 您可以使用点(pt)和pica(pc)来设置打印样式表中的font-size 。 这两个单位的固定值分别为0.0138英寸和0.1666英寸。 同样，您可以使用英寸(in)，厘米(cm)和毫米(mm)来设置打印样式表中的页边距。

使用关键字设置字体大小 (Using Keywords to Set Font Size)

Another option to set the font-size is to use keywords. These keywords are of two kinds: absolute and relative. Absolute keywords that are used to specify the font-size refer to a font size table computed by different user agents. These absolute keywords are xx-small, x-small, small, medium, large, x-large and xx-large.

设置font-size另一种方法是使用关键字。 这些关键字有两种：绝对关键字和相对关键字。 用于指定font-size绝对关键字引用由不同用户代理计算的字体大小表。 这些绝对关键字是xx-small ， x-small ， small ， medium ， large ， x-large和xx-large 。

If you decide to use relative keywords, the font-size will be calculated based on the values in the font size table and the computed font-size of the parent element. There are two relative keywords: larger and smaller. If the parent element has a font-size value close to x-small, a font-size of larger will set our element’s font-size to small. Here is an example:

如果您决定使用相对关键词， font-size将基于字体大小表格和计算出的值来计算font-size的父元素。 有两个相对的关键字： larger和smaller 。 如果父元素的font-size值接近x-small ，则font-size larger将把我们元素的font-size为small 。 这是一个例子：

div {
  font-size: larger;
}

code {
  font-size: smaller;
}

p, a {
  font-size: small;
}

See the Pen Setting Font Size Using Keywords by SitePoint (@SitePoint) on CodePen.

见笔设置字体大小，使用关键字由SitePoint( @SitePoint上) CodePen 。

The second container div in our demo is nested inside another div. Since we have set the font-size of the div to be larger, the nesting increases the font size of our second container. Also note that the nesting has no effect on the text inside the paragraphs. This is because their font-size has been set using an absolute keyword.

我们的演示中的第二个容器div嵌套在另一个div 。 由于我们将div的font-size设置为larger ，因此嵌套会增加第二个容器的字体大小。 另请注意，嵌套对段落内的文本没有影响。 这是因为它们的font-size是使用绝对关键字设置的。

浏览器支持 (Browser Support)

Before deciding to use any of these units in production, you should also make sure that your target browsers have decent support.

在决定在生产中使用这些单元中的任何一个之前，您还应该确保目标浏览器具有良好的支持。

Absolute units like px, pt, pc, in, cm and mm are supported in all browsers. Similarly, the em unit is supported in all major browsers, including older versions of IE.

所有浏览器均支持px，pt，pc，in，cm和mm等绝对单位。 同样，所有主要浏览器(包括旧版IE)都支持em单元。

However, the rem unit is not supported in IE8 and lower. Even in IE9 and IE10, using rem with the shorthand font property will make the whole declaration invalid. These two browsers don’t support rem units on pseudo elements.

但是，IE8和更低版本不支持rem单元。 即使在IE9和IE10中，将rem与简写font属性一起使用也会使整个声明无效。 这两个浏览器不支持伪元素上的rem单元。

Out of all the units discussed in this article, viewport units have the least browser support. Also note that IE11 and Edge don’t support the vmax unit.

在本文讨论的所有单元中，视口单元对浏览器的支持最少。 另请注意，IE11和Edge不支持vmax单元。

结论 (Conclusion)

In this article, we have discussed different length units in CSS and how they affect the font-size of an element. In general, you should avoid using absolute units whenever possible and try to use relative units. Among relative units, you should use em for setting font sizes of child elements within a module and rem for setting font sizes of independent elements, for example the root parent element in a module. You can also use viewport units in combination with other units to make sure that your typography scales well with any changes in the viewport width or height.

在本文中，我们讨论了CSS中不同的长度单位，以及它们如何影响元素的font-size 。 通常，应尽可能避免使用绝对单位，而应尝试使用相对单位。 在相对单位之间，应使用em设置模块内子元素的字体大小，并使用rem设置独立元素(例如模块中的根父元素)的字体大小。 您还可以将视口单位与其他单位结合使用，以确保您的排版能够随着视口宽度或高度的任何变化而很好地缩放。

For more on web typography, check out our video on AtoZ CSS: Text and Typography.

有关网络排版的更多信息，请观看有关AtoZ CSS的视频：文本和排版 。

翻译自: https://www.sitepoint.com/a-walkthrough-of-css-length-units-you-can-use-for-font-size/

css字体超出控制文字大小