包阅导读总结
1. 关键词：CSS、font-size-adjust、字体、可读性、布局偏移
2. 总结：
– CSS font-size-adjust 属性已成为主流浏览器基线支持。
– 该属性能避免加载替代字体时的布局偏移，确保小字体下的可读性。
– 介绍了它对解决不同字体问题的帮助，如今已在各大平台可用。
3. 主要内容：
– CSS font-size-adjust 成为基线标准
– 主流浏览器引擎支持，自 2024 年 7 月 23 日成为新增基准功能。
– 在 Chrome 中推出，是 Interop 2024 的一部分。
– 不同字体存在的问题
– 相同大小的不同字体显示文本占用空间不同，因纵横比差异。
– 备用字体可能引发空间变化和可读性问题。
– font-size-adjust 如何解决
– 可调整备用字体匹配首选字体。
– 能利用默认 ex-height 或指定 ch-width 等字体度量标准调整。
– 该属性在各大平台可用，可对网站备用字体效果微调。
思维导图：
文章地址：https://mp.weixin.qq.com/s/MBozDkpTljGOxBXXfSap4Q
文章来源：mp.weixin.qq.com
作者：Rachel??Andrew
发布时间：2024/8/14 0:02
语言：中文
总字数：938字
预计阅读时间：4分钟
评分：90分
标签：CSS,字体调整,浏览器支持,前端开发,可读性
以下为原文内容
本内容来源于用户推荐转载，旨在分享知识与观点，如有侵权请联系删除 联系邮箱 media@ilingban.com
前言
CSS font-size-adjust 属性现已成为所有主流浏览器引擎的基线支持，有助于在加载替代字体时避免布局偏移，并确保替代字体在较小字体大小下的可读性。今日前端早读课文章由 @飘飘翻译分享。
正文从这开始～～
庆祝：该网页特性现已在三大主流浏览器引擎中可用，自 2024 年 7 月 23 日起成为基准的新增功能。
浏览器支持：
今天，CSSfont-size-adjust属性在 Chrome 中推出，并成为新可用的基线标准的一部分。该属性可以帮助防止在加载备用字体时布局发生变化，并确保在较小字体尺寸下备用字体的可读性。font-size-adjust属性是 Interop 2024 的一部分，因此这是提高 Web 平台互操作性努力的又一胜利。
【第3303期】JavaScript Set新增7个方法
问题
当你将两种字体设置为相同的大小时，由于字符的形状和大小，显示的文本可能占用非常不同的空间。例如，下面的演示展示了使用 Verdana 和 Arial 字体，并将其设置为 16 像素大小的文本。
以 16px 显示的 Verdana 和 Arial 文本。
https://codepen.io/web-dot-dev/pen/PorNZaE
大小的差异是由于 纵横比 不同造成的，纵横比是指字体中小写字母相对于大写字母的高度。
【第3306期】纯 CSS 检测滚动的速度和方向
当使用具有不同纵横比的字体作为备用字体时，这可能会引发两个问题。首先，字体占用的空间会发生变化。其次，你选择的备用字体可能在小字体尺寸下的可读性不如首选字体。这是因为小写字母相对于大写字母的相对高度是影响可读性的关键因素。
font-size-adjust 如何帮助解决问题
font-size-adjust属性允许你调整备用字体，以更好地匹配首选字体。以下示例显示了之前展示的两种字体，这次通过调整第二种字体使其与第一种字体匹配。
使用 font-size-adjust。
https://codepen.io/web-dot-dev/pen/wvLGMXj
此示例使用了一个单个值，即一个数字，利用默认的ex-height字体度量标准来调整字体。ex-height 是指字体中小写字母 x 的高度与字体大小的比率。你还可以指定使用的字体度量标准。在下一个示例中，我使用了 ch-width 关键字与数字一起标准化了字体。
使用 font-size-adjust 和 ch-width 字体度量标准。
要查看所有可能的值，请参阅 MDN 对 font-size-adjust 的文档。
值得一提的是，现在这一属性已经在各大平台上可用，您可以检查网站在使用备用字体时的效果，并通过 font-size-adjust 进行一些微调，以帮助使用备用字体的读者获得更好的体验！
关于本文
译者：@飘飘
作者：@Rachel Andrew
原文：https://web.dev/blog/font-size-adjust
这期前端早读课
对你有帮助，帮”赞“一下，
期待下一期，帮”在看” 一下 。
