研究：如何获取浏览器中配置的默认字体大小

Question

我想收集一些关于默认字体大小范围的统计数据，如果用户不希望使用标准16px，他们会在浏览器中设置这些数据。

此信息可能有助于确定我们的布局需要不中断的字体大小。

关于 SO 有很多类似的问题要求 body 元素上的有效字体大小，但这对我来说没有多大用处，因为我有兴趣收集有关浏览器默认字体的数据CSS 启动之前的大小。

或者有人知道这样的统计数据是否已经存在？

Answer 1

最好的做法是在 ems 中设置字体大小，并根据浏览器字体大小进行缩放，但你可以阅读这篇文章：Users DO Change Font Size

Answer 2

这实际上并不像您想象的那么简单，因为它们没有 JavaScript 钩子等您可以调用。

获得合理准确值的方法是：-

1. 创建一个具有opacity:0 的<div> 并将填充设置为0。
2. 添加一个您知道其确切尺寸的特定字体的单词，一个即使在 200% 字体大小下也可以在小屏幕上占一行的单词。
3. 将单词添加到 div。
4. 将该 div 的字体大小设置为 1em 或 100%（以便随用户字体大小缩放）
5. 将浏览器设置为正常字体大小，以像素为单位测量 div 的宽度。
6. 然后，当用户加载页面时，测量div 的宽度并将其与您知道的大小进行比较16px / default。
7. 然后您可以使用div 的宽度（通过JavaScript）来估计他们正在使用的字体大小。 （所以如果它通常是160px 宽并且用户有200px 宽，你可以估计他们正在使用20px 字体大小或125% (200 / 160)。）

以上内容相当准确，由于不同的浏览器处理字距略有不同，因此并不完美，但足以满足大多数需求。