Google字体显示Internet Explorer 8 - IE 8中的框

时间:2014-11-08 10:06:29

标签: php css arabic webfonts google-webfonts

我在css中使用以下行:

font-family:  'Droid Arabic Naskh';

并将代码发送到我的php头文件:

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

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

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

1 个答案:

答案 0 :(得分:1)

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

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

示例:

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

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

另一方面,Google在其页面上描述了关于Early Access fonts的字体,如下所示:“设计用于补充Droid Serif系列中提供的拉丁语,希腊语和西里尔语,阿拉伯语与颜色,对齐和Droid Serif的设计细节允许它们一起用于多语言排版。“

这意味着该字体或多或少意味着与Droid Serif一起使用,来自普通Google fonts。因此,使用Droid Serif作为第一种字体可能是个好主意。

然而,线高度存在问题。 Droid Arabic Naskh的默认行高往往比Droid Serif大得多。这会导致包含两种字体文本的段落中的行间距不均匀。要解决此问题,请设置一个公共line height。在下面的示例中,它已设置为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.