标记表情符号未渲染
leo*_*s56 12 html unicode utf-8
我在标题上有一个下拉菜单，用于显示不同国家/地区的电话号码，并且需要在其侧面放置一个标志，但是没有标志显示，只有标志的字母表示（例如，阿根廷标志看起来像这但它显示了字母A和字母R的表情符号，因为据我所知，标志表情符号是如何工作的，我该如何逃避此攻击（在第二个电话号码中显示一个汉堡包只是为了表明表情符号确实可以在我的网站）
<select name="Telefonos" id="group">
<option value="+543515296002">🇦🇷 +54351529600
<option value="+12398105440"> +12398105440
<option value="+12398105440"> +12398105440
</select>
香港专业教育学院尝试过的，无论是使用代码还是应付表情符号都行不通，即使在我编码时它也能显示出来。
这就是实际呈现的
ppt*_*ppt 14
正如其他几个人提到的，某些平台（例如 Windows）不支持国家/地区标志（请参阅https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042 -763ccf4b6c05?page=1进行更长时间的讨论，了解为什么会出现这种情况）。
我最终使用了一个脚本来用 png 替换我的表情符号。我认为这可能对其他人有帮助，所以就在这里
HTML 版本：
<html>
<body>
<h1> </h1>
<p>Lets test more emoji replacement .</p>
</body>
<script>
const flagemojiToPNG = (flag) => {
var countryCode = Array.from(flag, (codeUnit) => codeUnit.codePointAt()).map(char => String.fromCharCode(char-127397).toLowerCase()).join('')
return "<img src='https://flagcdn.com/24x18/" + countryCode + ".png'>"
}
var reg = new RegExp('(?:\ud83c[\udde6-\uddff]){2}', 'g');
document.body.innerHTML = document.body.innerHTML.replaceAll(reg, flagemojiToPNG);
</script>
</html>
React 版本（用于替换单个标志）：
const flagemojiToPNG = (flag) => {
var countryCode = Array.from(flag, (codeUnit) => codeUnit.codePointAt()).map(char => String.fromCharCode(char-127397).toLowerCase()).join('')
return (<img src={`https://flagcdn.com/24x18/${countryCode}.png`} alt='flag' />)
}
Cha*_*uff 11
Microsoft的emoji字体Segoe UI Emoji故意不支持任何标志。如果Windows用户的彩色显示对您很重要，则必须提供自己的字体文件。不幸的是，所有通用浏览器均不支持彩色字体格式。Firefox附带了Twemoji（Twitter的表情符号集），但是例如，在Chrome中使用相同的字体将产生黑白轮廓图。
老实说，如果您的项目可行，那么最好只使用嵌入式图像。另外，您需要妥协并接受大多数Windows用户根本看不到显示的任何标志的信息。
取决于您的平台（而不只是浏览器和/或浏览器字体），无论您做什么，标志表情符号都可能无法呈现。要找出答案，请访问https://emojipedia.org/search/?q=emoji+flags并查看文本“ Flag：Djibouti ” 左侧的吉布提表情符号标志的渲染。
如果看到标志的图像，一切都很好，但是如果仅看到DJ，则可能不支持表情符号标志。我在iPad，Linux Mint 18.2和Windows 10上访问了该页面，这是我发现的内容：
- 在iPad上呈现的吉布提国旗表情符号。
- 使用Firefox在Linux Mint 18.2上将Djibouti标志渲染为DJ。
- Djibouti标志在Windows 10上使用Firefox 渲染为DJ，但这是可以预期的，因为“ Microsoft在Windows上不支持任何国家标志，而是显示两个字母的国家代码”。
因此，如果您只想在Apple平台上的浏览器中呈现表情符号标志，那应该没问题，并且如果您想在Windows上的浏览器中呈现表情符号标志，它将呈现两个字符的国家代码。我不确定Linux上的情况，因为尽管它在我的环境中对我不起作用，但我找不到任何明确表明它应该或不应该起作用的东西。
如果您需要在所有平台上都可以使用Unicode表情符号标志，则可以选择下载免费的表情符号，而这些表情实际上只是小png图像。这是阿根廷国旗的一些样品。
更新：
在没有上述真正解决方案的情况下，这是一种替代方法，该方法不使用Unicode表情符号，而是使用下载的.png图像：
<!DOCTYPE html>
<html>
<head>
<title>Flag demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!–– Credit to Alvaro Montoro for this approach - see /sf/answers/2883298771/ ––>
<link rel="StyleSheet" href="css/flagdemo.css">
</head>
<body>
<h1>Flag demo</h1>
<div class="select-sim" id="select-color">
<div class="options">
<div class="option">
<input type="radio" name="flag" value="" id="flag-" checked />
<label for="flag-">⚐ Pick a country</label>
</div>
<div class="option">
<input type="radio" name="flag" value="Argentina" id="flag-argentina" />
<label for="flag-argentina"><img src="img/argentina-flag-round-icon-16.png" alt="" /> Argentina</label>
</div>
<div class="option">
<input type="radio" name="flag" value="Brazil" id="flag-brazil" />
<label for="flag-brazil"><img src="img/brazil-flag-round-icon-16.png" alt="" /> Brazil</label>
</div>
<div class="option">
<input type="radio" name="flag" value="Chile" id="flag-chile" />
<label for="flag-chile"><img src="img/chile-flag-round-icon-16.png" alt="" /> Chile</label>
</div>
</div>
</div>
</body>
</html>
.css文件（flagdemo.css）的内容与Alvaro Montoro在对问题“ 如何在选择列表中添加图像”的答复中提供的内容相同。。
由于此方法仅使用标准HTML和CCS（无Javascript或JQuery），因此它应可在任何平台上使用：
这个问题的一个很好的解决方案是使用像这样的polyfill： https: //github.com/talkjs/country-flag-emoji-polyfill
您只需在使用旗帜表情符号的每个地方添加字体即可：
body {
font-family: "Twemoji Country Flags", "Helvetica", "Comic Sans", serif;
}
还有一个Chrome 扩展程序使用这个 polyfill 来解决这个问题。查看他们的源代码，他们只是将字体添加到每个包含标志表情符号的 HTML 元素中。似乎是比使用 PNG 更好的解决方案。