html - 字体大小不影响值 0.1 到 0.4 em

Question

我有控制权，可以帮助用户自己更改字体大小。但是当大小值从 0.1 到 0.4 em 时，html 上的字体大小不会影响。我正在使用 Google Chrome 版本 27.0.1453.110 m

HTML

<span class="text_menu_link">Home</span>

CSS

span.text_menu_link {font-size: 0.3em;}

Answer 1

em是相对字体大小。如果将示例放在另一个设置了较大字体大小的 div 中，您会注意到确实在 0.1 - 0.4em 范围内看到了变化，因为它评估为合理的实际字体大小（高于浏览器的最小值） .

HTML

<div class=outer>
<span class="text_menu_link">Home</span>
</div>

CSS

.outer {font-size: 30pt;}
span.text_menu_link {font-size: 0.3em;}

请参阅此示例

编辑

font-size身体层面的示例设置

Answer 2

从评论中通过 jsfiddle 提供的示例代码中，问题似乎是“为什么某些字体大小设置具有相同的效果”而不是没有效果：

<div>
<span style="font-size: 0.1em;">Home</span>
<span style="font-size: 0.2em;">Home</span>
<span style="font-size: 0.3em;">Home</span>
<span style="font-size: 0.4em;">Home</span>
<span style="font-size: 0.5em;">Home</span>
</div>

通过将它们与普通“主页”的显示进行比较，您可以看到这些效果。在许多情况下，它们只是具有相同的效果，原因是浏览器中存在最小字体大小设置。

典型的基本字体大小为 16 像素（12 磅），该设置font-size: 0.5em要求大小为 8 像素。这大于 11 像素的典型最小字体大小，因此将使用 11 像素。而对于示例中的其他设置，结果当然是一样的。

如果您在 Chrome 设置中将最小字体大小更改为 6 像素（它似乎允许的最小，并且对于几乎任何目的来说都太小了），您会注意到最后一个“主页”变得比其他“主页”更大 - 因为它现在请求的大小为 8 像素，而0.4em请求为 6.4 像素，因此由于限制，最终结果与将用于其他文本的 6 像素几乎没有区别。此外，Chrome 似乎实际上在这里将 6.4 舍入到了 6（从它在开发者工具中显示的内容来看）。

如果你添加，比如说，

div { font-size: 120px }

您会看到这些单词都有不同的字体大小。

最后，如果将diveg的字体大小设置为与浏览器的最小字体大小相同，那么font-size设置确实没有效果。