技術注意事項

本文件提供了一些技術資訊,讓您瞭解使用 Google Fonts API 要求網頁字型時會發生什麼情況。

本文件也會針對瀏覽器特有的行為提供相關資訊。

如果您只使用 Fonts API,則不需要閱讀此頁面。 不過,這個網頁或許能改善您網頁的效能。

什麼是 Google Fonts API 服務?

瀏覽器傳送 Fonts API 樣式表 (如網頁的 <link> 標記中指定的) 要求時,Fonts API 會針對送出要求的特定使用者代理程式產生樣式表。

例如,透過 Firefox 要求 Inconsolata 的要求會傳回下列 CSS:

@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}

另一方面,來自 Internet Explorer 的要求會傳回:

@font-face {
  font-family: 'Inconsolata';
  src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}

下載 CSS 之後,瀏覽器會以適當的格式下載瀏覽器字型。

瀏覽器特定行為

本節說明每個瀏覽器以網頁字型的預設行為。請注意,您可以使用網路字型載入器來控制這些行為。

如需支援的瀏覽器清單,請參閱常見問題

Google Chrome

Chrome 會轉譯網頁的其他部分,但在字型載入之前,該文字會顯示空白區域來取代字型使用的文字。

Mozilla Firefox

Firefox 會先以預設字型顯示文字,並在載入後重新顯示該字型中的文字。這種行為稱為「非樣式文字的 Flash」。

Apple Safari

Safari 會顯示網頁的其他部分,但在字型載入之前,該文字會顯示空白區域來取代字型使用的文字。

Microsoft Internet Explorer

Internet Explorer 會顯示網頁的其他部分,但在字型載入之前,該文字會顯示空白區域來取代字型使用的文字。

更普遍來說,Internet Explorer 的行為會因為刊登位置和刊登位置的不同元素而改變。如果您想在所有瀏覽器中提供一致的行為,請使用網路字型載入器。例如,您可以選擇讓所有瀏覽器以類似 Firefox 的方式運作