css - 如何在不同的浏览器中测试奇怪的 `font-size` 定义

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. Is this a reliable way to define the font size across browsers?

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

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

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

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

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

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