字体大小 <12px 在 Google Chrome 中无效答案

【问题标题】：Font-size <12px doesn't have effect in Google Chrome字体大小 <12px 在 Google Chrome 中无效
【发布时间】：2011-01-18 16:49:52
【问题描述】：

css font-size

我该怎么办？

我的 Google Chrome 浏览器使用默认设置。我的版本是 4.0.249.89。我使用的是 Windows XP。

您可以将以下代码粘贴到您的 Google Chrome 中进行测试：

<html>
<body>
<p style="font-size:6px;">test 6px</p>
<p style="font-size:7px;">test 7px</p>
<p style="font-size:8px;">test 8px</p>
<p style="font-size:9px;">test 9px</p>
<p style="font-size:10px;">test 10px</p>
<p style="font-size:11px;">test 11px</p>
<p style="font-size:12px;">test 12px</p>
<p style="font-size:13px;">test 13px</p>
<p style="font-size:14px;">test 14px</p>
<p style="font-size:15px;">test 15px</p>
<p style="font-size:16px;">test 16px</p>
</body>
</html>

来自不同浏览器的结果：

【问题讨论】：

你有我们可以看的例子吗？它没有理由不工作！
我刚刚添加了一段示例代码。
为我工作没有问题。
我添加了4个浏览器的screencap。
好吧，我添加了我的 chrome 的屏幕截图，你看它有效！

标签： css google-chrome

【解决方案1】：

您可以使用 css 属性缩放 (https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)

通过设置缩放属性等于 0.25
所有元素都将缩小 4 倍，
所以 12px 字体文本会看起来像 3px 字体文本。

.text {
    zoom: 0.25;
    font-size: 24px;
}

text 将看起来像 font-size: 6px; 文本。

但是firefox不支持这个属性。

【讨论】：

【解决方案2】：

<html>

<head>
<style>
    #text {
        transform-origin: top left;
        background: #aed5ff;
    }
</style>
<script>
  window.addEventListener('load', function() {
    var node = document.getElementById('text');
    var fontSize = node.style.fontSize.replace(/[\D]+$/, '');
    if (+fontSize <= 12) {
      node.style.fontSize = '12px';
      node.style.transform = `scale(${fontSize / 12})`
    }
  });
</script>
</head>

<body>
<p id='text' style='font-size:10px'>test 10px</p>
<p style='font-size:12px'>test 12px</p>
</body>
</html>

【讨论】：

【解决方案3】：

Chrome 和 Firefox 现在允许将最小字体大小设置为零。 Chrome 73 对此有下游问题，从那时起，Chrome 更改了此设置的策略和用户界面。我不知道 Firefox 上的历史，也不知道这个设置在 Safari 或其他浏览器上的状态。

【讨论】：

【解决方案4】：

它对我有用。

尝试：

使用网页设计工具检查哪些 CSS 会影响您的元素
同时发布 html 和 css，以便我们了解更多

编辑：最新的 Chrome（稳定版）以这种方式呈现：
_{（来源：kissyour.net）}

【讨论】：

我添加了4个浏览器的screencap。
截取影响它的css的屏幕截图-右键单击test text: 6 - 11px之一并选择“检查元素”或类似的东西（我有本地化的chrome）-它应该是最后一个（如果你知道我在说什么，停止阅读）-然后文档检查器打开，右侧是面板styles-截屏并发布，也许我们会看到。

【解决方案5】：

你可以使用

body {
font-size:125%;
}

设置 0.5em=10px。

【讨论】：

根据其他用户的 cmets 判断，问题似乎是 Billy 机器的本地问题。此外，您的回答并没有解释为什么 Chrome 的字体大小仅在根据他的问题将字体设置为高于 12px 的值时才发生变化。也许尝试详细说明您的答案，并确保测试他的代码以及您的代码。如果你不能复制他的错误，你就不能测试你建议的修复。
欢迎 benzford - 我给你的建议是关注新问题而不是老问题。正如@Frits 所说，您需要真正破解答案，尤其是具有较高接受度的答案。坚持！

【解决方案6】：

-webkit-text-size-adjust 在 Chrome 27 之后不再工作。

尝试使用transform 强制调整字体大小。

font-size:12px;
transform: scale(0.833);/*10/12=0.833, font-size:10px*/

【讨论】：

您的解决方案是我找到的最好的解决方案，但重要的是要理解： 1. 您必须首先指定transform origin 否则文本可能不会在预期的地方开始。 transform-origin: left; 在大多数情况下就足够了。 2. 换行在变换之前计算，导致缩小的多行文本提前中断，并导致放大的多行文本 溢出。 3. 对于单行，从 10px 的字体大小开始，然后缩小是最简单的。这些只是我迄今为止的个人发现。

【解决方案7】：

Safari 也是如此。我想这设置为 9px 出于可访问性的原因。诀窍是不要依赖于让你的字体那么小，这样你就可以在 css 中炸毁它们而不是缩小它们。如果使用 icnmoon 之类的东西创建自己的字体，这一点尤其重要。所以，这里最好减小字体中的字形大小，这样你就可以在你的 CSS 中将它们设置得相当大，并且如果用户“缩小”，你可以避免将它们设置为低于 9px。

有趣的是 font-size: 0 即使在您的浏览器首选项中将最小字体大小设置为 9px 仍然有效。

对于平板电脑、智能手机和其他设备，可以使用以下方法来避免自动调整文本大小：

-webkit-text-size-adjust: 无；

-moz-text-size-adjust: 无，

-webkit-text-size-adjust: 无；

-ms-text-size-adjust: 无；

字体大小调整：无；

这实际上可能会破坏您的网站在这些设备上的可访问性，但据我所知，在这些设备上无法调整您的浏览器文本大小。它们似乎只是根据情况自动调整，这可能有点神秘。这些命令可能会阻止这种情况，但我认为在您的浏览器首选项中设置的默认最小字体可能会覆盖该设置，至少在某些浏览器中是这样。

【讨论】：

【解决方案8】：

Chrome 有一个最小字体大小设置。我的设置为 11px（默认情况下），所以我不得不更改它以查看更小的字体大小。

要更改 Chrome 中的最小字体大小，请转到：设置 > 高级设置 > 网页内容 > 字体大小 > 自定义字体 > 向下滚动到底部，您将看到“最小字体大小”滑块。

【讨论】：

【解决方案9】：

通过以下样式禁用自动调整。

* {
    -webkit-text-size-adjust: none;
}

【讨论】：

我认为这应该被接受为答案。尽管要注意此 CSS 规则可能存在的缺陷：456bereastreet.com/archive/201011/…
该规则在 Chrome 29 版本中消失了。目前尚无令人满意的替代解决方案。虽然可以确保用户的可读性，但这会产生陷阱，例如如果 HTML 字体大小小于 12 像素，则无法使用 rems 调整图像大小。
这不再有效可能是故意的； Chrome 有一个最小字体大小设置，允许用户覆盖太小的字体大小。

【解决方案10】：

Chrome 不允许您将最小尺寸设置为小于 6 磅。并且文本比 Retina 显示器上的文本更清晰很多。

【讨论】：

【解决方案11】：

根据http://www.google.com/support/forum/p/Chrome/thread?tid=389f306a52817110&hl=en Chrome 支持最小字体大小。如果您在文本编辑器中打开"Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences"，您会看到类似以下内容吗？：

   "webkit": {
      "webprefs": {
         "default_fixed_font_size": 11,
         "default_font_size": 12,
         "fixed_font_family": "Bitstream Vera Sans Mono",
         "minimum_font_size": 12,
         "minimum_logical_font_size": 12,
         "sansserif_font_family": "Times New Roman",
         "serif_font_family": "Arial",
         "standard_font_is_serif": false,
         "text_areas_are_resizable": true
      }
   }

关闭 Chrome、更改最小字体大小并重新启动 Chrome 可能会有所帮助。

【讨论】：

查看关于 CSS 修复的“Digi3 Colin”回答：-webkit-text-size-adjust:none;stackoverflow.com/questions/2295095/…

【解决方案12】：

您是否尝试过在字体样式后面添加“！important”子句？这将覆盖其他所有内容。至少那时你会知道在哪里寻找问题。像这样：

<p style="font-size:6px !important;">test 6px</p>

【讨论】：

当他使用样式属性而不是样式规则时，这应该是不必要的。

【解决方案13】：

是否有最小字体大小偏好？它设置为12px吗？是否启用了页面/文本缩放？你有任何改变页面内容的 Chrome 插件吗？

【讨论】：

我也在寻找最小字体，但我找不到。但这并不意味着首选项没有隐藏在某个地方。
我使用的是默认设置，没有任何插件。
@Anonymous 要更改 Chrome 中的最小字体大小，请转到：设置 > 高级设置 > 网页内容 > 字体大小 > 自定义字体，然后向下滚动到底部，您将看到“最小字体大小”滑块。

【解决方案14】：

这不应该是正确的，你可能有一个元素覆盖了你当前的给定属性。

像这样：

body {
  font-size:10px;
}

#content {
  font-size:12px;
}

【讨论】：

【解决方案15】：

它在 Chrome 4.0.249.78 (36714) 中适用于我，您可以查看缓存副本吗？....尝试清空您的页面缓存（我发现 chrome 非常喜欢它的缓存）

【讨论】：

不是缓存问题。我正在使用 Windows XP。问题是否只发生在某些操作系统中？
我可以正常查看您发布的 html 代码，并且我在 Windows XP Pro 上使用 Chrome（诚然是稍旧的版本和支持扩展的 beta 版本），缓存是唯一的如果您使用与粘贴在 OP 中相同的基本 html，我能想到的事情。当您使用“检查元素”菜单选项时会发生什么，它是否显示为具有较小的字体大小？...或者它看起来是否以某种方式被覆盖？
在隐身窗口中查看您的 html 文件怎么样？...对不起，但我仍然坚持将其作为文件的缓存副本（我花了很长时间来更改我的 Stack Overflow 头像和由于其过度缓存而使其显示在 chrome 中）...尽管它会在隐身窗口中正确显示（因为它绕过了缓存）

【解决方案16】：

如果将

标签设为标签会怎样？

你有没有可能在某处定义了你的

标签？

【讨论】：

示例代码足以测试。只需将代码粘贴到您的 Chrome 中即可查看。