CSS text-shadow适用于不同的字体大小

Question

我的

上有以下CSS

h2 {
    font-family: Arial, Verdana, sans-serif;
    color: #fff;
    text-shadow: 0 6px 0 #E5E5E5
}

问题是，这在某些字体大小上看起来不错，而在其他字体大小看起来非常糟糕。如果字体非常大，则阴影几乎不可察觉，如果字体太小，阴影会使文本无法读取。在我的网页中，此特定元素的字体会动态更改大小。它可以小到10px，大到200px。

出于某种原因，将阴影位置设置为％不起作用，人们希望它将占用font-size属性的％。

所以我在这里问是否有办法让text-shadow适用于仅使用CSS改变大小的字体。我希望找到一个不使用javascript的解决方案。

Answer 1

您可以在em中使用px代替text-shadow，em与字体的实际设置大小相关。

• Examples on w3.org
• Understanding em

Answer 2

see

http://rcljr.com/rcl/tests/TextShadow%20Supreme/index.html

for a text shadow formatter