9

我在 Asus Nexus 7 上运行网页（用 jQueryMobile 编写）。我在 CSS 中将字体大小设置为 14px，但在调试期间（使用 PC 上的 Chrome）我可以看到它的计算大小是 22px。

HTML 代码如下所示：

<div data-role="content" class="ui-content" role="main">
    <div id="summaryContent">
        <div class="contentPanel">
            <div class="header">
                Some nice info with 14px
            </div>
            <div class="content">
                <div class="headerText">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 30.11.2012</span>
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 2012</span>
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 1981</span>
                </div>
                <div class="headerText">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                </div>
            </div>
        </div>
    </div>
</div>

div 是 14px，但下class="header"一个是 22px。

CSS 代码：

.contentPanel > div
{
    padding: 10px;
    font-size: 14px;
}


.contentPanel div.header,
{
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.contentPanel div.content
{
    color: #000000;
    border-radius: 0px 0px 5px 5px;
    border-bottom: 1px solid #B5B5B5;
}

.contentPanel div.content div.element {
    padding: 10px 10px 10px 0px;
    display: inline-block;
}
.contentPanel div.content span.dateInfo {
    color: #7a7a7a;
}

.headerText {
    color: #454545;
    font-weight: bold;
}

我检查了文本缩放是 100%。是华硕 Nexus 7 的错误吗？有可能使它成为14px吗？在 iPad 和三星 Galaxy Tab 上一切正常。

2012 年 11 月 20 日更新：

我提出了建议的更改，但它们没有帮助。JavaScript 中的代码是这样工作的：

  • 我在 JS 中创建 HTML

  • 然后我将这个新创建的 HTML 插入 DOM

  • 此时（在更改页面之前）在 Chrome 调试器（连接到 Nexus）中我可以看到 14px。
  • 然后调用 jQueryMobile changePage() 并更改字体大小。

2012 年 11 月 20 日更新 #2

jQueryMobile 将类 ui-page-active 应用于应该显示在屏幕上的 DOM 树部分。

CSS：

.ui-mobile .ui-page-active { display: block; overflow: visible; }

在应用这个类之前，字体大小是 14px，但在它之后，它会增加到 18px 或 22px。有时它工作正常。我在 iPad 和三星 Galaxy Tab 上检查了它，它工作正常。

有时再次进入页面会将字体大小恢复为 14px，旋转设备时也会发生类似的情况。

4

6 回答 6

24

这可能与Font Boosting有关。

要禁用特定元素，max-height: 1000000px请在元素、父元素或祖父元素上提供。

或者，提供

body, body * {
    max-height: 1000000px;
}

在整个页面上禁用字体增强。

于 2013-03-07T02:12:01.657 回答
4

我在这里发布了您问题的潜在答案。

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

Chrome 可访问性选项

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

于 2013-03-07T02:06:24.113 回答
1

没有 CSS 代码很难回答。

请查看从哪里获取属性，可能是从父元素继承的。您可以使用 firebug 或 Google Chrome 中的控制台（按 F12）并浏览 div。

您还可以在您的 css 规则中使用 !important “强制”使用属性：

.fontsize14px {
   font-size: 14px !important;
}

还要检查您是否正确编写了属性或类名。有时只是一个错字的问题。

于 2012-11-16T14:42:41.917 回答
1

如果您在字体增强方面遇到问题，您可能需要检查是否在元数据中设置了视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
于 2018-05-27T11:37:22.683 回答
1

!important 标志对我没有帮助（Windows 桌面上的 Firefox）。我的情况是由于怪癖模式。

解决方案是要么使用标准模式，要么在怪癖模式中覆盖字体继承（在怪癖模式中修复表格继承）

  1. 通过添加 doctype 声明来开启标准模式

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  2. 或在怪癖模式下应用解决方法：

    table, caption { font-size: inherit; }

    这同样适用于其他字体属性：

    font-weight: inherit;
font-style: inherit;
font-variant: inherit;
于 2016-02-12T13:08:26.477 回答
0

Chrome 有Minimum font size设置，它将覆盖您的CSS样式。如果你有这种风格：

.tiny-tiny-text { font-size: 1px; }

但是设置为 7 px，你的字体大小永远不会小于 7 px。

在此处输入图像描述

于 2019-04-30T11:52:18.207 回答