我在文档中有以下CSS规则:
我在文档中有以下CSS规则
font-family: "Trebuchet MS", Tahoma;
但我发现一些浏览器使用没有我所需要符号(非拉丁字符)的Trebuchet MS字体。在这种情况下,浏览器将显示方块而不是符号。
我应该如何检查它(可能通过javascript)?即如何检查访问者浏览器中已安装字体是否缺少某些符号?
我在文档中有以下CSS规则
font-family: "Trebuchet MS", Tahoma;
但我发现一些浏览器使用没有我所需要符号(非拉丁字符)的Trebuchet MS字体。在这种情况下,浏览器将显示方块而不是符号。
我应该如何检查它(可能通过javascript)?即如何检查访问者浏览器中已安装字体是否缺少某些符号?
AND-Regular.otf
的构造。(this link也可能相关)adobe notdef
作为探测字体),例如: <div style="font-family: sans-serif, Segoe UI symbol, adobe notdef">
�test□▯😘😅
😗😎😎🌊🌊😀
</div>
display:inline-block
的div中来进行测试,以强制其最小宽度。或者,您可以使用零宽度字体,如Adobe blank,它具有零宽度的.notdef
字符0(AdobeBlank.otf
文件仅为20kb)。这可以检测缺失的字形,因为包含缺失字形的div将最终具有offsetWidth == 0。但是,我认为这比使用非常宽的字形不太可靠,因为存在具有零宽度的有效字形,因此对于有效的零宽度字形(特别是U+200B
和其他控制字符?)会出现误报。
如果主要字体缺少某个字符的字形,正确行为的浏览器会从辅助字体中获取该字形。但是浏览器,特别是IE,经常会做错这件事。
最好的方法是仅在已知字体包含元素内容中可能出现的所有字符时,将字体包含在font-family
列表中。尽管字体以相同名称的不同版本存在,但我们通常可以足够可靠地确定字体是否包含某些给定字符。
对于少量文本,您可以将文本复制到记事本中,设置Trebuchet MS字体,并检查一切是否正常。(记事本很好用,因为它不进行字体替换。)
<div style="font-family: Trebuchet MS, Tahoma">א</div>
会按规格在Tahoma中显示alef。一些旧版本的Chrome可能会出错。无论如何,如果有机会使用的字体不包含您需要的所有字符,只需使用其他字体即可。 - Jukka K. Korpela