0

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

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

在我尝试在http://jsfiddle.net/K9hyG/2/重新创建问题时，可以看到一些我用来影响 font-family 和 font-size 的样式。

使用 Chrome 调试器时，我可以在 Computed Style 中看到以下有问题的段落之一：

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.

我看过这篇文章，但这个问题在很大程度上也没有得到解决。

4

3 回答 3

10

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

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

于 2013-03-07T02:09:23.173 回答
2

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

Chrome 可访问性选项

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

于 2013-03-07T01:27:27.173 回答
0

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

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

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

于 2013-03-22T18:55:48.750 回答