Unicode扑克牌符号在移动端Firefox浏览器无法显示问题咨询

1. 你用到的黑桃A对应Unicode编码为U+1F0A1，属于较新增的扑克牌类特殊字符，不同版本的Roboto字体对该字符的支持度差异极大：Android 7.0内置的Roboto是多年前的旧版本，未收录该字符的字形；而你从Google Fonts引入的桌面端Roboto是更新后的版本，同时桌面端浏览器触发了字体 fallback 机制——当Roboto没有对应字符时，自动从系统安装的其他支持该字符的字体（比如Ubuntu自带的Noto Color Emoji）中调取字形，所以桌面端可以正常显示。
2. 移动端Android 7.0系统本身没有预装支持该扑克牌字符的兜底字体，Firefox找不到可用字形就会显示空白黑框（俗称“豆腐块”）。

• 方案1：补全字体 fallback 栈
  修改字体声明，在Roboto后追加通用Emoji兜底字体，让移动端可以从兜底字体中调取对应字符，示例代码：

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');  
body { 
  font-family: 'Roboto', 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; 
}

绝大多数主流设备都会预装上面列的Emoji字体，基本可以覆盖95%以上的使用场景。

• 方案2：引入定制Web字体保证一致性
  如果需要全平台完全一致的显示效果，可以使用字体裁剪工具，把你需要用到的扑克牌字符从Noto Color Emoji这类开源字体中单独提取出来，打包为woff2格式的小体积Web字体，通过@font-face规则引入页面，完全不依赖系统内置字体。

• 方案3：用SVG代替Unicode字符
  如果只用到少量扑克牌符号，直接换成内联SVG图标是兼容性最高的方案，完全不受字体环境影响，还可以自由调整颜色、大小等样式，不需要额外引入字体资源。

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