electron无法显示emoji,修复win7上表情异常,we

2022-12-29  本文已影响0人  用IE的都是狗

electron打包,在新版本windows上emoji显示正常,如果在老版本的win7上,emoji会显示为方块,原因为字体缺失

解决方法2种:

方法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");
   font-display: swap;
}

src: url改成相对你项目的地址

这里推荐区分,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也改成相对你项目的地址

上一篇下一篇

猜你喜欢

热点阅读