Hello Stackoverflow——为了使我的问题更清楚,我将详细说明。
我在旋转转换中使用以下符号:☎和♦和 ✔ (☎ and ♦ and ✔ respectively)
.
不过,在我的Android设备(智能手机,LG G4)上,它将这些文本符号替换为非文本图片表情符号,这些表情符号不会使用我的转换或字体大小样式进行格式化。
我想强制浏览器使用我在网站上提供的字体中的常规符号(使用带有.ttf文件的@font面)。在台式机上,我完全没有问题按预期显示我选择的符号。
非常感谢您的帮助,因为我宁愿不要被迫用图像代替我的文本排列。谢谢。
您应该包含一个支持您要使用的字符的 Web 字体。
要在 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>
如果您不知道支持您的角色的网络字体,您可以使用Icomoon应用程序轻松创建自己的网络字体。另请参阅我的开源表情符号图标字体,以获取我使用 Icomoon 应用程序创建的支持 650 个符号的图标字体示例。
如果您打算使用我的图标字体(或任何其他图标字体),我建议您在Icomoon应用程序中编辑字体以删除除所需符号之外的所有符号,因为这会显着减小您的文件大小!
更多信息:
- 使用 Unicode 补充多语言平面创建 Web 字体符号