css字体超出控制⽂字⼤⼩_可⽤于字体⼤⼩CSS长度单位的演
练
css字体超出控制⽂字⼤⼩
This article was peer reviewed by . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!
本⽂由同⾏评审。感谢所有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 。
cssclass属性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 . 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 parent
div
element.
<p>This is the first paragraph of our container.</p>
<p>The second paragraph contains a link to <a href="/">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="www.sitepoint/">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 by SitePoint () on .
请参阅上的 ( )按笔的 。
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 by SitePoint () on .
请参阅上的 ( ) 的笔 。
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 by SitePoint () on .
请参阅上的 ( ) 的笔 。
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 by SitePoint () on .
见笔由SitePoint( 上) 。
视⼝单位(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 t
o 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 . 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 by SitePoint () on .
请参见上的 ( ) 笔的 。
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 .
这些单位的唯⼀问题是，计算出的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)来设置打印样式表中的页边距。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。