表情符号- CSS背景还是内联图片？

Question

我在考虑用笑脸(表情符号)代替评论中的:)，:P这样的用户文字。使用正则表达式。您认为将span元素替换为一个类是个好主意吗？然后我将笑脸图像应用于那个类？

或者我应该直接用<img>标签替换这个文本？

CSS通常被视为不是内容的一部分，但这些图像笑脸是...(如果禁用css，文本可能会更改其含义，因为缺少表情图标)

Answer 1

表情符号是使用字符表示的视觉信息，因此，如果您将“：-)”替换为其他字符，那么自然的候选字符是特殊字符，如“U+263A img SMILING”和<img alt=":-)" src="smiley.png">之类的☺标签。

使用带有背景图像的元素有几个缺点，包括缺少任何与alt属性对应的元素，以及在打印时隐藏背景图像的常见浏览器行为。

以编程方式将任何表情符号更改为图像都有一定的风险。你不能确定每个“：-)”都是一个表情符号。在特殊字段中可能会出现各种奇怪的字符组合。此外，如果用户正在写关于表情符号的内容，则部分内容可能会在替换过程中丢失或扭曲。

Answer 2

如果你有很多笑脸，最好使用css精灵技巧，因为这意味着浏览器只需下载一个图像文件，而不是下载一打较小的图像文件

这将导致更少的开销和更好的缓存

Answer 3

将表情符号设置为纯文本，并使用CSS显示图片。

您可以使用<span>或其他元素来实现这一点。

例如，代码中的:)应该是<span class="normalsmiley">:)</span>。

然后，对于看不到图像或禁用CSS的人来说，文本将是有意义的(他们将看到一个文本笑脸)。