2015-04-24 60 views
0

我使用谷歌的Web字體,我的網站的「頭」一節中聯這樣的顯示不正確的重量:谷歌Web字體在初始頁面加載

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,700"> 

我的客戶正在使用Safari瀏覽器,並報告以下行爲:

  1. 當第一次加載頁面,它被設置爲字體「字體重量:300」 是比他們應該更大膽展示。

  2. 當瀏覽器窗口縮小並重新縮放時,它會自行清理,並且字體以正確的權重出現。

什麼會導致初始狀態?可能頁面加載速度比三個權重(300,600,700)可以從Google下載更快?

希望任何有識之士爲如何外部字體與有關地方CSS加載等

+0

什麼是您的CSS的默認字體重量? – AnnieMac

+0

我想我沒有一個,我只是直接在H1標籤上指定它。你的意思是我應該在body標籤或CSS中的其他地方指定它? –

+1

如果它正在改變你的p標籤等的重量,可能值得在你的css中設置默認權重爲300(或者其中任何一個),以查看是否有幫助 - 如果沒有看到問題的存在,我無法進一步排除故障 – AnnieMac

回答

0

默認字體粗細,當不是在你的CSS明確指定的,是400(別名爲「正常」),但你正在加載的字體沒有重量爲400的變體(只有300,600和700)。因此,任何在其CSS規則中使用此字體的元素也需要明確設置以確保使用正確的重量變體。

(在沒有字體重量的情況下選擇重量的規則記錄在CSS2 spec中,從「缺少的重量選擇如下」開始,所以它甚至可能是Safari瀏覽器在此處具有字體重量查找錯誤)