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

Question

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

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

.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)

题目：

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

Answer 1

Is this a reliable way to define the font size across browsers?

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

What is it based upon? Is it relative to some default value?

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

Is there a way to test these font size definitions work nicely across different browsers and devices?

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

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

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

How to test weird `font-size` definition in different browsers

css

cross-browser

font-size