字体大小不影响值 0.1 到 0.4 em答案

【问题标题】：Font size does not affect value 0.1 to 0.4 em字体大小不影响值 0.1 到 0.4 em
【发布时间】：2013-06-03 07:23:57
【问题描述】：

我可以控制帮助用户自己更改字体大小。但是当大小值从 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;}

【问题讨论】：

每个浏览器中都有一个minimum font size。如果你想覆盖它，你可以看看this。
想详细说明您正在测试的浏览器吗？在 OSX10.8 上的 safari 6.0 中运行良好，请参阅：jsfiddle.net/JcrXw 测试代码
@Antony，最小字体大小设置不妨碍设置的效果；它只是限制了它的效果，这样你就不会低于设定的限制。
不可重现。您的意思是说字体大小是受font-size 设置影响，但大小减小比您预期的要小吗？请具体说明：您的基本字体大小设置是什么，您设置font-size: 0.3em 的元素中的字体大小是多少，如果将值更改为0.7em 会有什么影响？
@Jukka：这里是源代码jsfiddle.net/dQZcF。每个项目都有不同的字体大小，但除了最后一个项目外，它们看起来都一样

标签： html css

【解决方案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;}

请参阅this 了解示例

编辑

An example setting font-size at the body level

【讨论】：

您可能还提到了this 中的小提琴链接，它看起来不错，并且不会过多地拉伸您的代码。
我不同意哪个看起来更好......但这并不重要。我敢肯定，这是在元数据上争论不休的区别。
@jcsanyi：感谢您的回答。有没有办法让它在没有包含它的 div 的情况下工作？因为我只在 em 中为 .outer 设置 font-size 或不为我的情况使用它。
我建议不要将em 用于字体大小，除非您已为外部容器定义了准确的字体大小。 em 就像百分比...因此，如果您没有指定要占百分比的确切字体大小，则您的网站将基于用户浏览器默认设置的任何内容。尝试改用pt。
与上面的@jcsanyi 评论有关，您始终可以在body 或html 标签上设置基本字体大小。

【解决方案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 }

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

最后，如果您设置div 的字体大小，例如到浏览器的最小字体大小一样，那么font-size的设置确实没有效果。

【讨论】：