如何通过 HTML 在 Windows 10 上查看国家/地区标志？答案

【问题标题】：How do I view country flags on Windows 10 through HTML?如何通过 HTML 在 Windows 10 上查看国家/地区标志？
【发布时间】：2020-07-04 13:27:54
【问题描述】：

是否可以通过 HTML 在 Windows 10 上显示国旗表情符号？

<!DOCTYPE html>
  <html>
    <style>
      body {
        font-size: 40px;
      }
    </style>
    <body>
      <p>9983 will display &#9983;</p>
      <p>How to display American or Japanese flags?</p>
      <p>???????? is just letters on Windows 10 &#128531;</p>
    </body>
  </html>

我在https://mdbootstrap.com/docs/jquery/content/flag/找到了这个

我在https://www.w3schools.com/charsets/ref_emoji.asp 上没有看到旗帜表情符号

我可以在https://www.emojicopy.com/ 上查看它们，但不能使用。

我在上面找到了一个 CSS 标志 https://github.com/pixelastic/css-flags/blob/master/app/styles/_flags/usa.scss

我仍在学习使用 stackOverflow，而且我是编码新手。这是我第四次尝试这个问题。

【问题讨论】：

欢迎来到 Stackoverflow！您基本上再次发布了相同的问题，该问题已关闭。最好编辑上一个问题并添加一些相关细节，多次发布问题不会给你答案。请阅读How to create a Minimal, Reproducible Example 和How do I ask a good question? 并相应地编辑您的问题。
标志在哪里没有渲染，在代码中还是在浏览器中？
试试这个：emojipedia.org/flag-barbados
看起来你的代码中的两个矩形框代表了标志。你不应该在 HTML 中使用这些表情符号，因为它们在所有设备上看起来都不一样。相反，您应该创建该表情符号的图像（最好是 SVG），然后使用 img 标签将其嵌入 HTML，然后使其高度等于 1em。

标签： html windows emoji flags country

【解决方案1】：

由于政治原因，标志似乎在 Windows 上不起作用，请参阅 https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05?page=1

这个帖子似乎找到了解决方法 Flag Emojis not rendering

【讨论】：

我在回答中所说的是正确的：flag emoji 确实可以在 Windows 10 上使用，但需要与 Segoe UI Emoji 字体不同的字体。
@PeterConstable Windows 上是否有一些支持表情符号的默认字体？
在 Windows 上，Segoe UI Emoji 字体用于支持表情符号。它支持超过 50000 个家庭组合（比其他平台更多），但不支持标志。但如果你有不同的支持标志的表情符号字体，则可以显示标志表情符号。

【解决方案2】：

Windows 包含 Segoe UI 表情符号字体，但不支持标志。要在 Windows 10 上查看标志表情符号，您必须提供支持标志的自定义表情符号字体。

有一个 ISO 标准，其中包含两个字母的国家代码，例如日本的“JP”。在 Unicode 中，表情符号标志被编码为一对特殊字符，对应于“A”到“Z”，但与 A-Z 不同。您可以在https://unicode.org/emoji/charts/full-emoji-list.html#country-flag 看到不同的序列。例如，对于日本国旗，使用序列 U+1F1EF U+1F1F5。要在网页中对它们进行编码，您可以使用字符实体&#x1f1ef;&#x1f1f5;：“??”。如果浏览器/主机操作系统支持显示 emoji 标志，这就是您将看到的。如果没有，您可能会看到类似“JP”的内容。

【讨论】：

【解决方案3】：

使用Noto Color Emoji font。

首先，使用unicode-range 属性编写@font-face 规则。然后将字体添加到字体堆栈的顶部：

(Source)

@font-face {
  font-family: NotoColorEmojiLimited;
  unicode-range: U+1F1E6-1F1FF;
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

div {
  font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont, 
  'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 
  'Segoe UI Emoji', 'Segoe UI Symbol';
}

<div>
  <p>
    ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??
  </p>
  <p>
    Noto Color Emoji abcdefghijklmnopqrstuvwxyz0123456789
  </p>
</div>

【讨论】：