android - 如何防止 Android 设备上的 Chrome(或一般的手机互联网浏览器)用非标准 Unicode 符号替换表情符号？

Question

你好 Stackoverflow——为了让我的问题更清楚，我会详细说明。

我在旋转变换中使用以下符号:☎ 和 ♦ 和 ✔(分别为 ☎ 和 ♦ 和 ✔)。

虽然在我的 Android 设备(智能手机、LG G4)上，它用非文本图片表情符号替换了这些文本符号，这些表情符号不符合我的转换或字体大小样式。

我想强制浏览器使用我在网站上提供的字体中的常规符号(使用带有包含的 .ttf 文件的 @font-face)。在台式机上，我完全可以按预期显示我选择的符号。

非常感谢您的帮助，因为我不想被迫用图像代替我的文字排列。谢谢。

Answer 1

您应该包含一个支持您要使用的字符的网络字体。

要在 CSS 中包含图标字体，请使用以下代码:

@font-face {
    font-family: 'myfont';
    src:url('fonts/myfont.eot?-td2xif');
    src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
        url('fonts/myfont.woff?-td2xif') format('woff'),
        url('fonts/myfont.ttf?-td2xif') format('truetype'),
        url('fonts/myfont.svg?-td2xif#myfont') format('svg');
    // Different URLs are required for optimal browser support
    // Make sure to :
    // 1) replace the URLs with your font's URLs
    // 2) replace `#myfont` with the name of your font
    font-weight: normal; // To avoid the font inherits boldness
    font-style: normal; // To avoid font inherits obliqueness or italic
}

.emoji {
    font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
    speak: none; // To avoid screen readers trying to read the content
    font-style: normal; // To avoid font inherits obliqueness or italic
    font-weight: normal; // To avoid the font inherits boldness
    font-variant: normal; // To avoid the font inherits small-caps
    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
    line-height: 1; // To avoid the font inherits an undesired line-height
    -webkit-font-smoothing: antialiased; // For improved readability on Webkit
    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}

然后您可以像这样包含您的符号:

<span class="icon">&#9742;</span>
<span class="icon">&#9993;</span>

如果您不知道支持您的 Angular 色的网络字体，您可以使用Icomoon App 轻松地自己创建一个。 .另见我的开源 Emoji icon font以支持 650 个符号的图标字体为例，它是我使用 Icomoon App 创建的。

如果您打算使用我的图标字体(或任何其他图标字体)，我建议您在 Icomoon 应用程序中编辑字体以删除除您需要的符号之外的所有符号，因为这会显着减少您的文件大小!

---

更多信息:

• Create webfont with Unicode Supplementary Multilingual Planesymbols