如何在不同的浏览器中测试奇怪的`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. 这是在浏览器中定义字体大小的可靠方法吗？
  

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

  

  
1. 它基于什么？是相对于某些默认值吗？
  

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

  

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

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

结论：这些都不适合您想要的东西。