Windows上Chrome无法正常显示U+2661的爱心符号♡的解决

经过一友人提醒发现,在Windows下的Chrome上的爱心符号显示会出现问题,其实我们如果用Windows一般是不会注意的,因为没人告诉我们这个符号原来不是这个样子…… 我们先看一下在Windows下的Chrome上U+2661的爱心符号♡显示的样子吧 (字体为arial): 5b-6f-windows 看到2661处,这里的爱心符号就像Chrome右上角的菜单的按钮图标,真是符合Chrome啊,而在IE中却没有这样的问题。这一定是Windows字体渲染的错(笑)! 再来看看Mac OS X下的样子: 5b-6f-macosx 没有任何问题。 我不能理解的是为啥到这个符号就出现问题,而其他附近字符的却没有这个问题,难道是某个字体中把这个编码定义成了这个样子? 不过,我们可以通过CSS3的@font-face来修改这个符号的字体,我从Malgun Gothic字体中单独提取了这个爱心符号作出了一个字体,转成data base64在CSS中使用: [code lang="css"] @font-face { font-family: arial; unicode-range: U+2661; src: url(data:font/ttf;base64,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); font-weight: normal; font-style: normal; } [/code] 这里值得注意的是我们需要根据我们自己的需要修改其中的font-family来指定一个页面中用的字体,要不然也显示不了。这里为了方便就直接用arial字体了。 使用Stylish修改之后,Windows上的Chrome有这样的效果: 5b-6f-windows-fix ps. 值得一提的是,听G+上一位朋友的说法,日文字体中一般都是有这个符号的,如果大家想自己换个适合的符号的话,可以去找些日文字体来提取w