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

Question

我想收集一些关于用户不希望使用标准16px的浏览器设置的默认字体大小范围的统计信息。

此信息可能有助于确定我们的布局需要不破坏哪种字体大小。

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

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

Answer 1

最佳做法是在ems中设置字体大小，该字体大小将根据浏览器字体大小进行相应缩放，但是您可以阅读本文：Users DO Change Font Size

Answer 2

实际上，这不是您想的那样简单，因为它们不是可以调用的JavaScript钩子。

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

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

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