如何在移动 chrome 中覆盖字体增强

Posted 2023-03-06

【中文标题】如何在移动 chrome 中覆盖字体增强

【英文标题】：how to override font boosting in mobile chrome

【发布时间】：2012-11-06 00:33:03

【问题描述】：

是否可以覆盖移动 chrome 中的字体增强功能？ 我之前在网上搜索过~包括***~。

我发现有些人说不可能，我也发现元标记有助于文本但也减少了文本的面积......这不好......

感谢您的帮助..

【问题讨论】：

据我所知，这仍然是不可能的，但是正在做一些工作来控制它。它甚至可能很快就会推出：bugs.webkit.org/show_bug.cgi?id=84186#c21

我想即使他们会修复它，它也只能在新版本上工作......所以它并没有真正帮助我

我无法在 Firefox Mobile 中找到有关等效功能的信息，因为 Gecko 将此功能称为“字体膨胀”，它由 -moz-text-size-adjust: none; 控制。显然 -moz-text-size-adjust 属性的存在只是为了选择这种字体大小膨胀，并且不做任何其他事情（参见 dbaron.org/log/20111126-font-inflation ）。

【参考方案1】：

在我的 reset.css 中添加以下行对我有用

    html * max-height:1000000px;

【讨论】：

事实上，任何大于元素有效高度的 max-height 值都会禁用子元素中的字体增强。

在所有情况下，Chrome 引入的 font-boosting 都会导致严重的问题，如字体大小，或者图形将不再按预期排列大小，并且布局可能会发生很大变化，甚至在通过以下方式查询时DOM 计算的字体大小或高度不会显示有效的计算大小（请注意，字体增强会影响元素的宽度和高度）。

通常会完全破坏脚部提升的东西是导航栏、混合图标和短文本，以及表格数据的呈现，或所有图块应该具有相同大小的“图块”布局（在平铺布局，每个单元格都有一个 constnat 宽度和高度，它们的大小由 max-width 和 max-height 设置为与宽度和高度相同的值，禁用溢出，与它们的内容无关（瓦片不在网格中，因为列数是可变的，具体取决于可用的总显示宽度，并且图块根据需要在尽可能多的行上流动）

所以我敦促 Chrome 作者实施正确的机制来可靠地禁用字体增强； “巨大的最大高度”确实是个把戏；但是 Chrome 仍然没有实现 CSS3 中提出的“text-size-adjust:none”（Mozilla 使用“-moz-”前缀实现它）。 Chrome 应该只在一个实验性功能中实现它，默认情况下在其高级“实验室”选项中禁用，但如果没有一种干净的方式在页面布局中禁用它，则不会部署它，现在它完全破坏了它。

此外，提升后的有效字体大小（以及有效宽度和高度）应该通过 DOM 在 CSS 中的某处公开：Chrome 忘记了这一点，造成了很多麻烦。

【参考方案2】：

没有真正的可能禁用字体增强。可能会有一些技巧，但它们的目的是不同的，事实上，做一些不同的事情。

【参考方案3】：

试试text-size-adjust:

html 
    text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;

【讨论】：

@amn 当在body 和<meta name="viewport" content="width=device-width, initial-scale=1.0"> 上使用时，它对我有用。它阻止了 android Chrome 减少我网站某些部分的字体。

好吧，它不适用于我在 Android 上的 Chrome 86。我有适当的视口标签，并在各种易受影响的元素上尝试了text-size-adjust。 -webkit- 前缀被视为无效，也没有效果。显式设置 max-height * 会有效地禁用自动调整 Chrome，否则会这样做，但这与您的答案无关。

【参考方案4】：

看起来有几个人有办法让它发挥作用。

Add some CSS 规则或给parent element width and height。

【讨论】：

最大高度技巧对我不起作用。我也不能给元素固定高度，所以它对我没有帮助....还是谢谢你。

添加最大高度并没有给它一个固定的高度，它只是阻止元素达到大于 1000000px 的高度

【参考方案5】：

Matt 和 Kundan Sankhe 的答案是目前最好的解决方案。

.element  max-height: 999999px; 

如果问题仍然存在，请尝试在 head 标签内添加：-

<meta name="viewport" content="width=device-width, initial-scale=1">

但请记住，这可能会导致图像标记或图像背景大小标记出现问题。

【参考方案6】：

这是一个 webkit 官方错误。您可以查看Webkit official site

您必须仅针对必须覆盖字体增强的特定元素，而不是针对不需要的元素。即

p 
   max-height: 999999px;

【讨论】：

您所指的“错误”是 Chrome 开发人员认为 没有字体增强的难以辨认的文本大小。该错误的解决方案是 Font Boosting，正如您可以从问题中看到的那样。

【参考方案7】：

Android Chrome 仅对具有动态高度的元素应用字体增强。一旦您指定 height、ma​​x-height 或 line-height，就不会应用字体提升。但是你应该小心像span 这样的内联元素，它的高度或最大高度属性是无效的。在这种情况下，您可以将显示设置为inline-block，如以下代码或其他可以设置高度的框类型。span font-size:12px; line-height:12px; display:inline-block;

【讨论】：

Chrome 在未设置为绝对尺寸时也会在使用“line-height”的元素中应用字体增强（单位为“px”、“mm”、“in”、“pc” , "pt"...) 但相对（显式在 "%" 或 "em" 中，或无单位用于继承更改字体大小而不设置新行高的子元素中的行高）。

【参考方案8】：

对于台式机和可能的移动设备（尚未测试移动设备），您可以通过在 HTML 元素上设置基本字体大小来禁用 Chrome 和 FF 中的字体大小提升。例如：

html 
  font-size: 16px;

这比 max-height 更简单。但是，从可访问性的角度来看，仍然很脏。

如果需要，也可以使用 jQuery 来设置。

【讨论】：

对我不起作用。可能是旧版 Chrome 的过时答案。