5分鐘瞭解GoogleFont

發表於

5分鐘學會Google Fonts

大家都努力的考試，也教下一代如何考試，然而大家卻什麼都不懂。 - 理察·費曼

GoogleFont

引用方式

  • 只需兩步即可開始使用Google Fonts API：

1.添加樣式請求所需的Web字體：

1
2
<!-- 網址 + 請求字體(多個用 | 隔開)-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
1
2
3
<style>  
@import url('https://fonts.googleapis.com/css?family=Roboto');  
</style>

2.在樣式表中使用請求的Web字體對元素進行樣式設置：

1
2
3
4
5
body { 
    font-family:   'Tangerine', serif;
    font-size:   48px;
    text-shadow:   4px   4px   4px   #aaa;  
}
  • 以CSS樣式指定Web字體時，請至少準備一個後備Web安全字體，以避免出現意外行為。
  • 添加一個CSS通用字體名稱serif或sans-serif到列表的末尾，這樣瀏覽器需要的話就可以默認字體。

瀏覽器載入差異(默認行為)

Google Chrome , Apple Safari , IE

會先呈現頁面的其餘部分，但在加載字體之前，它會顯示一個空格來代替使用該字體的文本。

Mozilla Firefox

Firefox首先以默認字體顯示文本，然後在加載字體後重新呈現文本。
這種行為被稱為 “ flash of unstyled text “ 。