有办法解决 Safari 的最小字体大小吗？

Question

JSBIN：https://jsbin.com/subipamero/edit?html,css,输出

HTML：

<div>This is 20px text</div>
<div class="shrunk">This should appear as 4px size text (20px * .2)</div> 

CSS：

div {
  font-size: 20px;
  margin: 20px;
}

div.shrunk {
  zoom: .2;
}

JSBIN 示例呈现两个 div。文本设置为 20px。然而，第二个 div 上设置了

zoom: .2

。

如果您在 Safari 和 Chrome 中并排打开这些内容，您会发现 Safari 中的缩放文本更大。如果您使用 Safari 中的缩放设置，您会发现有一个充当最小字体大小设置的东西，您根本无法将文本缩小得更小。

有人知道为什么 Safari 会这样做吗？有没有办法克服这个问题？

我应该注意，我没有将 Safari 首选项设置为“从不渲染小于 x 大小的类型”。

问题是我正在设计一个信息亭，它会被卡在特定的长宽比上。但所使用的浏览器（全屏）的大小可能会有所不同（目前未知变量）。

所以我只是使用一点 JS 来缩放内容以适应任何视口大小。

在 Chrome 中，这意味着无论我将浏览器设置为什么大小，屏幕上的所有内容都会作为一个整体进行缩放，并且不会出现任何中断（除了它太小而无法阅读/查看）。

但是在 Safari 中，由于这个奇怪的字体问题，当你缩小内容时，它很快就会崩溃。

我猜 Safari 就是这样，我可能可以通过一些更周到的设计/布局更改来解决这个问题。但我很好奇 Safari 在这里做什么，如果它是已知的事情的话。

更新：有人指出我这个关于使用

-webkit-text-size-adjust: 100%

的答案。这可能会“修复”移动 Safari 中的问题，但在桌面上不起作用。

Answer 1

是的，Safari 似乎有一个下限，可以防止文本在值小于

zoom

时受到

0.5

的影响。我们可以从缩放文本的渲染结果中看到这一点

1

~

0.1

:

<p style="zoom:1.0">text at zoom:1.0</p>
<p style="zoom:0.9">text at zoom:0.9</p>
<p style="zoom:0.8">text at zoom:0.8</p>
<p style="zoom:0.7">text at zoom:0.7</p>
<p style="zoom:0.6">text at zoom:0.6</p>
<p style="zoom:0.5">text at zoom:0.5</p>
<p style="zoom:0.4">text at zoom:0.4</p>
<p style="zoom:0.3">text at zoom:0.3</p>
<p style="zoom:0.2">text at zoom:0.2</p>
<p style="zoom:0.1">text at zoom:0.1</p>

以下是该文本在三个 Mac 桌面浏览器中的呈现方式：

铬	野生动物园	火狐

几乎可以肯定，苹果选择这样做是出于可访问性的原因。当设计师假设所有观众的视力都和他们自己一样好时，文本太小而难以阅读是一个经常出现的问题。苹果非常重视可访问性，所以看到这个限制我并不感到惊讶。我并不是说我同意设置硬性限制，因为这对于某些 CSS 动画来说可能是一个问题，防止出现“淡出”类型的缩小效果，仅举一个例子。

如何解决这个问题？

我能想到几个选项。

首先，必须问一个问题：为什么您希望设计中的文本太小而难以阅读？

我能想到几个有效的用例：

---

用例 1：类似图像的文本用法

您的设计包含其他设计的缩略图 - 例如，您有一个宣传书籍的广告横幅。这本书的封面位于横幅上。这本书的封面上有一些文字太小而无法阅读，但我们仍然了解其要点，所以没关系。在这种情况下，请将书籍封面转换为图像（如果尚未转换为图像）。

在某些情况下，将文本转换为 SVG 或其他图像格式是可以的。对于文本来说，矢量格式通常优于光栅格式。如果您的文本看起来那么小，那么它可能无法像普通文本一样发挥作用。考虑将其视为图像。

---

用例 2：带有动画过渡的文本

文本

zoom

属性将被动画化（如上所述）。在这种情况下，请考虑对其他 CSS 属性进行动画处理，例如

transform scale() translate();

请注意，

scale()

具有不幸的副作用，即相对于其transform-origin偏移元素。这是没有办法的——这就是缩放的作用。而

translate()

往往需要与

scale()

配合使用来抵消定位变化。

---

我暂时保留这个答案。但如果你能描述这个小文本的目的和功能，以及为什么你相信它不会给你的听众带来问题，我可能会有更多的想法。也许有更好的方法来完成您正在尝试做的事情。