在網頁設計的領域文字的編輯一直是一個很弱很弱的工作，因為網頁的規定，網頁的文字是抓取使用者電腦裡面的文字來顯示的，然而大部份的使用者的電腦中並不會安裝多餘的字型，因此，早期的網頁大多只會顯示 windows 內鍵的新細明體或者是標楷體，這兩種字型說真的並不是很好看啊… 不過後來 windows 新增了微軟正黑體，讓網頁的文字好看了一些些…
好了，我們就趕快進入本篇教學要討論的主題：如何調整文字的粗細
調整文字的粗細是使用 CSS 語法中的 font-weight ；
文字的粗細有人稱之為文字的「字重」或者是「文字的厚度」
在上面那一張圖片有兩段文字「CSS 網頁設計」是使用 <h1> 一號標題來標記
「台北網頁設計教學中心」是使用 <h2> 二號標題來標記，如下圖
第 23 行的<h1> 一號標題 和 第 25 行的<h2> 二號標題
首先，我們對<h1> 一號標題設定字型為「微軟正黑體」然後 font-weight 的粗細設定為最粗的 900 ；另外，再對 <h2> 二號標題也是設定字型為「微軟正黑體」然後 font-weight 的粗細設定為最細的 100 設定語法如下
|
#banner h1{
font-family: ‘微軟正黑體’, sans-serif;
font-weight: 900;
}
#banner h2{
font-family: ‘微軟正黑體’, sans-serif;
font-weight: 100;
}
|
我們來看看設定完之後網頁的顯示情況，如下圖：
實際的情況並不如我們相像中的那麼好，首先<h1> 一號標題並沒有變成最粗的狀態，還有<h2> 二號標題也不是最細的狀態，這是因為 windows 的微軟正黑體並沒有被沒設計這麼完整，所以無法顯示出我們最想要的樣子，另外還會產生一個問題，就是如果使用者是使用其他的作業系統，例如 Mac 上面是沒有微軟正黑體的。
解決方法
CSS3 推出了線上字型的功能，尤其是 Google Fonts 特別的佛心，推出的線上字型都是可以免費使用的，其中，對於繁體中文就推出了 Noto Sans TC 黑體字型，中文稱之為「思源黑體」，廢話不多說，我們馬上就來教大家如何使用 Noto Sans TC 黑體字型。
第一步：開啟 Google Fonts 網站，馬上我們就可以看到中文的 Noto Sans TC 黑體字型，如下圖
第二步：點選進去之後，對「Thin 100」後面點選「Slect this style」
第三步：拉到最下面，對最粗的「Thin 900」後面點選「Slect this style」
下一步，在網頁的右邊有<link>和 @import 兩種載入方式，<link> 是使用在 HTML 上的，由於我們的 CSS 檔案是跟 HTML 分開的，所以我們要採用 @import 的方式，才能將 2 個以上不同的 CSS 載入在一起，如下圖：
我們就將上面複製的 Google Font 的 @import 語法貼上到我們的 CSS 檔案之內，如下圖 第 3 行所顯示：
最後呢，我們再來修改一下<h1> 一號標題和 <h2> 二號標題設定字型為「Noto Sans TC」, 然後<h1> 一號標題 font-weight 的粗細設定為最粗的 900 ；<h2> 二號標題 font-weight 的粗細設定為最細的 100
|
#banner h1{
font-family: ‘Noto Sans TC’, sans-serif;
font-weight: 900;
}
#banner h2{
font-family: ‘Noto Sans TC’, sans-serif;
font-weight: 100;
}
|
來來來，讓我們來看看最後顯示的細果，如下圖：
是不是比 windows 的微軟正黑體好太多了呢，果然 Google Fonts 是真正的好物啊！
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
