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

Question

我正在考虑用表情符号（表情符号）替换评论中的用户文本:)，例如。:P使用正则表达式。您认为替换为带有类的 span 元素是个好主意吗？然后我将笑脸图像应用到那个班级？

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

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

Answer 1

表情符号是使用字符呈现的视觉信息，因此如果您将“:-)”替换为某些内容，则自然候选者是特殊字符，例如“☺”（U+263A WHITE SMILING FACE）和img类似的标签<img alt=":-)" src="smiley.png">。

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

以编程方式将任何表情符号更改为例如图像有点冒险。您不能确定每个“:-)”都是一个表情符号。特殊领域可能会出现各种奇怪的字符组合。此外，如果用户正在撰写例如关于表情符号的内容，则部分内容可能会在替换时丢失或失真。

Answer 2

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

Answer 3

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

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

Answer 4

以纯文本形式显示笑脸，并使用 CSS 显示图片。

您可以通过使用一个<span>或另一个元素来实现这一点。

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

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