Javascript检测是否支持本机表情符号

Question

我想检测是否支持本地表情符号。只有在不这样做的情况下，我才加载emoji字体来节省带宽，并使应用程序看起来更原生。

但是，当我通过Internet搜索时，我只发现有人使用userAgent检查是否支持表情符号。例如，下面的代码来自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来检查是否支持表情符号之外，还有没有更好的方法？

Answer 1

而不是尝试检测，我建议将字体与所需的所有字形一起加载，并在CSS中使用font-display: swap。

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

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