2K 和更高分辨率设备上的字体大小

Posted 2023-03-06

【中文标题】2K 和更高分辨率设备上的字体大小

【英文标题】：font-size on 2K and higher resolution devices

【发布时间】：2015-12-03 06:21:38

【问题描述】：

我有一个分辨率为1680 x 1050 的屏幕。

我是一名网络开发人员，在构建网站时，我们使用font-sizes，在分辨率介于1366 x 768 到1920 x 1080 之间的笔记本电脑上易于阅读。

在使用 Chrome 开发者工具时，我选择了分辨率为2560 x 1600的Amazon Kindle Fire HDX。在此设备（chrome 正在模拟）上，由于高分辨率，字体大小呈现非常小。我尝试了许多字体大小单位，例如vw, vh, %，以便字体大小在所有分辨率上看起来都相同但失败了。

我什至使用 Chrom 开发工具打开了 ***，发现字体大小似乎太小了。我不知道真正的 Kindle HDX 上显示的字体大小是否与我在 Kindle HDX 上看到的 chrome 正在模拟的字体大小相同，而且我也没有真正的 2K res 设备来测试我的网站。如何应对这个问题？我希望我的网站在所有分辨率下都可读。

【问题讨论】：

我也没有Kindle，但我能明白你的意思，用模拟器。希望 Chrome 弄错了。

【参考方案1】：

如果您的字体大小是相对单位，那么您可能就可以了。

我认为您在 Chrome 开发工具中看到的是“缩放以适应”功能，该功能将缩放目标设备的页面以适应 您的浏览器窗口。取消选中“缩放以适应”，我想你会看到文字清晰。请注意，标尺值也会更改为更准确的表示。

您可以在此屏幕截图中看到标尺表明设备模拟正在以 1600 像素宽进行渲染，尽管此屏幕截图绝对不是以 1600 像素宽拍摄的。它已缩放以适合我的窗口。

【参考方案2】：

我建议您使用 em 作为字体单位，以使其更加跨浏览器/设备兼容。 em 应该使用浏览器自己的内置字体大小，以使内容更具可读性以及浏览器的缩放设置。

此外，您可能想尝试各种 CSS 框架，这些框架可能会尝试处理更一致的跨浏览器/设备一致性，以根据设备/dpi 设置将字体保持在更多相对大小。 （很遗憾，我没有经历过这种情况，但应该是您开始研究的好地方。