Question

我在标题上有一个下拉菜单，用于显示不同国家/地区的电话号码，我需要在其侧面放一个标志，但是没有标志显示，只有标志的字母表示（例如阿根廷人）标记看起来像这样，但它显示了字母A和字母R的表情符号，因为据我所知，标记表情符号是如何工作的，我如何逃避此操作（在第二个电话号码中显示一个汉堡包只是为了表明表情符号可以确实可以在我的网站上工作）

<select name="Telefonos" id="group">
    <option value="+543515296002">&#x1F1E6;&#x1F1F7; +54351529600
    <option value="+12398105440"> +12398105440
    <option value="+12398105440"> +12398105440
    </select>

这是香港专业教育学院尝试的，无论是使用代码还是应付表情符号都行不通，即使在我编码时它也能显示出来。

这就是实际渲染的东西

Answer 1

Microsoft的表情符号字体Segoe UI表情符号故意不支持任何标志。如果Windows用户的彩色显示对您来说很重要，则您必须提供自己的字体文件。不幸的是，所有通用浏览器均不支持彩色字体格式。 Firefox附带了Twemoji（Twitter的表情符号集），但是例如，在Chrome中使用相同的字体将产生黑白轮廓图。

说实话，如果您的项目可行，那么最好只使用嵌入式图像。另外，您需要妥协并接受大多数Windows用户根本看不到显示任何标志的情况。

Answer 2

取决于您的平台（而不只是浏览器和/或浏览器字体），无论您执行什么操作，标志表情符号都可能不会呈现。要找出答案，请转到https://emojipedia.org/search/?q=emoji+flags，然后在文本“ 标志：吉布提”的左侧查看吉布提的表情符号标志的渲染。

如果看到标志图像，一切都很好，但是如果仅看到 DJ ，则可能不支持表情符号标志。我在iPad，Linux Mint 18.2和Windows 10上访问了该页面，这就是我的发现：

在iPad上呈现的吉布提国旗表情符号。
使用Firefox在Linux Mint 18.2上将Djibouti标志渲染为 DJ 。
使用Firefox在Windows 10上将吉布提标志渲染为 DJ ，尽管自“ Microsoft doesn't support any country flags on Windows起，这是预期的，而是显示了两个字母的国家代码” 。

因此，如果您只想在Apple平台上的浏览器中呈现表情符号标志，那应该没问题，并且如果您想在Windows上的浏览器中呈现表情符号标志，它将改为呈现两个字符的国家/地区代码。我不确定Linux上的情况，因为尽管它在我的环境中对我不起作用，但我找不到任何明确表明它应该或不应该工作的东西。

如果您需要在所有平台上都可以使用Unicode表情符号标志，则可以选择下载免费的表情符号，这些表情实际上只是小的 png 图片。这是一些samples for the Argentinian flag。

更新：

在没有上述真正解决方案的情况下，这是一种替代方法，该方法不使用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 https://stackoverflow.com/a/41189982/2985643 ––>
        <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-">&#x2690; 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在this SO answer中对问题How to add images in select list?的提供相同。

由于此方法仅使用标准HTML和CCS（无Javascript或JQuery），因此它应可在任何平台上使用：

Answer 3

据我所知，没有办法显示这样的标志表情符号。您可以尝试将标志与图片搭配使用，或尝试使用Fontawesome.com（免费）。

Answer 4

取决于两者平台和浏览器

所以目前最好的解决方案是使用图片

从这里下载免费标志：https://flagpedia.net/download

我会推荐使用 webp

标记表情符号未渲染

4 个答案:

取决于两者平台和浏览器