如何确保字体及表情符号在不同设备浏览器中的一致显示

问题原因 #

你打包内嵌的Roboto、Helvetica等字体本身不包含Emoji字符的字形定义，Chrome在Windows环境下会自动 fallback 到系统自带的Segoe UI Emoji字体渲染表情，而树莓派的Luakit环境要么没有预装兼容的Emoji字体，要么字体 fallback 规则没有匹配到可用的Emoji字体，所以表情会显示为空白。你之前打包的字体都是常规文本字体，本身就不覆盖Emoji字符，自然没法完成渲染。

解决方案 #

方案1：内嵌开源Emoji字体（全平台兼容，最推荐） #

你可以选择开源的Noto Color Emoji字体嵌入到项目中，适配所有环境：

1. 将裁剪后的Noto Color Emoji字体文件放到dist/spa/fonts目录下，推荐使用字体子集化工具仅保留你项目用到的Emoji字符，大幅减小字体体积。
2. 在全局CSS中添加字体引入规则，并补充到字体栈末尾：

/* 引入Emoji字体 */
@font-face {
  font-family: "Noto Color Emoji";
  src: url("./fonts/NotoColorEmoji.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* 更新全局字体配置，把Emoji字体加到最后一位 */
body {
  font-family: "Roboto", "-apple-system", "Helvetica Neue", Helvetica, Arial, sans-serif, "Noto Color Emoji";
}

方案2：Emoji转图片使用 #

如果用到的Emoji数量很少，可以直接把需要的Emoji导出为SVG或PNG图片，像普通静态资源一样引入页面，这种方式不需要修改字体配置，所有环境都能正常显示，还可以自定义尺寸、颜色等样式。

方案3：单独修复树莓派设备 #

如果只需要适配当前这台树莓派设备，直接在系统中安装Emoji字体即可，执行命令：

sudo apt install fonts-noto-color-emoji

安装完成后重启Luakit浏览器，表情就能正常渲染。这个方案仅对当前设备生效，其他未安装字体的设备仍会存在显示问题。

内容的提问来源于stack exchange，提问作者WoJ