Prety F2E

We tell browsers how to do better

0%

让 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浏览器),最后是CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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';
}
}