Landing page 裡的顯示特定中文字體解決的方法

kukfa chan
Nov 1 · 4 min read

Landing page 一般翻譯成「登陸頁面」、「銷售頁」、「著陸頁」或「到達頁」。訪客從流量管道 例如:Yahoo廣告、Facebook廣告、Google搜索等進來,能引導訪客到達你設定目標的網頁,就被稱做為 Landing Page (「登陸頁面」)。目的是要訪客有後續行動 例如:訂閱電子報、下載電子書、購買產品或註冊會員等。

為了吸引訪客繼續閱讀內文,Landing Page 通常有引人入勝的標題、吸引的描述、搭配適當的圖片、短片或動畫等。當搭配了漂亮的圖片,寫好了標題及描述,排版設計,完成制作 Landing Page 後,然後發現如果使用了特定字體, 網頁卻沒辦法在瀏覽器上顯示特定字體。

現在大多數的中文 Landing Page 都是使用瀏覽器上的默認字體,以往如果想使用特定的字體,都會將整個或部分的網頁做成圖片檔,這會導致網頁很慢,還不利於搜索器SEO。

為了解決中文字體的問題,以下將會探討一下使用 中文 Web Font 解決的方法。

中文字體開源的出現後,再加上HTML5及CSS3技術創新,網絡速度提昇,解決了設計師多年來的中文字體困擾。

這裡預先制作了一個虛構的 中文 Landing Page (圖.1),這網頁是使用瀏覽器默認字體,不同的操作系統和瀏覽器,默認字體可能會不同。

圖.1

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

圖.2

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

圖.3

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

圖.4

圖.3 可以看到不同的操作系統和瀏覽器上,字體有差異。

圖.4 可以看到使用中文 Web Font 的優點 :

  1. 使用特定的字體,整體排版設計可以控制,顯示高質量的網頁。
  2. 字體一致性,不同的操作系統和瀏覽器,顯示的字體都是相同,不需要擔心默認字體影響設計。
  3. 不需要將含有特定的字體做成圖片檔。
  4. 中文字形可以任意更改顏色及大小。
  5. 適合響應式網頁設計(電腦版和手機版)。
  6. 可搜索、可複製。

如何製作 :

前往 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>

效果圖

結論

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

kukfa chan

Written by

Over 20 years experience in web development. Currently interested in Chinese Fonts applied in web development.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade