调整CSS以制作OSX Chrome Print Emoji

Question

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

这是2个表情符号: 当我尝试打印此页面时,表情符号空间被保留,但它是白色的.在Safari打印中,表情符号工作正常.

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

Answer 1

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

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

您可以使用像SVG这样的矢量图像来获得与字体相同的缩放功能：

• TUMBS UP SIGN Unicode 字符的 SVG
• SVG 表示区域指示符符号字母Unicode 字符
• SVG 表示区域指示符符号字母 T Unicode 字符
• SVG 为    竖起大拇指标志
• SVG 为    奥地利国旗

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

 

只需做一点工作，您就可以使用已知图像字典自动将用户生成的表情符号转换为图像，并使用 FileFormat.Info 中的 SVG 或表情符号 PNG 来补充缺失的部分。他们有一个表情符号列表，你可以抓取（假设这不违反他们的服务条款）PNG 以及每个字符（表情符号或其他）的 SVG，可以从字符代码中获取。例如，这里是 U+1f44d ( )：

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

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

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

也就是说，最好是现成的而不是从头开始创建。 @pandawan 的回答建议twemoji看起来很有希望。

 

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