辅助功能 文本大小
为什么
有些人需要更大的文本才能感知字母。
什么
用户必须能够更改文本大小而无需缩放整个界面。
这可以通过操作系统或浏览器的设置来完成。有许多方法可以做到这一点。在桌面的 Chrome 浏览器中，您可以在设置中的“外观”和“自定义字体”下设置字体大小。
如何
让我们在桌面或笔记本电脑上的 Chrome 浏览器中打开印度 LG 的网站。
这是使用默认浏览器设置的“最受欢迎”部分的外观。
浏览器设置
现在，在您的 Chrome 浏览器中，将字体大小设置为 40 像素。这是默认大小的 2.5 倍。对于视力障碍用户来说，这并不多。
.model-name {
font-size: 18px;
line-height: 22px;
height: 66px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
相对单位
为了解决这个问题，让我们尝试使用rem 而不是px。如果基准大小为 16 px，则18 px 为1.125 rem。
.model-name {
font-size: 1.125rem;
line-height: 22px;
height: 66px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
这有几个原因。首先，line-height 以像素为单位设置。与字体大小一样，在设置行高 时，我们应该避免使用绝对单位。line-height 可以使用没有单位的数字来设置，而不是长度。在这种情况下，我们可以使用line-height: 1.2; 而不是line-height: 22px;
产品标题的容器具有height: 66px; - 当您想要支持文本缩放时，这不是一个好主意。让我们尝试删除该绝对高度。
最后一个问题是该产品标题具有-webkit-line-clamp: 3;，它将文本限制为三行。重要的信息丢失了。
.model-name {
font-size: 1.125rem;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
结果
最后，大而易读的文本。
本课程不会涵盖支持文本调整大小的所有技术。主要要点是您应该测试您编写的网站，并**努力使用相对单位**。
