如何在不同的浏览器中测试奇怪的“字体大小”定义

Question

我最近在 css 中遇到了 font-size: 的这个奇怪定义，并在代码审查期间将其标记为错误。

浏览器通过rem 处理“相对”字体大小的方式对我来说非常清楚，但我从未遇到过如下字体大小定义：

.xx-small {
    font-size: xx-small;
}

.x-small {
    font-size: x-small;
}

.small {
    font-size: small;
}

.medium {
    font-size: medium;
}

.large {
    font-size: large;
}

.x-large {
    font-size: x-large;
}

.xx-large {
    font-size: xx-large;
}

显然符合 W3C 标准 (https://www.w3schools.com/cssref/pr_font_font-size.asp)

问题：

1. 这是定义跨浏览器字体大小的可靠方法吗？
2. 它基于什么？它是否与某个默认值相关？
3. 有没有办法测试这些字体大小定义在不同的浏览器和设备上是否正常工作？

Answer 1

1. 这是定义跨浏览器字体大小的可靠方法吗？

不，因为大小基于浏览器的默认字体大小（可由用户在首选项中设置），因此它们在系统之间有所不同。
因此，如果您想尊重用户的偏好，可以使用这些。如果您只想在所有浏览器中设置相同的字体大小，请使用像素。

1. 它基于什么？它是否与某个默认值相关？

是的，medium 是默认字体大小。请注意，这与 1rem 相同，但前提是您未在样式表中为 html 元素设置字体大小。

1. 有没有一种方法可以测试这些字体大小定义在不同的浏览器和设备上是否能正常工作？

嗯，它们在所有浏览器上都能很好地工作，因为它一直存在（CSS1，甚至在此之前，在 <font> 元素中），但默认值可能不同，并且相对字体大小可能不同浏览器和怪癖/标准模式之间。

结论：这些都不适合你想要的。