Landing page 裡的顯示特定中文字體解決的方法
Landing page 一般翻譯成「登陸頁面」、「銷售頁」、「著陸頁」或「到達頁」。訪客從流量管道 例如:Yahoo廣告、Facebook廣告、Google搜索等進來,能引導訪客到達你設定目標的網頁,就被稱做為 Landing Page (「登陸頁面」)。目的是要訪客有後續行動 例如:訂閱電子報、下載電子書、購買產品或註冊會員等。
為了吸引訪客繼續閱讀內文,Landing Page 通常有引人入勝的標題、吸引的描述、搭配適當的圖片、短片或動畫等。當搭配了漂亮的圖片,寫好了標題及描述,排版設計,完成制作 Landing Page 後,然後發現如果使用了特定字體, 網頁卻沒辦法在瀏覽器上顯示特定字體。
現在大多數的中文 Landing Page 都是使用瀏覽器上的默認字體,以往如果想使用特定的字體,都會將整個或部分的網頁做成圖片檔,這會導致網頁很慢,還不利於搜索器SEO。
為了解決中文字體的問題,以下將會探討一下使用 中文 Web Font 解決的方法。
中文字體開源的出現後,再加上HTML5及CSS3技術創新,網絡速度提昇,解決了設計師多年來的中文字體困擾。
這裡預先制作了一個虛構的 中文 Landing Page (圖.1),這網頁是使用瀏覽器默認字體,不同的操作系統和瀏覽器,默認字體可能會不同。

(圖.2)是使用了中文 Web Font 的 Landing Page,不同的操作系統和瀏覽器,顯示的字體都是相同。

(圖.3)顯示了一些在不同的操作系統和瀏覽器上,普通的 中文 Landing Page 的效果圖。

(圖.4)顯示了一些在不同的操作系統和瀏覽器上,使用了中文 Web Font 的 Landing Page 的效果圖。

圖.3 可以看到不同的操作系統和瀏覽器上,字體有差異。
圖.4 可以看到使用中文 Web Font 的優點 :
- 使用特定的字體,整體排版設計可以控制,顯示高質量的網頁。
- 字體一致性,不同的操作系統和瀏覽器,顯示的字體都是相同,不需要擔心默認字體影響設計。
- 不需要將含有特定的字體做成圖片檔。
- 中文字形可以任意更改顏色及大小。
- 適合響應式網頁設計(電腦版和手機版)。
- 可搜索、可複製。
如何製作 :
前往 https://www.cjkfonts.io/ 轉換字體
在網站上可以看到

1.輸入或粘貼您的文字
2.選擇字體
3.下載檔案
4. 檔案是zip格式,內有一個 cjkfonts_font.css 檔案,解壓及保存至您的電腦。將 cjkfonts_font.css 上傳到您的Web服務器,上傳文件位置一般是 css 文件夾。
5. 網頁引入 cjkfonts_font.css
網頁<head>中包含一個<link>元素
<link rel=”stylesheet” href=”/css/cjkfonts_font.css”>
6. 在 id 或 class 加入字型
使用文字編輯器打開 cjkfonts_font.css ,內裡找尋 font-family,在以下例子中,記下 NotoSansCJK_Black
@font-face {
font-family: “NotoSansCJK_Black”;
在網頁 CSS 加入
.new_font {
font-family: “NotoSansCJK_Black”;
}
7.在網頁加入字型
<body>
<span>中文字體</span>
<span class=”new_font”>中文字體</span>
</body>

結論
在中文網頁顯示特定的字體並非想像中那麼困難,簡單的幾個步驟就能完成。
