2014-11-08 50 views
0

我使用下面的行CSS:谷歌的字体显示框在Internet Explorer 8 - IE 8

font-family: 'Droid Arabic Naskh'; 

和下面的代码我的PHP头文件:

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

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

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

+1

我不能在IE 8模拟模式重现该问题在IE 11。你可以测试如果你设置了'font-family:格鲁吉亚,'Droid阿拉伯语Naskh''而不是? – 2014-11-08 15:56:14

+0

@ JukkaK.Korpela,这是一个改进,因为它首先显示charcaters(如/),首先使用'Georgia'字体显示charcaters,而在Georgia中缺少的字符(如特定的阿拉伯字母)使用第二个'Droid Arabic Naskh'。但我喜欢只使用一个字体系列。请把评论作为答案。如果没有更好的解决方案,我会选择它作为答案。 – Amir 2014-11-09 07:43:51

回答

1

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

为了规避错误,请选择您希望用于Ascii字符的字体,例如/,并且通常用于Droid阿拉伯语Naskh不包含的字符(除了空格和空格外,它似乎只包含阿拉伯字符没有休息的空间),并把该字体放在Droid阿拉伯纳斯克之前的值为font-family。 (这不原因字体的搭配;它控制它,因为混合是不可避免的,你会得到一个已知的字体,而不是浏览器默认设置。)

例子:

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

格鲁吉亚在这里只是一个例子。您可以使用各种字体甚至字体列表来处理不同设备具有不同字体集的问题。但是你应该选择只有而不是包含阿拉伯字符的字体,因为如果你这样做,他们将从该字体中取出而不是Droid阿拉伯语纳斯克。另一方面,谷歌在其网页上描述的关于其Early Access fonts的字体如下:“旨在补充Droid Serif系列中提供的拉丁语,希腊语和西里尔文,阿拉伯语匹配颜色,对齐和设计细节允许它们一起用于多语言排版的Droid Serif“。

这意味着该字体或多或少意味着与常用Google fonts中的Droid Serif一起使用。所以使用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.