css版式_使用CSS字体大小调整来改善Web版式

css版式

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

该文章由Panayotis Matsinopoulos进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

The font-size-adjust property in CSS allows developers to specify the font-size based on the height of lowercase letters instead of uppercase letters. This can significantly improve the legibility of text on the web.

CSS中的font-size-adjust属性允许开发人员根据小写字母(而不是大写字母)的高度指定font-size 。 这可以显着提高网络上文本的可读性。

In this article, you will learn about the importance of the font-size-adjust property and how to use it properly in your projects.

在本文中，您将了解font-size-adjust属性的重要性以及如何在项目中正确使用它。

字体大小调整的重要性 (The Importance of font-size-adjust)

Most websites that you visit consist primarily of text. Since the written word is such an important part of a website, it makes sense to pay special attention to the typeface you are using to display your information. Choosing the right typeface can result in a pleasant reading experience. However, using the wrong one can make the website illegible. Once you have decided the typeface you want to use, you generally choose a proper size for it.

您访问的大多数网站主要由文本组成。 由于文字是网站的重要组成部分，因此特别注意用于显示信息的字体是有意义的。 选择正确的字体可以带来愉悦的阅读体验。 但是，如果使用错误的网站，则可能使网站难以辨认。 一旦确定了要使用的字体，通常就可以为其选择合适的尺寸。

The font-size property sets the size of all the font-family options that you want to use on a website. However, most of the times it is generally chosen in such a way that your first font-family option looks good. The problem arises when the first choice is not available for some reason and the browser renders the text using one of the fallback fonts listed in the CSS document.

font-size属性设置要在网站上使用的所有font-family选项的大小。 但是，在大多数情况下，通常以第一个font-family选项看起来不错的方式进行选择。 当第一选择由于某种原因不可用并且浏览器使用CSS文档中列出的一种后备字体呈现文本时，就会出现问题。

For instance, given this CSS rule:

例如，给定以下CSS规则：

body {
  font-family: 'Lato', Verdana, sans-serif;
}

If ‘Lato’, which your browser downloads from Google Fonts, is not available, the next fallback font, in this case Verdana, will be used instead. However, it’s likely that the font-size value was chosen with ‘Lato’ in mind, rather than with Verdana.

如果您的浏览器从Google Fonts下载的“ Lato”不可用，则将使用下一个后备字体，在这种情况下为Verdana。 但是， font-size值的选择很可能是考虑“ Lato”而不是Verdana。

Web字体的方面价值是什么？ (What Is the Aspect Value of a Web Font?)

The apparent size of a font as well as its legibility can vary greatly for a constant font-size value. This is especially true for scripts like Latin that distinguish between upper and lowercase letters. In such cases, the ratio of the height of lowercase letters to their uppercase counterparts is an important factor in deciding the legibility of the given font. This ratio is commonly called the aspect value of a font.

对于恒定的font-size值，字体的外观大小及其易读性可能会发生很大的变化。 对于拉丁文这样区分大写和小写字母的脚本尤其如此。 在这种情况下，小写字母的高度与大写字母的高度之比是确定给定字体的可读性的重要因素。 该比率通常称为字体的纵横比。

As I mentioned earlier, once you set a font-size value, it will remain constant for all the font families. However, this may affect the legibility of the fallback font if its aspect value is too different from the aspect value of the first choice font.

正如我前面提到的，一旦设置了font-size值，它将对所有字体系列保持不变。 但是，如果后备字体的长宽比值与首选字体的长宽比太大不同，则这可能会影响后备字体的可读性。

The role of the font-size-adjust property becomes very important in such situations, as it allows you to set the x-height of all the fonts to the same value thereby improving their legibility.

在这种情况下， font-size-adjust属性的作用非常重要，因为它允许您将所有字体的x高度设置为相同的值，从而提高其可读性。

为font-size-adjust选择正确的值 (Choosing the Right Value for font-size-adjust)

Now that you know the importance of using the font-size-adjust property, it is time to learn how to use it on your website. This property has the following syntax:

现在您知道了使用font-size-adjust属性的重要性，是时候学习如何在您的网站上使用它了。 此属性具有以下语法：

font-size-adjust: none | <number>

The initial value of font-size-adjust is none. The value none means that no adjustment will be made to the value of the font-size of different font-family options.

font-size-adjust的初始值为none 。 值none表示将不对不同font-family选项的font-size值进行调整。

You can also set the value of the font-size-adjust property to a number. This number is used to calculate the x-height of all the fonts on a webpage to the same value. The x-height is equal to the given number multiplied by the font-size. This can improve the readability of fonts at small sizes quite a bit. Here is an example of using the font-size-adjust property.

您还可以将font-size-adjust属性的值设置为一个数字。 此数字用于将网页上所有字体的x高度计算为相同的值。 x高度等于给定数字乘以font-size 。 这样可以极大地提高小尺寸字体的可读性。 这是使用font-size-adjust属性的示例。

font-size: 20px;
font-size-adjust: 0.6;

The x-height of all the fonts will now be 20px * 0.6 = 12px. The actual size of a given font can now be changed to make sure that the x-height always stays at 12px. The new adjusted font-size of a given font can be calculated using this formula:

现在，所有字体的x高度将为20px * 0.6 = 12px。 现在可以更改给定字体的实际大小，以确保x高度始终保持在12px。 可以使用以下公式来计算给定字体的新调整后的font-size ：

c = ( a / a' ) s.

c = ( a / a' ) s 。

Here, c is the adjusted font-size to use, s is the specified font-size value, a is the aspect value specified by the font-size-adjust property and a' is the aspect value of the font that needs to be adjusted.

此处， c是要使用的调整后的font-size ， s是指定的font-size值， a是由font-size-adjust属性指定的纵横比值， a'是需要调整的字体的纵横比值。

You cannot set font-size-adjust to a negative value. A value of 0 will result in text with no height. In other words, the text will effectively be hidden. In older browsers, like Firefox 40, a value of 0 is equivalent to setting font-size-adjust to none.

您不能将font-size-adjust设置为负值。 值为0将导致文本没有高度。 换句话说，文本将被有效隐藏。 在较旧的浏览器(如Firefox 40)中，值0等效于将font-size-adjust为none 。

In most cases, developers generally experiment with a few font-size values to see what looks best for a given font. This means that ideally, they would want the x-height of all the font options to be equal to the x-height of their first choice font. In other words, the most suitable value for the font-size-adjust property is the aspect value of your first choice font.

在大多数情况下，开发人员通常会尝试一些font-size值，以查看哪种字体最适合给定的字体。 这意味着理想情况下，他们希望所有字体选项的x高度等于其首选字体的x高度。 换句话说，最适合font-size-adjust属性的值是首选字体的长宽比值。

如何知道字体的外观值 (How to know the Aspect Value of a Font)

To determine the right aspect value for a font, you can rely on the fact that its adjusted font-size should be the same as the original font-size that you specified. This means that a should be equal to a' in the previous equation.

要确定字体的正确宽高比值，您可以依靠以下事实：调整后的font-size应与您指定的原始font-size相同。 这意味着a应等于上式中的a' 。

The first step to calculate the aspect value is the creation of two <span> elements. Both elements will contain a single letter and a border around each letter (the letters have to be the same for both <span> elements because we’ll need to make a comparison between them). Also, both elements will have the same value for the font-size property, but only one of them will also use the font-size-adjust property. When the value of font-size-adjust is equal to the aspect value of a given font, both letters in each <span> element will be of the same size.

计算长宽比值的第一步是创建两个<span>元素。 这两个元素都将包含一个字母和每个字母周围的边框(两个<span>元素的字母必须相同，因为我们需要在它们之间进行比较)。 同样，两个元素的font-size属性将具有相同的值，但是只有其中一个也会使用font-size-adjust属性。 当font-size-adjust值等于给定字体的高宽比值时，每个<span>元素中的两个字母都将具有相同的大小。

In the following demo, I have created a border around the letters ‘t’ and ‘b’ and applied a different font-size-adjust value for each pair.

在下面的演示中，我在字母“ t”和“ b”周围创建了一个边框，并为每对应用了不同的font-size-adjust值。

Here’s the relevant snippet:

以下是相关代码段：

.adjusted-a {
  font-size-adjust: 0.4;
}

.adjusted-b {
  font-size-adjust: 0.495;
}

.adjusted-c {
  font-size-adjust: 0.6;
}

As you can see in the live demo below, a higher font-size-adjust value makes the letters larger and a lower value makes the letters smaller. When font-size-adjust becomes equal to the aspect value, the pairs attain equal size.

在下面的实时演示中可以看到，较高的font-size-adjust值会使字母变大，而较低的值会使字母变小。 当font-size-adjust等于Aspect值时，两对将获得相等的大小。

See the Pen Determining Aspect Value by SitePoint (@SitePoint) on CodePen.

见笔确定看点值由SitePoint( @SitePoint上) CodePen 。

在网站上使用字体大小调整 (Using font-size-adjust on Websites)

The following demo uses the font-size-adjust value that was calculated in the previous CodePen demo for the ‘Lato’ font to adjust the font-size of ‘Verdana’, which acts as fallback font. A button will turn the adjustment on or off so that you can see the difference yourself:

下面的演示使用在以前的CodePen演示中为“ Lato”字体计算出的font-size-adjust值来调整“ Verdana”的font-size ，该字体用作后备字体。 一个按钮将打开或关闭调整，以便您可以自己看到差异：

See the Pen Using font-size-adjust on Websites by SitePoint (@SitePoint) on CodePen.

见笔使用在网站上的字体大小调整由SitePoint( @SitePoint上) CodePen 。

The effect is more noticeable when you are working with a larger amount of text. However, the above example should still be enough to give you an idea of the usefulness of this property.

当您处理大量文本时，效果会更明显。 但是，上面的示例仍然足以使您了解此属性的用途。

浏览器支持 (Browser Support)

At present, only Firefox supports font-size-adjust by default. Starting from version 43 and 30, Chrome and Opera support this property behind the “Experimental Web Platform Features” flag that can be enabled in chrome://flags. Edge and Safari don’t support the font-size-adjust property at all.

目前，只有Firefox默认支持font-size-adjust 。 从版本43和版本30开始，Chrome和Opera在“ Experimental Web Platform Features”(实验性Web平台功能)标志后面支持此属性，该标志可在chrome：// flags中启用。 Edge和Safari根本不支持font-size-adjust属性。

If you decide to use this property, lower browser support should not be an issue at all. This property has been designed with backward compatibility in mind. Non supporting browsers will display the text normally while supporting browsers will adjust the font-size based on the font-size-adjust property’s value.

如果决定使用此属性，则较低的浏览器支持应该根本不是问题。 设计此属性时要考虑向后兼容性。 非支持的浏览器将显示文本正常，而支持的浏览器将调整font-size基础上， font-size-adjust属性的值。

结论 (Conclusion)

After reading the tutorial, now you know what the font-size-adjust property does, why it’s important, and how to work out the aspect value of different fonts.

阅读本教程后，现在您知道font-size-adjust属性的作用，为何重要，以及如何计算不同字体的宽高比值。

Because font-size-adjust degrades gracefully in older browsers, you can go ahead and start using it today to improve the legibility of text in production websites.

由于在旧版浏览器中font-size-adjust会正常降低，因此您可以立即开始使用它，以提高生产网站中文本的可读性。

Do you know some other tools or tips that can help users calculate the aspect values of a font quickly? Let fellow readers know in the comments.

您是否知道其他一些工具或技巧可以帮助用户快速计算字体的长宽比？ 在评论中让其他读者知道。

翻译自: https://www.sitepoint.com/improve-web-typography-css-font-size-adjust/

css版式