Nexus 7 Chrome 上计算的字体大小与 CSS 字体大小不同

Question

我有一些 CSS 和 HTML，其中 font-size 被明确设置为 13 像素，并且在大多数情况下保持这种方式，但有时 Nexus 7 上的 Chrome 有时会显示同一页面的一部分为 14 像素；

不幸的是，我无法在 jsfiddle 中重新创建问题，所以我不确定发生了什么。

在我尝试在http://jsfiddle.net/K9hyG/2/ 重新创建问题时，可以看到一些我用来影响字体系列和字体大小的样式。

当使用 Chrome 调试器时，我可以在计算样式中看到以下有问题的段落之一：

border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
    font[size="2"] - 13px   default.aspx:427
    body - 13px             default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;

文本阴影是由我使用 jQuery Mobile 生成的。在 Chrome 调试器中，出现了 text-shadow 指令的两个实例。一个继承自div.ui-page.ui-body-c.ui-page-active（ui-body-c为激活组件），另一个继承自body.ui-mobile-viewport.ui-overlay-c，（ ui-overlay-c 是激活组件），但两个定义来自主题文件中 CSS 的同一部分。

如果我停用其中一个，违规段落在 Chrome 调试器中实际上会更改为 13px，但在设备上看起来仍然相同。如果它们都在 Chrome 调试器中被停用，那么它会回到 14px。即使 text-shadow 设置为 rgb(255,255,255) 0px 0px 0px，这种情况仍然会发生。

我见过this post，但这个问题基本上也没有解决。

Answer 1

您的问题可能是由于 Chrome 的文本缩放设置所致，该设置出于可访问性原因将文本设置为特定比例。许多用户都在使用它，他们难以在手机上阅读小文本。您无法解决此问题，也不应尝试解决此问题，尤其是对于支持移动设备的网站。

我建议您要么忽略它，要么修改您的 CSS，使其支持略有不同的文本大小。

Answer 2

我的一位同事已经找到了答案。看来我是Font Boosting的不知情的受害者

根据链接，可以通过在相关元素上提供 max-height: 1000000px 或为所有元素提供 body, body * 来禁用字体增强。

Answer 3

经过一些测试，这条规则帮助了我。必须添加到包含提升文本的元素或其父元素，具体取决于 div/table 结构。

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

也许必须根据您的需要更正宽度和高度值。