Javascript 检测是否支持原生表情符号

Question

我想检测是否支持原生表情符号。
只有当它不存在时，我才会加载表情符号字体以节省带宽并使应用程序看起来更原生。

然而，当我在网上搜索时，我只发现有人使用 userAgent 来检查是否支持 emoji。
例如，下面的代码来自https://github.com/github/g-emoji-element/blob/master/emoji-detection.js ,

export function isEmojiSupported(): boolean {
  const onWindows7 = /\bWindows NT 6.1\b/.test(navigator.userAgent)
  const onWindows8 = /\bWindows NT 6.2\b/.test(navigator.userAgent)
  const onWindows81 = /\bWindows NT 6.3\b/.test(navigator.userAgent)
  const onFreeBSD = /\bFreeBSD\b/.test(navigator.userAgent)
  const onLinux = /\bLinux\b/.test(navigator.userAgent)

  return !(onWindows7 || onWindows8 || onWindows81 || onLinux || onFreeBSD)
}

尽管正则表达式可能并不完美，因为 Windows 7 中的 Firefox 从 http://caniemoji.com/ 开始支持 Emoji。 .

但是，由于不同的浏览器或库可能具有不同的表情符号集，因此某些表情符号可能在一个浏览器中完美呈现，而另一些则呈现得不是很好。

那么除了使用 userAgent 来检查是否支持 Emoji 之外，还有更好的方法吗？

Answer 1

与其尝试检测，我建议加载字体和所有你想要的字形，并在你的 CSS 中使用 font-display: swap。

然后，您的页面仍然可以在加载此额外字体的同时显示。

另请参阅:https://css-tricks.com/font-display-masses/