鏈接/ @ import/js使用Google字體的方法的性能考慮

Question

使用Google字體時，可以使用3種方法將其包含到網站中，其中3個是<link>,@import和javascript。

我想知道在確定哪種方法最合適時應考慮哪些因素，以及如何使用一種方法來影響字體。如：

• 添加的數據大小
• 字體呈現差異
• 頁面加載速度
• 並行裝載

我正在一個有使用任何方法的能力的假設沒有限制。由於

Answer 1

的聯繫方法，可以讓你在一個呼叫，像這樣多種字體的要求結合起來：

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid +Sans|Lobster"> 

這種簡單的技巧可以節省往返到谷歌服務器。此外，在您的頁面上進行任何JS調用之前，請將您的「鏈接」調用。

不幸的是，當一個外部CSS文件使用@import指令鏈接到另一個文件時，Internet Explorer的性能很差。如果不是出現性能問題，將@import添加到使用字體的同一CSS文件中具有更大的靈活性，但爲了獲得最佳性能，請將「鏈接」標記放在基本HTML文件中。