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;}

请参阅this以获取示例

修改

An example setting font-size at the body level

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>

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

如果典型的基本字体大小为16像素（12点），则设置font-size: 0.5em会要求大小为8像素。这比典型的最小字体大小11像素大，因此将使用11个像素。对于示例中的其他设置，结果当然是相同的。

如果您在Chrome设置中将最小字体大小更改为6像素（它似乎允许的最小字体，并且几乎不会用于任何目的），您会注意到最后一个“Home”变得比其他字体大 - 因为它现在是请求的大小为8个像素，而0.4em请求6.4个像素，所以最终结果很难与由于限制将用于其他文本的6个像素的最终结果区分开来。此外，Chrome在这里似乎实际上是6.4到6（从开发人员工具中显示的内容来看）。

如果你添加，比方说，

div { font-size: 120px }

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

最后，如果您设置div的字体大小，例如与浏览器的最小字体大小相同，font-size设置确实无效。

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

2 个答案: