时间戳

首页 > 解决方案 > 移动浏览器中未显示 Unicode 扑克牌符号

html - 移动浏览器中未显示 Unicode 扑克牌符号

问题描述

我有一个 html 页面，我想在其中使用扑克牌符号。我最小的例子

<html>
<head>
  <meta charset="utf-8" />
</head>

<body>
  &#127137;
</body>
</html>

在我的桌面 PC (Ubuntu 20.04) 上的 Firefox (92.0) 中显示黑桃 A，但在我的移动设备 (Android 7.0) 上的 Firefox (92.1.1) 中显示一个空黑框。这里有什么问题？

/edit：我学习了我的手机的USB调试，并用它来调查更多。移动端 Firefox 使用的字体是 Roboto。令人困惑的是，如果我使用

 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');  
 body { font-family: 'Roboto'; }

在我的台式电脑上也使用这种字体，我仍然得到相同的行为：桌面版本中的正确符号和移动版本中的空框。如此扼杀，似乎相同的字体在移动设备和桌面设备上的行为不同。有任何想法吗？

标签： htmlunicodefontsfrontendroboto

解决方案

问题是移动设备浏览器中的默认字体不支持黑桃 A 的 Unicode 字符。您可以添加 afont-family作为特殊字符的后备字体。我建议阅读更多关于 特殊字符的后备字体

推荐阅读