2020-11-26 技术

让 Web 端支持 Emoji 颜文字表情

Emoji 表情符号在 OS X 系统和 iOS、Android、Windows Phone 等各个手机中已经默认支持，所以在这些设备的 Web 端显示没有问题，可直接使用

但是在 Windows 系统中，Web 端显示 Emoji 或多或少都有一些问题

首先，Windows 8 和 Windows Server 2012 默认也是支持 Emoji 的，但是只有在 IE 浏览器中才会显示。至于 Windows 7 和 Windows Server 2008 R2 只要是更新了补丁包 KB2729094 的，也可以在IE中直接显示 Emoji。而这些系统的非 IE 浏览器却无法显示

其实，补丁包 KB2729094 对 Emoji 的支持只不过是增加了 Segoe UI 符号字体，只要在 Web 端 CSS 中引入这个字体，便可以让所有浏览器都支持 Emoji

先去有该字体文件的系统中找到字体文件 Segoe UI Emoji（文件名seguiemj.ttf）；然后将 ttf 字体文件转成 eot 格式（针对老的IE浏览器）https://www.kirsle.net/wizards/ttf2eot.cgi，最后是CSS：

@font-face {
    font-family: 'Emoji';
    src: url('../fonts/seguiemj.eot');
    src: url('../fonts/seguiemj.eot?#iefix') format('embedded-opentype'),
         url('../fonts/seguiemj.ttf') format('truetype');
}
body {
    font-family: 'Segoe UI Emoji', 'Emoji', Tahoma, Geneva, 'Simsun';
}
input, button, textatea, select {
    font-family: 'Segoe UI Emoji', 'Emoji', Tahoma, Geneva, 'Simsun';
}
html:root {
    body {
        font-family: Tahoma, Geneva, 'Microsoft Yahei', 'Simsun', 'Segoe UI Emoji', 'Emoji';
    }
    input, button, textarea, select {
        font-family: Tahoma, Geneva, 'Microsoft Yahei', 'Simsun', 'Segoe UI Emoji', 'Emoji';
    }
}