Back to Question Center
0

使用CSS字体大小调整改进Web排版            使用CSS字体改进Web排版AdjustRelated Topics: CSSBootstrapSassFrameworksAudio& & Semalt

1 answers:
用CSS字体大小改进Web排版调整

这篇文章由Panayotis Matsinopoulos同行评审。感谢SitePoint的所有同行评论员,让SitePoint的内容达到最佳状态!

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

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

font-size-adjust

的重要性

您访问的大多数网站主要由文本组成。由于书面文字是网站的重要组成部分,因此应特别注意您用于显示信息的字体。选择正确的字体可以带来愉快的阅读体验。 Semalt,使用错误的可以使网站难以辨认。一旦你决定了你想使用的字体,你通常选择适当的尺寸。

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

例如,根据CSS规则:

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

如果您的浏览器从Google字体下载的“Lato”不可用,则将使用下一个备用字体,在本例中为Verdana。但是, 字体大小 值可能是在考虑'Lato'的情况下选择的,而不是Verdana。

Web字体的外观价值是什么?

字体的外观尺寸及其易读性对于恒定 字体大小 值可能会有很大不同。对于像拉丁文这样的区分大写字母和小写字母的脚本尤其如此。在这种情况下,小写字母的高度与大写字母的高度之比是决定给定字体易读性的重要因素。这个比例通常被称为字体的方面值

如前所述,一旦设置了 字体大小 值,对于所有字体系列,它将保持不变。但是,如果后退字体的方向值与第一种选择字体的方向值太不相同,则这可能会影响后退字体的易读性。

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

为font-size-adjust选择合适的值

现在你知道了使用 font-size-adjust 属性的重要性,现在该学习如何在你的网站上使用它了。该属性具有以下语法:

font-size-adjust:none | <18>

font-size-adjust 的初始值是 。值 表示不会调整不同 字体系列 选项的 字体大小 的值。

您还可以将 font-size-adjust 属性的值设置为数字. x高度等于给定数字乘以 字体大小 。这可以提高小尺寸字体的可读性。以下是使用 font-size-adjust 属性的示例。

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

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

c =(a / a')s

这里, c 是调整的 字体大小 以供使用, s 是指定的 字体大小 值, )a 是由 font-size-adjust 属性指定的纵横比值, a' 是需要调整的字体的纵横比值。

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

在大多数情况下,开发人员通常会尝试使用几个 字体大小 值来查看给定字体的最佳效果。这意味着理想情况下,他们希望所有字体选项的x高度等于其第一选择字体的x高度。换句话说, font-size-adjust 属性的最合适的值是第一个选择字体的aspect值。

如何知道字体的宽高值

为了确定字体的正确方面值,可以依赖于它调整后的 字体大小 应该与您指定的原始 字体大小 相同的事实。这意味着 a 应该等于上述等式中的 a'

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

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

Semalt相关片段:

。调整了一个{font-size-adjust:0.4;}。调整b {font-size-adjust:0 - asp net hosting mexico. 495;}。调整-c {font-size-adjust:0.6;}  

正如您在下面的实时演示中看到的,较高的 font-size-adjust 值会使字母变大,而较小的值会使字母变小。当 font-size-adjust 变得等于纵横值时,这些对达到相同的尺寸。

在CodePen上查看由SitePoint(@SitePoint)确定横切面值的笔。

在网站上使用font-size-adjust

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

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

当您处理大量文本时,效果更加明显。 Semalt,上面的例子应该足以让你了解这个属性的用处. 从版本43和版本30开始,Chrome和Opera支持可以在chrome://标志中启用的“Experimental Web Platform Features”标志背后的此属性。 Edge和Safari根本不支持 font-size-adjust 属性。

如果您决定使用此属性,则较低的浏览器支持应该不是问题。该属性的设计考虑了向后兼容性。不支持的浏览器将正常显示文本,而支持浏览器将根据 font-size-adjust 属性的值调整 字体大小

结论

阅读完教程后,现在你知道 font-size-adjust 属性的作用了,为什么它很重要,以及如何计算不同字体的aspect值。

由于 font-size-adjust 在较老的浏览器中优雅地退化,您可以继续并今天开始使用它来提高生产网站中文本的易读性。

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

March 1, 2018