文章介绍了Chrome Canary浏览器新增的文本缩放支持功能，开发者可通过添加<meta name="text-scale" content="scale" />标签启用该特性。该功能由作者在2024年提出，经谷歌团队协助开发，现已纳入CSS Fonts 5规范，目前处于实验性阶段。

在Chrome Canary中尝试文本缩放支持

作者：Josh Tumath
发布日期：2026年1月27日
阅读时长：7分钟

主要内容概述

1. 新功能介绍

   • Chrome Canary（启用“Experimental Web Platform features”标志后）现支持一种新的HTML <meta>标签：
     html <meta name="text-scale" content="scale" />
   • 该功能由作者Josh Tumath于2024年夏季向CSS工作组提出，并在Google Chrome团队的协助下开发完成，现已被纳入CSS Fonts 5规范。

2. 问题背景

   • 目前，iOS和Android用户调整系统文字大小时，网页内容（如Safari和Chrome）不会同步缩放，而Firefox则通过整页缩放实现，体验不一致。
   • 数据显示，约37%的Android用户和34%的iOS用户修改过系统默认文字大小，但开发者缺乏适配手段。

3. 解决方案

   • 新<meta>标签的作用类似于<meta name=viewport>，声明页面支持用户自定义文字大小。
   • 示例：BBC网站在启用该标签后，文字能按用户偏好放大（如图片对比所示）。

4. 为何需要主动启用？

   • 强制全局启用会导致布局混乱（如桌面端LinkedIn文字放大后内容截断）。
   • 需遵循WCAG 2.2的无障碍标准（如1.4.4和1.4.10），确保文字放大至200%时无需横向滚动。

5. 适配建议

   • 避免覆盖默认字体大小：不要强制设置:root { font-size: 16px; }。
   • 使用相对单位：对文字、图标等内容使用em或rem，但间距属性（如margin）可使用固定单位。
   • 充分测试：在320px视窗下模拟200%文字缩放，检查布局适应性。

6. 未来计划

   • 其他浏览器预计将在2026年内跟进支持。
   • 待解决问题：标题文字是否需要与正文同比例放大（如32px→64px）？
   • 作者将在CSS Day 2026进一步讨论该功能。

作者简介
Josh Tumath，BBC高级软件工程师，专注Web标准、CSS和设计系统。

（注：原文中的导航菜单、社交媒体链接及技术框架说明等非核心内容已省略。）

以下是评论内容的总结，平衡呈现不同观点并保留关键引用：

支持文本缩放的观点

1. 改善可访问性：视力不佳的用户需要文本缩放功能。

   • "As someone whose eyesight is getting worse, thank you for helping make this happen" (socalgal2)
   • "User preferences should be respected by default" (fleebee)

2. 移动端需求：移动设备需要独立的文本缩放功能。

   • "What we need on mobile is the ability to pinch zoom on images to scale the page and pinch zoom on text" (kevin_thibedeau)
   • "Android 14 has this in non-linear text scaling" (david422)

反对文本缩放的观点

1. 破坏布局：独立缩放文本会导致布局问题，响应式设计已足够。

   • "You just can't scale text size independently of layout and interface... Good news is that we already have a solution for this: responsive design" (montroser)
   • "This meta tag will get copied and pasted by people who don't know what it means... it will be broken" (zarzavat)

2. 开发复杂性：增加测试和维护负担。

   • "Developers now have a geometric set of permutations to test... It's so much that it won't make business sense" (montroser)
   • "Like web frontend dev isn't messy enough" (feverzsj)

3. 兼容性问题：功能支持率低，用户体验不一致。

   • "I'm pretty sure this will only get supported by perhaps 5% of websites" (londons_explore)
   • "This is a terrible idea... it's going to make things worse" (zarzavat)

技术建议

1. 替代方案：

   • 使用响应式设计和页面缩放（zoom）代替独立文本缩放。
     • "When you zoom in, you are simply simulating a narrower viewport width" (montroser)
   • 使用非线性缩放或混合单位（如em和px）控制标题缩放。
     • "Express the header text size with CSS calc function with a sum of em and px values" (avallach)

2. 实现细节：

   • 避免滥用px单位，优先使用相对单位（如em、rem）。
     • "If you use font-relative units like em and rem everywhere... everything will scale up" (nextaccountic)
   • 关联设备像素比（devicePixelRatio）而非额外参数。
     • "Should have been tied to the window.devicePixelRatio" (ivanjermakov)

其他批评

• 指纹识别风险：新功能可能增加用户追踪手段。
  • "This is quite a few fingerprinting bits to add to the bucket" (zamalek)
• 历史教训：过去类似尝试曾导致问题。
  • "Old timers remember that this was the old way of doing things... :root{font-size: 16px} breaks it" (halapro)