谷歌字体显示框在互联网浏览器8-IE 8


Google font shows boxes in Internet Explorer 8 - IE 8

我在css中使用以下行:

font-family:  'Droid Arabic Naskh';

并将以下代码添加到我的php头文件中:

<link href='//fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css' />

FireFox中没有问题,但在IE8中,它显示了一些字符的框,如) / ,

我该如何解决这个问题?。。。非常感谢。

这似乎是某些版本的IE中的一个错误。Droid Arabic Naskh字体除了空格外不包含任何Ascii字符,因此浏览器被迫使用回退字体,而IE已知存在此问题。

为了避免这个错误,请选择一种字体,用于Ascii字符(如)/,通常用于Droid Arabic Naskh未包含的字符(除了空格和无中断空格外,似乎只包含阿拉伯字符),并将该字体放在font-family值中Droid阿拉伯语Naskh之前。(这不会导致字体混合;它控制,因为混合是不可避免的,并且你会得到一个已知的字体,而不是浏览器默认的字体。)

示例:

body { font-family:  Georgia, 'Droid Arabic Naskh'; }

格鲁吉亚只是一个例子。您可以使用各种字体,甚至可以使用字体列表来处理不同设备具有不同字体集的问题。但你应该只选择而不包含阿拉伯字符的字体,因为如果你这样做,它们将取自该字体,而不是Droid Arabic Naskh。

另一方面,谷歌在其页面上对其Early Access字体的描述如下:"阿拉伯语旨在补充Droid Serif家族中提供的拉丁语、希腊语和西里尔语,与Droid丝氨酸的颜色、对齐方式和设计细节相匹配,使它们能够一起用于多语言排版。"

这意味着该字体或多或少是为了与Droid Serif一起使用,来自常见的谷歌字体。因此,使用Droid Serif作为第一种字体可能是个好主意。

然而,线条高度存在问题。Droid Arabic Naskh的默认行高往往比Droid Serif大得多。这会导致包含两种字体文本的段落中的行距不均匀。若要解决此问题,请设置一个公用线高度。在下面的示例中,它被设置为1.4,这对于拉丁字母的文本来说相对较大,但对于以阿拉伯语为主的文本,您可能会考虑使用更大的值。

<!DOCTYPE HTML>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' 
  rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css'
  rel='stylesheet' type='text/css' />
<style>
body { font-family: 'Droid Serif', 'Droid Arabic Naskh';
       line-height: 1.4;
}
</style>
السلام عليكم, let is now test “()/,”.
Here you should see even line spacing, even though the
text contains Arabic words like فن الخط in the middle of text in Latin letters. Note that all non-Arabic characters except space are from Droid Serif here.