查看原文
其他

史诗级更新!Chrome 已解除最小字体 12px 限制

小懒 FED实验室 2024-02-12
关注下方公众号,获取更多热点资讯

相信坚持的力量!今天是坚持日更的第123天,点击关注、点赞、在看支持我

你是不是一直还在为 Chrome 如何设置小于 12px 的字体寻找答案,这个曾经困扰前端开发者十多年的痛,迎来了史诗级更新。本文将介绍 Chrome 已支持和即将支持的 CSS Text Module Level 4 中的四项全新国际化 CSS 功能:

  • 标点符号字距
  • 脚本间间距
  • 日语短语换行
  • 移除最小字体 12px 限制

CJK 标点符号字距

在中文、日语和韩语中,标点字符之间应用字距可提高可读性,并且排版在视觉上更美观。目前,大多数印刷材料和文字处理程序都会采用这种字距调整。

例如,CJK 句号和 CJK 右括号通常设计为在字形空间的右半部分设置字形内部间距,以便每个字符都有恒定的推进。

但是,当这些标点符号在一行出现时,这种字形内部空格就会变得过多。在以下两个示例中,第二个是正确的排版;应移除 CJK 英文句号的右半部分。

CJK 标点符号字距 text-spacing-trim 功能正在开发中,将在不久发布的版本中被支持。

脚本间间距

中文和日语混合了多种文字,包括汉字、拉丁字母和 ASCII 数字;如果是日语,则还使用平假名和片假名。在不同文字和非汉字文字之间切换时,使用小的空格通常有助于提高可读性。

Chrome 计划默认开始插入脚本间间距。这项功能为网络带来了一种广泛应用于印刷材料和提高易读性的常见做法。

日语短语换行

从 Chrome 119 版本开始,已支持日语短语换行 word-break: auto-phrase 功能,该功能可提高日语文字的易读性。

某些东亚语言(如中文或日语)不使用空格来分隔字词,并且行可以在任何字符处换行,即使位于字词中间也是如此。这是这些语言的正常换行行为,但在标题或诗歌等短文本中,最好在自然短语边界处换行(在日语中,这种边界称为“Bunsetsu”)。

如下示例,新的 CSS 功能 word-break: auto-phrase 指定应在此类边界处进行换行。

<html lang="ja">
<style>
h1 {
  word-break: auto-phrase;
}
</style>

<h1>窓ぎわのトットちゃん<h1>

边界检测由机器学习引擎执行,因此不一定能得到您想要的结果。如果发生这种情况,您可以手动调整可断点。<wbr> 标记或零宽度空格会强制执行可断点,而零宽度联接器可阻止断点。

窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース

目前,Chrome 仅通过采用 AdaBoost 机器学习技术的 BudouX C++ 端口在日语版本中支持此功能。Chrome 计划未来版本中支持韩语和中文。

解除最小字体 12px 限制

日常开发中,在角标、图标、拼音、装饰文本、动图缩放等众多场景中会有小字体需求。在 Chrome 118 之前,小于 10px 的字体不会按指定方式呈现,但如果语言是阿拉伯语、波斯语、日语、韩语、泰语、简体中文或繁体中文,系统会将其向上舍入。开发者需要权宜解决方法来呈现较小的文本,例如使用 transform 属性。

Chrome 从 118 开始,为所有语言解除这一限制,使这 7 种语言与其余语言一致。此更改改进了与其他浏览器的互操作性。

大家都在看

继续滑动看下一个

史诗级更新!Chrome 已解除最小字体 12px 限制

小懒 FED实验室
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存