如何使用Google字體

我非常支持使用系統字體,它們速度快,重量輕且運行良好,但是有時您需要花哨一點。

您需要一種特定的字體,以使您的設計看起來不錯。

也許像Slabo,Lato或Raleway這樣的好字體。

Google作為其眾多服務的一部分,提供了一個稱為Google字體的工具,該工具(我寫這篇文章)支持992種字體家族:

界面有點讓人不知所措,作為一個不是字體專家的人,我無疑對應該選擇哪種字體感到困惑。

我通常會在Google上搜索“最佳google字體”,然後查看獲得的文章,以了解字體的外觀。在Google字體上查看數十種字體並不理想,有些網站還提供了輕鬆的顏色選擇,例如在這個帖子上

讓我們採用在我的一個網站中使用的一種字體:按開始2P

這是複古網站的絕佳字體。我用在我的網絡平台課程主頁,我想對它進行計算機化的外觀。

在字體頁面上,您可以看到每個字符的呈現方式:

向下滾動,您可以看到誰是設計師,以及重要的部分:許可證。在這種情況下,頁面上會顯示

您可以在產品和項目中自由使用它們-打印或數字,商業或其他方式。但是,您不能單獨出售字體。

這給了我們很多權限。

即使在商業項目中,我們也可以根據需要使用字體,但是我們不能轉售它。

在底部,我們有一個有趣的部分,列出了經常與該字體配對的字體。

使用字體時,我會盡量保持保守,因為大多數時候我不知道自己在做什麼,看看別人在做什麼,複製最合理的選擇是一個好策略。

現在,您可以按頁面右上角的“下載系列”鏈接下載字體TTF文件,您可以將其安裝在計算機上並將其用作桌面程序中的字體。

但是您無需這樣做即可在網站上使用該字體。

您可以做的就是在“樣式”部分中,單擊所需的每種樣式旁邊的“選擇此樣式”。

這會將其添加到“選定的家庭”側邊欄中:

完成後,單擊“嵌入”選項卡,在這裡可以找到需要在項目中輸入的代碼:link元素以在HTML中包含字體,以及CSS規則以將字體系列應用於特定元素:

因此,在這種情況下,您需要添加以下HTML:

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

然後這個CSS:

body { /* use your favorite selector here */
  font-family: 'Press Start 2P', cursive;
}

我們提供了一個後備字體,以防字體無法加載或加載過多。

包含字體的另一種方法是使用@importCSS中的指令,因此您無需使用linkHTML中的屬性-全部位於CSS文件中:

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

但是這種方法有一個局限性:它比較慢。如果字體是在HTML中鏈接的,則瀏覽器將在讀取HTML後立即請求字體URL。

如果字體是在CSS中鏈接的,則瀏覽器必須首先請求加載CSS,然後才能請求加載字體URL。

此處損失的幾毫秒可能會導致立即以正確的字體加載的頁面與首先加載後備字體的頁面,然後在可用時加載正確的字體的頁面有所不同。

免費下載我的JavaScript初學者手冊


更多瀏覽器教程: