2014-11-08 82 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.