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

qv7cva1a 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(124)

我想检测是否支持原生表情符号。
只有当它没有，我会加载表情符号字体，以保存带宽，也使应用程序看起来更原生。
但是，当我在网上搜索时，我只发现有人使用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之外，还有什么更好的方法吗？

JavaScript

来源：https://stackoverflow.com/questions/58479029/javascript-detect-if-native-emoji-is-supported

2条答案

按热度按时间

siv3szwd1#

与其尝试检测，我建议加载所有您想要的字形的字体，并在CSS中使用font-display: swap。
然后，在加载此额外字体的同时，您的页面仍然可以显示。
另请参阅：https://css-tricks.com/font-display-masses/

赞(0）回复(0）举报 2023-02-02

dsekswqp2#

曾经有一种技术可以测量包含两种不同字体文本的元素的宽度，通过查看是否使用了备用字体来查看是否支持该字体。
类似的技术可以通过利用折叠到单个表情上的表情序列来用于表情。
如果浏览器支持表情符号，它将为由2个序列组成的表情符号渲染1个字形。如果不支持，它将渲染2个字形。

var trinidad = String.fromCodePoint(parseInt("1F1F9", 16), parseInt("1F1F9", 16));
var hammerpick = String.fromCodePoint(parseInt("2692", 16));

function getWidth(s) {
  var n = document.body.appendChild(document.createElement("span"));
  n.appendChild(document.createTextNode(s));
  var w = n.offsetWidth;
  n.parentNode.removeChild(n);
  return w;
}

console.log(getWidth(trinidad) === getWidth(hammerpick) ? "supported": "not supported");

赞(0）回复(0）举报 2023-02-02

我来回答

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

2条答案

相关问题

热门标签

最新问答