表情符号 - CSS背景或内联图像？

Question

我正在考虑将评论中的:)，:P替换为表情符号（表情符号）。使用正则表达式。你觉得替换成一个类的跨度元素是个好主意吗？然后我将笑脸图像应用到那个班级？

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

CSS通常被视为不是内容的一部分，但这些图像表情符号是...... （如果禁用css，文本可能会改变其含义，因为缺少表情符号）

Answer 1

表情符号是使用字符呈现的视觉信息，因此如果您用某物替换“:-)”，则自然候选者是特殊字符，例如“☺”（U + 263A WHITE SMILING FACE）和{{ 1}}标记为img。

使用带背景图片的元素有几个缺点，包括缺少<img alt=":-)" src="smiley.png">属性的任何对应物以及在打印时抑制背景图像的常见浏览器行为。

以编程方式更改任何表情符号的内容有点风险，例如一个图像。你无法确定每个“:-)”是一个表情符号。各种奇数字符组合可能出现在特殊字段中。此外，如果用户正在写作，例如关于表情符号，部分内容可能会在替换中丢失或失真。

Answer 2

如果你有很多表情，你最好使用css sprite技巧，因为这意味着浏览器只需下载一个图像文件而不是下载十几个较小的那个

这将减少开销和更好的缓存

Answer 3

以纯文本形式使用表情符号，并使用CSS显示图片。

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

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

然后，对于没有看到图像或禁用CSS的人来说，文本是有意义的（他们会看到文字笑脸）。

Answer 4

使用CSS显示图片。最佳做法是从用户输入中删除不需要的字符，不可见字符和HTML标记，以避免HTML代码注入和跨站点脚本编写。