emoji表情显示为方块，electron无法显示emoji的bug修复

近期开发了一款electron应用，测试过程中发现，在少数设备上（win7），页面上的emoji无法正常显示（显示为方块）

原因分析

某些表情符号使用了特定的Unicode字符编码，并且需要特定的字体来正确显示。如果设备或应用程序中缺少相应的字体文件，那么这些表情符号就会显示为方块。

electron在某种程度上来说就是一个webview，所以网页中出现这种问题，也是一样的原因。我们可以尝试为其补充支持的字体文件来修复这种问题。

解决方案

方法1

win7系统更新补丁，更新字体补丁之后可以正常显示。这个方式属于系统级别、无须改动项目代码，适合已经发布的项目，针对个别低版本系统用户修复

方法2

项目中引入emoji字体文件，很多种不同的字体，显示的emoji不一样，常见的有apple color emoji

这里推荐使用google的noto-emoji，字体文件大概在10Mb以内，NotoColorEmoji.ttf下载地址（没办法，apple color emoji在几十上百Mb）

如果对大小有要求，可以使用单色emoji，会小一些，但是显示效果就不太好了，如Adobe 的 EmojiOne Color ，尝试转woff或者其他格式，但是失败了不知道为什么

像平常一样引用web字体，然后为需要显示emoji的元素指定字体即可，或者可以设置给body

注意：font-family可以设置多个字体，不同顺序会有不同的显示效果，可以避免数字也变成emoji

一些做法

部分代码如下：

fix-emoji.css

@font-face {
   font-family: "NotomojiColor";
   src: url("../font/NotoColorEmoji.ttf") format("truetype");
   /* src: url改成相对你项目的地址 */
   font-display: swap;
}

这里推荐区分windows上才引入字体，思路是创建一个css补丁，判断到在windows上的适合，加载这个css 部分代码如下 index.html里

  // 修复win7上emoji显示异常
  if (navigator.platform.startsWith("Win")) {
    var emojiFontLink = document.createElement("link");
    emojiFontLink.rel = "stylesheet";
    emojiFontLink.type = "text/css";
    emojiFontLink.href = "./css/fix-emoji.css";
    document.getElementsByTagName("head")[0].appendChild(emojiFontLink)
  }
  // emojiFontLink.href也改成相对你项目的地址