如何在移动版Chrome浏览器中取消字体增强功能

Question

是否有可能在移动版Chrome中覆盖字体增强？我之前在互联网上搜索过，包括stackoverflow。

我发现有些人说不可能，我也找到了一些meta标签可以帮助文字但同时减小了文本区域...这不是很好...

感谢您的帮助。

- Ron

---

据我所知，目前仍然不可能，但正在进行相关工作以实现对其的控制。甚至可能很快就会推出：https://bugs.webkit.org/show_bug.cgi?id=84186#c21 - developdaly

我猜即使他们修复了它，它也只能在新版本上运行...所以这对我并没有真正帮助。 - Ron

我在查找有关Firefox Mobile中等效功能的信息时遇到了麻烦，因为Gecko将此功能称为“字体膨胀”，并由“-moz-text-size-adjust：none;”控制。显然，-moz-text-size-adjust属性仅存在于选择退出此字体大小膨胀，并且不执行任何其他操作（请参见http://dbaron.org/log/20111126-font-inflation）。 - robocat

Answer 1

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

    html * {max-height:1000000px;}

- Matt

---

事实上，对于任何赋予max-height的值，只要该值大于元素的有效高度，就会禁用子元素中的字体增强。 - verdy_p

在所有情况下，Chrome引入的字体增强功能会导致严重问题，如字体大小或图形尺寸不再按预期对齐，布局可能会被深度改变甚至在通过DOM查询计算的字体大小或高度时也无法显示实际计算的大小（请注意，字体增强会影响元素的宽度和高度）。 - verdy_p

字体加粗通常会完全破坏导航栏、混合图标和短文本以及表格数据或“平铺”布局的呈现，其中所有平铺都应该具有相同的大小（在平铺布局中，每个单元格都具有固定的宽度和高度，它们的大小受到最大宽度和最大高度的限制，这些值与宽度和高度设置为相同的值，并禁用溢出，而不考虑它们的内容（平铺不在网格中，因为列数取决于可用的总显示宽度，平铺按需要流动到许多行中）。 - verdy_p

我敦促Chrome作者实现一个正确的机制来可靠地禁用字体增强；“huge max-height”确实是一个技巧，但Chrome仍未实现CSS3中提出的“text-size-adjust:none”（Mozilla使用“-moz-”前缀实现它）。 Chrome应该只在实验性功能中实现它，并在高级“实验室”选项中默认禁用它，而不是在没有清晰的禁用方式的情况下部署它，这会完全破坏页面布局。 - verdy_p

此外，增大后的有效字体大小（以及有效宽度和高度）应该通过DOM在CSS中公开：Chrome忘记了这样做，导致了很多麻烦。 - verdy_p

Answer 2

目前没有真正禁用字体加粗的可能性。虽然有一些hack方法，但它们针对的是不同的内容，实际上执行的也是不同的操作。

- looper

Answer 3

尝试使用text-size-adjust属性：（参考链接）

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

- fabb

---

@amn 当与<meta name="viewport" content="width=device-width, initial-scale=1.0">一起用于body时，它对我有效。 它阻止了Android Chrome在我的网站的某些部分中减小字体。 - JustAMartin

在我的Android上的Chrome 86中，它对我不起作用。我已经放置了viewport标签，并尝试在所有易受影响的元素上使用text-size-adjust。-webkit-前缀被认为是无效的，也没有任何效果。明确设置max-height确实可以禁用Chrome自动调整大小，但这与您的答案无关。 - Armen Michaeli

@amn -webkit-text-size-adjust 在苹果平台上使用。 - jegadeesh

Answer 4

看起来有一些人有让它正常工作的方法。

添加一些CSS规则或者为父元素设置宽度和高度。

- soycharliente

---

最大高度的技巧对我没用。而且我也不能给元素固定的高度，所以它对我没有帮助...不管怎样，还是谢谢。 - Ron

添加max-height并不会给它一个固定的高度，它只是阻止元素达到大于1000000像素的高度。 - Kinlan

Answer 5

马特和昆丹·桑克是目前最好的解决方案。

.element { max-height: 999999px; }

如果问题仍然存在，请尝试在标签内添加以下内容：

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

请记住，这可能会对图像标签或图像背景大小标签造成问题。

- phpsmart.info

Answer 6

这是一个Webkit官方的bug。你可以在Webkit官方网站上进行检查。

你需要只针对特定元素进行目标定位，而不是针对不需要的元素。即：

p {
   max-height: 999999px;
}

- Kundan Sankhe

---

你所提到的“bug”是Chrome开发人员认为在没有字体增强的情况下文本大小不可读。解决这个问题的方法是使用字体增强，正如你可以从问题中阅读到的那样。 - Armen Michaeli

Answer 7

Android Chrome仅对具有动态高度的元素应用字体增强。一旦您指定了height，max-height或line-height，就不会应用字体增强。但是您应该注意内联元素（如span）其高度或最大高度属性无效的情况。在这种情况下，您可以将显示设置为inline-block，如下面的代码或其他可以设置高度的框类型。
span { font-size:12px; line-height:12px; display:inline-block; }

- Bayley Gass

---

Chrome在使用“line-height”元素时，也会应用字体增强，当它没有设置为绝对尺寸（使用“px”，“mm”，“in”，“pc”，“pt”等单位），而是相对尺寸（明确使用“％”或“em”，或无单位以继承子元素中的行高，这些子元素改变了字体大小但未设置新的行高）。 - verdy_p

Answer 8

对于桌面端，以及可能的移动端（尚未测试移动端），您可以通过在HTML元素上设置基本字体大小来禁用Chrome和FF中的字体大小增强。例如：

html {
  font-size: 16px;
}

这比max-height更不会出现hacky的问题。但是，从可访问性的角度来看，仍然有点不太好。

如果必须的话，您也可以使用jQuery来设置它。

- Mark Caron

---

对我没用。可能是一个过时的答案，适用于旧版本的Chrome。 - Armen Michaeli