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也改成相对你项目的地址