週報總覽 Newsletter

請選擇您感興趣的週報主題類型

不需透過他人,也可輕鬆在網站上安裝不同字型

如果您的網站想要跳脫傳統的網頁字型,讓網站看起來更加的有特色,使用 " Google Fonts " 是個不錯的選擇。

 

Google 從 2014 年開始就陸續推出一系列的字型提供給需要的人使用,並且還很佛心的提供語法讓您可以直接使用在網頁上,讓您不用煩惱瀏覽者的電腦是不是沒有您所選擇的字型,而無法看到最佳的網站效果。

  •  摩智電子週報 不需透過他人,也可輕鬆在網站上安裝不同字型

目前網站上提供較多的是英文字型,中文字型則有 "思源黑體"、"思源宋體" 可以選擇。本期的電子報告訴您要怎麼在網站上使用 Google 提供的免費字型。

 

跟著我們的步驟,您就可以輕鬆為網站修改字型

  • 步驟 01

    請先到 Google Font 官網,選擇您所需要的字型。您可以依照需求篩選需要的文字,例如文字有沒有襯線、語言…等,網站上會依照您的需求篩選出適合您的字型。

     摩智電子週報 不需透過他人,也可輕鬆在網站上安裝不同字型
  • 步驟 02

    經過篩選,我們這裡以 “ Noto Serif TC (思源宋體) ” 當作範例,點選字體進入下一頁。

     摩智電子週報 不需透過他人,也可輕鬆在網站上安裝不同字型
  • 步驟 03

    選擇字型的粗細,要下載的字型請點選按鈕 “ + Select this style ” (紅框處),右邊會出現已經選擇的字型 (橘框處)。

     摩智電子週報 不需透過他人,也可輕鬆在網站上安裝不同字型
  • 步驟 04

    接下來將我們需要的選項內容拷貝起來,步驟如下:

    • 選擇 “Embed ”分頁。
    • 之後點選 “ @import ”按鈕。
    • 將紅框的內容複製起來,先貼到記事本上放著備用。

     

    複製內容範例

    • < style >
      @ import url ( ' https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500&display=swap ' );
      < / style >

    • font-family: 'Noto Serif TC', serif;

     摩智電子週報 不需透過他人,也可輕鬆在網站上安裝不同字型
  • 步驟 05

    將複製的語法做個微調加到網站的編輯器上,例如:

    < style > 

    @import url ( ' https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500&display=swap ' );

    * { font-family: 'Noto Serif TC', serif; }

    < /style >

     摩智電子週報 不需透過他人,也可輕鬆在網站上安裝不同字型
  • 步驟 06

    完成了,我們可以看到網站的字型由原本的 “黑體“ 變成了 “宋體“ 。

     摩智電子週報 不需透過他人,也可輕鬆在網站上安裝不同字型

上一期電子報我們有提到,線上字型非常實用,但是必須要審慎適當的使用這些文字的調整,因為需要留意到瀏覽者瀏覽網頁的速度,我們建議可以指定:標題、公司標語等有特殊意義的文字,經由這些文字字型的指定,讓瀏覽者能夠有更好的視覺集中度。

 

下一期電子報,我們將告訴您 “線上字型“ 的運作模式,還有與網頁瀏覽速度的關聯性。

#Google#網站趨勢#圖文編排訣竅

如果您的網站想要跳脫傳統的網頁字型,讓網站看起來更加的有特色,使用 " Google Fonts " 是個不錯的選擇。

友善列印版本

這些資訊無法滿足您?

請填寫聯絡表單與我們進行更多互動吧!