人氣 39°c

網頁加上Google Fonts及Noto字型(字體)

若是瀏覽者使用的是非 Windows、Mac 或 Linux Ubuntu 電腦系統,如作業系統 Android、IOS、ChromeOS 沒有內置的字型(字體),頁面就會達不到預期的顯示效果,製作出來的網頁或應用程式,在不同裝置呈現的畫面就不一樣了,這樣就需要借助 Google Fonts、Noto 雲端字體。

如果你想某一個字體,在不同的數碼裝置呈現的效果都能夠保持一致,可以在CSS、Html、PHP、ASP文件,加入 Google 提供的雲端 Fonts 以及 Noto 字型,例如:楷體、仿宋體、圓體、思源黑體、黑體字體、明體字體 以及 Adobe 推出的思源宋體、思源明體等字體。

Google Fonts、Noto 官方網站:fonts.google.com

01. 首先進入到網站,點擊喜歡的字體。請看圖片▼

02. 然後點擊「Get font」按鈕。請看圖片▼

03. 來到第三個頁面,你可以選擇「Get embed code」直接將雲端連結加入到網頁或應用程式,也可以按「Download all」下載到本地電腦中。請看圖片▼

04. 如果你選擇了「Get embed code」Google 已提供了一系列雲端字型網址。請看圖片▼

如何做!?

01. 若選擇用<link>,記得將這一段放在自己撰寫的樣式<link>前

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet" />

02. 若選擇用 @import 則將它放到 CSS 文件的開頭

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');

03. 若選擇將 @import 放在 HTML、PHP、ASP 文件,要用 <style> 把它包起來

<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
</style>

導入 Google 雲端字體後,還要在 CSS 樣式中加入字體名稱代碼

body {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
}

說明:

Noto Sans TC 和 sans-serif 是字體名稱

400 字體大小

font-family 說明:

在CSS 樣式中設定 family-name ( 字體名稱 ) 和 generic-family ( 通用字體 ),font-family 可以設定一種字體或多種不同的字體,每種字體間用半形逗號「,」隔開,當瀏覽器載入網頁樣式時,會從左邊第一個字體開始判斷,如果沒有對應的字體,就直接採用下一種字體,如果到最後都沒有可用的字體,就採用電腦預設字體,這時就可以透過 generic-family 來指定哪種預設字體。

舉例來說,下面這行 CSS,會先找第一種字體,若不支援或沒有該字體,則採用第二種字體,依此類推,最後使用通用字,從下方例子亦可以看到,字體名稱時不用加上雙引號或單引號,但如果你的字體名稱中間空格,就一定要加上雙引號或單引號。

body {
  font-family:第一種字體, 第二種字體, '第三種 字體', "通用字";
} 

@font-face 說明:

@font-face 算是 font-family 裡比較進階但又頗重要的用法,@font-face可以讓我們使用電腦裡的字體檔 ( 如 woff、ttf 之類的檔案 ),或和網路上的字體檔互相搭配使用,亦可一併指定粗體、斜體等樣式,如果透過unicode-range的方法,更能指定某些字元套用特定字體,讓網頁的設計更具備靈活的彈性。

@font-face {
font-family: 'oxxo';
src: local('Arial'),
url('setofont.ttf');
}

h1 {
font-family:oxxo, serif;
}

參考網頁:CSS font-family 詳細介紹

相關文章:
1. 思源黑體和思源宋體(思源明體)
2. 微軟正黑體與雅黑體
3. CSS常用中文字體與英文名稱比對
4. 以諾天使文字+瑪拉基姆文+魔法文字型(字體)
標籤: