最近我遇到了一个非常有意思的Bug。测试人员反馈某个页面的字体大小不对。我打开页面一看，字体明明和其他页面一致，都是按照设计稿实现的。这让我一度怀疑是不是测试人员看错了。
直到我让他共享屏幕，我才意识到问题的根源：他的页面字体大小是20px，而我自己的电脑上显示的是16px。
这让我开始怀疑是否与浏览器设置有关。于是我换了一个浏览器测试，果然复现了问题。经过一番查找，我发现 Chrome浏览器允许用户在设置中自定义默认字体大小，而这个设置会影响页面中使用 rem 单位但未明确指定元素 font-size 的渲染。
rem 的本质：依赖根元素的字体大小
而一旦我们在 html 和 body 上明确设置了 font-size，比如：
css
html { font-size: 16px; }
body { font-size: 16px; }那么无论用户如何更改浏览器的字体设置，页面上的字体大小都将保持一致。
不同网站的策略对比：GitHub、YouTube 与 Shopify
为了进一步验证这个机制，我查看了多个主流网站的实现方式：
GitHub 和 YouTube
在更改浏览器字体设置后，这些网站的字体大小并不会发生变化。它们在 html 或 body 上明确设置了 font-size，从而屏蔽了浏览器设置的影响。这种做法确保了视觉一致性，符合设计驱动型产品的需求。
Shopify
Shopify 的字体大小会响应用户浏览器的字体设置。这说明 Shopify 在设计上有意支持用户自定义字体大小，这是一种对可访问性友好的做法。
可访问性 vs 一致性：我们该如何权衡？
这引发了一个更深层次的问题：我们是否应该允许用户通过浏览器设置调整字体大小？****
-
可访问性角度：允许用户自定义字体大小可以帮助视障用户更好地阅读内容，是一种对用户友好的做法。响应用户浏览器字体设置本身就是一种可访问性策略，它尊重用户的阅读习惯和设备需求。
-
品牌一致性角度：字体大小的变化可能会破坏页面布局，影响视觉体验，甚至导致某些组件错位或溢出。
因此，是否固定字体大小，取决于产品定位：****
- 内容驱动型网站（如博客、电商平台）：应尊重用户设置，提升可访问性。
- 设计驱动型产品（如品牌官网、设计平台）：应固定字体大小，保持视觉一致性。
设计与开发的协同：从 px 到 rem 的转换挑战
在实际开发中，设计师通常使用 px 作为单位，而前端开发者在使用 rem 时需要进行单位转换。这种转换过程容易出错，也增加了沟通成本。
更好的做法
- 在设计阶段就明确是否需要支持用户自定义字体大小；
- 如果使用 rem，设计稿也应采用 rem 或提供转换参考；
- 保持设计与代码单位的一致性，提升开发效率和可维护性；
- 在项目中建立统一的字体策略文档，明确哪些页面或模块需要响应用户设置，哪些需要保持一致。
总结：一次 Bug 带来的多维思考
这次 Bug 的调查让我意识到：
-
浏览器设置可能影响页面样式，尤其是字体；
-
使用 rem 时必须明确设置根元素的 font-size；
-
响应用户设置是一种可访问性策略，但也可能影响设计一致性；
-
不同网站对字体策略的选择反映了其产品定位；
-
设计与开发之间的单位协同至关重要，应在项目初期就达成共识。
建议：
如果你正在开发一个需要高度还原设计稿的产品，建议在 html 和 body 上明确设置 font-size，并在设计阶段就与设计师沟通单位使用策略。如果希望产品具备更好的可访问性，也可以考虑不设置根字体大小，让用户的浏览器设置生效。