你好Stackoverflow – 我要问的更清楚,我会详细说明.
我在旋转变换中使用以下符号：☎和♦和✔
(☎和♦和✔分别).
在我的Android设备上(智能手机,LG G4),它将这些文本符号替换为不使用我的转换或字体大小样式格式化的非文本图片表情符号.
我想强制浏览器使用我在我的网站上提供的字体中的常规符号(使用包含.ttf文件的@ font-face).在桌面上,我没有任何问题按预期显示我选择的符号.
非常感谢您的帮助,因为我不想被迫用图像替代我的文字排列.谢谢.
解决方法
您应该包含一个webfont,它支持您要使用的字符.
要在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">☎</span> <span class="icon">✉</span>
如果您不知道支持您的角色的webfont,您可以使用Icomoon App轻松创建一个.请参阅我的开源Emoji icon font,获取支持650个符号的Icon字体示例,这是我使用Icomoon App创建的.
如果您打算使用我的Icon字体(或任何其他图标字体),我建议您在Icomoon应用程序中编辑字体以删除除所需符号之外的所有符号,因为这会显着减少文件大小！
更多信息：
> Create webfont with Unicode Supplementary Multilingual Plane symbols
