美文网首页
electron无法显示emoji,修复win7上表情异常,we

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

作者: 用IE的都是狗 | 来源:发表于2022-12-29 18:50 被阅读0次

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

    相关文章

      网友评论

          本文标题:electron无法显示emoji,修复win7上表情异常,we

          本文链接:https://www.haomeiwen.com/subject/yvitcdtx.html