IE11中的阿拉伯字体省略号问题

Question

我在IE上使用阿拉伯语字体"Droid Arabic Kufi"时遇到省略号的问题.此错误仅在IE上发生,但我修复了IE9上的问题,但相同的代码不能在IE 11上运行.

错误是在IE11中呈现页面时,而不是显示省略号点(...),它显示框.

请检查以下JSFIDDLE示例.

http://jsfiddle.net/qLrg92tb/1/

body{
    font-family : "Droid Arabic Kufi";
}
p{
    width:50px;
    text-overflow : ellipsis;
    overflow: hidden; 
    white-space: nowrap; 
    -ms-text-overflow: ellipsis; 
}

p:before{
 content : " ";
 font-family : "Arial";
}

p:after{
    content : " ";
     font-family : "Arial";
}

等待任何帮助.

谢谢

Answer 1

TypoThe Droid阿拉伯语Kufi字体不包含句点"."字符(或任何其他Ascii字符,除了空格),因此当浏览器实现时text-overflow: ellipsis,它们必须从另一种字体中取出句点.显然,某些版本的IE无法正确执行此操作,可能是因为它们错误地解释了字体信息(就好像字体包含".").

解决方法是在font-family列表中放置一些合适的字体,以便从中获取".",例如

font-family : Verdana, "Droid Arabic Kufi";

此字体不应包含阿拉伯字符,因为该字体优先于列表中稍后提到的任何内容.该字体也应该在使用IE的所有系统中可用.对此没有绝对的保证,但除非故意删除,否则Verdana应该在所有Windows系统上.

从技术上讲,这也意味着空格字符将取自该字体,而不是来自Droid Arabic Kufi.这可能在间距方面很重要.在Droid Arabic Kufi中,该空间的前进宽度为696个单位,在Verdana中为700个单位,因此应该没有实际差异.