调整CSS以制作OSX Chrome Print Emoji

Question

我无法让OSX上的Chrome打印表情符号，有没有css技巧或其他？

这是2个表情符号： 当我尝试打印此页面时，表情符号空间被保留，但它是白色的。在Safari打印中，表情符号的效果很好。

以下是Chrome上此页面的打印预览的屏幕截图：

Answer 1

在问题评论中经过大量对话后，您似乎遇到了字体渲染问题（可能是Chrome错误）。我不认为这可以通过HTML，CSS或Javascript的任何组合来解决。

但是，可以选择不使用字体来解决问题。

您可以使用vector image之类SVG来获得与字体相同的缩放功能：

• SVG for THUMBS UP SIGN Unicode字符
• SVG for REGIONAL INDICATOR SYMBOL LETTER A Unicode字符
• SVG for REGIONAL INDICATOR SYMBOL LETTER T Unicode字符
• SVG for    Thumbs up sign
• SVG for    Austrian flag

只需将SVG链接为图像，并根据需要在HTML或CSS中指定其尺寸。

通过一些工作，您可以使用已知图像的字典自动将用户生成的表情符号转换为图像，并使用FileFormat.Info中的SVG或表情符号PNG补充未命中。对于PNG，他们有list of emojis你可以抓取（假设它不违反their terms of service）以及每个角色（表情符号或其他）的SVG，它们只能从字符代码中获得。例如，这里是U + 1f44d（）：

http://www.fileformat.info/info/unicode/char/1f44d

它将是页面上唯一的SVG链接，因此您可以在JS中执行此操作：

var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href;

也就是说，拥有这个现成品而不是从零开始创作是非常可取的。 @pandawan's answer建议twemoji看起来很有希望。

也许只是一个仅限CSS的解决方法：我还在其他地方读过你可以通过avoiding bold正确打印这些字符（也许是所有的字体和文本操作？也许只是制作字体大小更大？）。这可能取决于客户端系统上安装的字体。

Answer 2

这是由于rendering difference between Chrome and Safari，我不认为它是一个错误，因为我不相信期望的行为在任何地方被定义（Firefox也有问题，顺便提一下你的emojis）。

如果您希望在所有平台上提供完整而简单的表情符号支持，可以使用twemoji，这是Twitter为此特定需求开发的一个小型库。