如何获取元素的“指定”样式而不是计算样式

Question

在不包含viewport元标记的网页上，大多数移动浏览器会将页面上的部分或全部字体“提升”到大于css指定的字体。例如，在移动版Safari上，指定大小的7px将被提升为类似12px的内容。

您可以使用getComputedStyle读出提升值。我的问题是，有没有一种可靠的方法来读出 unboosted 值？即如果字体被提升到12，我想知道它从7开始。

Answer 1

Webkit有一个不推荐使用的函数来获取元素的所有样式表规则：window.getMatchedCSSRules(<<element>>)。您可以使用它来获取规则列表并循环遍历它们以打印或处理每个规则的属性。您还需要考虑元素的style属性。

为了处理您的font-size方案，我想最好的方法是获取适用于该元素的所有规则，按优先级排序（记住考虑style属性和{{ 1}}标志，然后选择值。

这不完全是可靠，因为它是一个Webkit函数，它正在逐渐消失。关于如何规避规则的问题a bunch of discussion here。一旦你有了元素的规则，只需要选择你需要的具体信息。

Answer 2

这里只是一个快速的答案。简而言之：您无法使用今天的API获得指定的样式。我 能够通过使用text-size-adjust（前缀为-webkit- for Safari）暂时关闭字体提升来解决我的具体问题。