网页中 span 标签应用 text-scale 类名时如何跟随系统字体缩放
网页中 span 标签应用 text-scale 类名时，配合 meta 标签的 scale 值，其字体大小会随操作系统或浏览器的字体设置按比例自动缩放。
启用缩放机制与类名的作用范围
在 HTML 文档的 head 部分添加 <meta name='text-scale' content='scale' /> 标签，可以通知浏览器页面已针对不同字体大小偏好进行了优化。该标签会启用根元素 html 的初始字体大小，使其与操作系统或用户代理级别的文本缩放设置成比例。同时，它还会禁用浏览器现有的基于启发式的文本自动调整机制，例如移动设备上的自动缩放功能。
当开发者对 span 标签应用 text-scale 类名时，CSS 规则会将该元素的 font-size 设置为 1rem。这意味着在支持 <meta name='text-scale' content='scale'> 的浏览器中，该 span 标签内的文本会随操作系统或浏览器字体设置的变化而按比例缩放。这种机制确保了页面中特定文本区域能够响应系统的字体偏好，而不会破坏整体布局。
使用相对单位实现响应式排版
为了使内容能够随系统设置自动缩放，开发者应避免使用绝对长度单位（如 px）来设置字体大小。相反，应使用相对单位如 rem 或 em，或者使用 medium 等关键字。例如，设置 font-size: 1rem 或 font-size: medium 会让元素继承根元素的字体大小。当根元素字体大小随系统设置变化时，所有使用这些相对单位的文本都会按比例缩放。
如果开发者覆盖了根元素的初始字体大小，例如设置为 16px，那么文本缩放功能将失效。因为固定值会覆盖系统设置的缩放效果，导致内容无法响应系统偏好。因此，推荐的做法是保持根元素字体大小的默认值，或者允许其根据系统设置自动调整，以确保所有相对单位定义的文本都能正确缩放。
与 env(preferred-text-scale) 的区别与避免重复
使用 <meta name='text-scale' content='scale' /> 来实现基于操作系统文本缩放设置的大小调整，比使用 env(preferred-text-scale) 环境变量更推荐。两者在移动平台上的效果相似，但 meta 标签在桌面浏览器上也提供了改进，且使用起来更为简单。此外，meta 标签还能确保在移动平台上启用文本缩放功能，这是默认情况下不存在的。
开发者应避免同时使用 meta 标签和 env(preferred-text-scale) 环境变量。因为如果同时启用，文本缩放可能会被应用两次，导致较小的相对尺寸变得更小，而较大的相对尺寸变得更大。这种双重缩放可能会破坏页面的布局和视觉一致性，因此建议根据实际需求选择其中一种方式来实现文本缩放。
测试与验证缩放效果
要在移动浏览器中测试缩放效果，可以将包含 <meta name='text-scale' content='scale' /> 的页面与不包含该标签的页面进行对比。在移动设备的显示或辅助功能设置中更改首选字体大小，然后观察两个页面的变化。在包含该标签的页面中，文本应该会按比例缩放，而未包含该标签的页面则保持不变。
为了验证缩放是否生效，可以检查页面中使用了相对单位（如 rem）的元素。当系统字体大小改变时，这些元素的大小应该随之改变。如果发现某些元素的大小没有变化，可能是因为它们使用了绝对单位（如 px）或者开发者手动覆盖了根元素的字体大小。确保页面在不同字体大小设置下都能正常显示，是验证缩放效果的关键。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。