使用CSS的字体大小调整属性来改进网页布局
CSS中的字体大小调整属性允许开发人员根据小写字母的高度指定字体大小,这样可以有效地提高网页的可读性。在本文中,您不仅可以了解字体大小调整属性的重要性,还可以了解如何在项目中使用它。
字体大小调整的重要性
你访问的大多数网站都是由文本组成的。因为文字是网站的一个重要组成部分,所以你应该注意你所用的字体来显示信息。选择合适的字体可以给用户一个愉快的阅读体验。但是,使用不合适的字体会使网站很难阅读。当你决定要使用哪种字体时,你通常会选择一个合适的字体大小。
字体大小属性设置您希望在网页中使用的所有字体族下的字体大小。然而,在大多数情况下,浏览器通常采用第一种字体宣布下font-family.only当第一字体不可用,因为某些原因,浏览器将继续使用候选字体渲染页面。
例如,看看下面的代码:
{体
字体家庭:'lato ',Verdana,无衬线字体;
}
如果你的浏览器下载的字体从眉目传情;Latorsquo;字体时不可用,在这种情况下,Verdana字体将被使用。然而,字体大小在我心中的价值似乎旨在‘Latorsquo;字体设置,不是宋体。
字体的垂直和水平比例是多少
字体的可读性可能差别很大,由于字体大小的值,尤其是拉丁语,使案例与案例之间的差别很大。在这种情况下,比小写字母和相应的资金是一个重要的因素,决定了一个字体的易读性。这个比率通常被称为字体的长宽比。
如前所述,一旦设置字体大小的值,该值将适用于所有字体。如果候选字体的垂直比例和水平比例太大,这可能会影响候选字体的可读性。
字体大小调整属性,在这种情况下,起着非常重要的作用,因为它允许你设置所有字体的x轴的大小均匀,从而提高文本的易读性。
为字体大小调整属性选择适当的值。
现在您知道了使用字体大小调整属性的重要性,现在是在您的网站上使用它的时候了:
字体大小调整:没有|
没有默认值,这意味着字体的大小没有调整。
你也可以设置该属性的值为数字,这将被用来计算网页上所有字体的X轴的高度,和x轴高度的值等于这个数乘以font-size.this可以提高小尺寸字体的可读性。下面是一个例子使用字体的大小调整属性:
字体大小:20px;
字体大小调整:0.6;
所有的字体X轴的高度是现在20px * 0.6 = 12px,和字体的实际大小,现在可以被修改以确保X轴的高度总是等于12px,经过调整,字体大小的值可以通过以下公式计算
c =(A A)s。
在这里,C是指调整字体大小,S是指原指定的字体大小,一个是由字体大小调整属性指定的纵横比,a'refers以实际字体的纵横比。
不能将字体大小的值调整为负值,设置为0会导致文本不高,换句话说,文本将被隐藏。在旧的浏览器中,如Firefox 40,如果属性值设置为0,则该文本将被设置为非。
在大多数情况下,开发商往往会尝试不同的字体大小的值来确定哪些值是最好的一个给定的字体出现。这意味着,在理想的情况下,他们希望所有字体的X轴的高度等于首选字体X轴。换句话说,最合适的字体大小调整值是你喜欢的字体的纵横比。
如何计算字体的纵横比
为了确定字体的正确和正确的长宽比,你可以得到实际的经验,即字体的大小应该与原始字体大小相同。
计算纵横比的第一步是先创建2个元素。每个元素都包含一个字母和一个边界包围的字母(因为我们有比较,所以每个字母必须相同)。同时,每个元素的字体大小属性值应该是相同的,但只有一个元素将使用字体的大小调整属性时的字体。调整大小的值等于垂直和水平比一个给定的字体,每个字母的大小是一样的。
在下面的演示中,我创建了全信的,边境trsquo,‘brsquo,应用不同的字体大小调整属性值每一封信。
以下是相关代码:
{。adjusted-a
字体大小调整:0.4;
}
{。adjusted-b
字体大小调整:0.495;
}
{。adjusted-c
字体大小调整:0.6;
}
如下面的演示所示,字体大小调整的值越大,字母出现的越大,而字体越小,当字母等于长宽比时,每个字母的大小是相等的。
在网站上使用字体大小调整
字体大小的值调整用于演示下面是'在过去,latorsquo CodePen演示;字体设置的值将被用来调整‘Verdanarsquo;这个候选人字体。将有一个按钮来控制是否变更发生的时候,你可以修改之前和之后看到的变化:
当你处理大量的单词时,效果会更吸引人,但是上面的例子应该足以让你意识到这个属性的用处。
浏览器支持
目前,只有Firefox默认支持字体大小调整属性,Chrome和Opera是从43和30版本推出的实验功能。开发商需要去铬: / /旗子打开实验网络平台的features选项。边缘和Safari浏览器不支持此属性。
如果你决定使用这个属性,低版本的浏览器支持就不会有问题,这个属性被设计为考虑向后兼容性,不支持浏览器将显示正常文本,浏览器将支持基于字体大小的属性调整值。
总结
在阅读本文之后,您应该知道字体大小调整属性是什么,为什么它是重要的,以及如何计算不同字体的垂直和水平比率。
因为字体大小的调整是在旧的浏览器优雅降级,你可以直接将该属性应用于您的生产环境,从而提高网页文本的易读性。
你有没有其他工具或方法可以帮助开发人员更快地计算宽高比告诉他们这个消息。
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。