阴影文本：CSS还是图形？

Question

我有一个内部网页应用，页面顶部有一个图片，目前包含一些带阴影的英文文字。我现在需要为各种语言提供此页面的本地化版本。我的主要选择是：

• 每个支持的语言都有不同的图形，包含本地化文本。
• 使用CSS将本地化文本放在普通图像上，使用complex CSS technique在大多数当前浏览器中获取阴影效果。

还有其他选择吗？这是一个教育环境，我无法控制学生使用的浏览器。

我确实尝试从图形中删除阴影，并将文本移动到HTML中的标题中，但两者都没有吸引力。人们说它看起来像当前页面的廉价仿冒品，这让我感到骄傲。

Answer 1

我个人非常喜欢像这样的视觉效果的CSS技术。最大的好处是您可以将效果处理卸载到客户端，节省带宽和内容创建时间（每个区域设置的自定义文本图像是一个很大的订单！），并使用户更快地下载页面。

避免它的唯一原因是你绝对必须在很旧的（IE5）浏览器上有下拉阴影，旁边没有CSS支持。

编辑：只是想到了一些东西 - 我喜欢这样的一些情况，我需要一个特定的字体或一些确切的文字效果我用PHP来渲染文本，有效果，图像和缓存服务器端。这样您就可以避免内容创建过程并获得更广泛的浏览器支持，以换取带宽和服务器CPU时间。如果权衡可以接受，那就是你的电话。

Answer 2

在请求服务器端为每种语言生成图像，并带有阴影。根据需要缓存它们。

如果你可以使用Image Magick，你可以refer to this tutorial生成文字+阴影......

Answer 3

使用文本维护图像可能会很痛苦 - 即使没有本地化，我也会避免使用。

在选择之前我会尝试两种选择：

• 寻找可生成阴影图像的免费程序，只要检测到新文本可用于标题，您就可以使用该程序
• 使用可在文本下方重复显示为背景图像的阴影图像

如果那些不起作用，我会尝试使用CSS，但在使用它之前，请在尽可能多的浏览器中进行测试。

Answer 4

嗯，Safari支持用于阴影的专有CSS属性，但它在其他浏览器中不起作用。 CSS3也会有阴影（实际上只有一个用于框，但也许它也可用于文本，例如当框具有透明背景时）。

但是看到大多数浏览器到目前为止还没有100％的CSS2支持，我想你需要选择其中一个选项。当然，有一个不那么复杂的CSS技巧来获得投影：

Drop Shadows for Everyone

但它们看起来并不像真正的阴影那么好，因为它们并不模糊。此外，您需要在HTML中使用两次文本才能使用它们。