html - 字体大小的视口(viewport)单位

Question

我曾尝试使用视口(viewport)单位来设置字体大小，但发现大小并没有按照我希望的那样统一缩放。

在跨不同操作系统的同一个浏览器 (chrome) 上，运行 OS X 的屏幕尺寸较小的浏览器比屏幕/分辨率较大的 Windows 浏览器具有更大、更清晰的字体。

在相同的浏览器、相同的操作系统(Windows)但不同的设备(相同的宽高比)上，字体看起来完全不同。

我之前读过有关不同操作系统以不同方式呈现字体的信息，但在第二个 senerio 中并非如此。字体大小的视口(viewport)单位的实现是否仍然有问题？使用 text-rendering: optimizeLegibility 进行渲染也没有多大帮助。我现在应该坚持使用 px/em 还是有一些我错过的 css 属性可以帮助最小化这些影响。

Answer 1

如果是 iOS - 您确定您使用的不是分辨率更高的视网膜屏幕吗？

无论如何，关于字体大小，我认为 px 或 em 应该是更好的选择。我通常对大部分代码使用 px，仅仅是因为这样你可以完全控制并且不需要担心由于 parent 的继承而导致浏览器计算 em 实际大小的不同(IE - 我正在看着你!)。总的来说，我个人不相信有很多使用视口(viewport)单位作为字体大小的有效用例，并且您可以通过将 px 或 ems 与媒体查询一起使用来获得更一致的结果。