breadcrumb image

在綫轉換Web Font

我們希望能讓更多網頁能使用上中文字體,免費推出了這個在綫製作中文Web Font 服務。
這篇網誌 「網頁設計師忽略了的事情 - 中文字體 」介紹了中文字體的重要性,大家可以去了解一下。

在綫轉換Web Font

選擇字體

如何使用


01. 輸入或粘貼您的文字

在文字框中輸入或粘貼您的文字。

 

02. 選擇喜歡的字體

根據您所選的字體，系統將會即時自動顯示渲染後的效果。

 

03. 下載檔案

當您完成您的內容及選擇字體後，按 "下載" 按鈕下載檔案。檔案是zip格式，內有一個 cjkfonts_font.css 檔案，解壓及保存至您的電腦。

 

04. 上傳 cjkfonts_font.css

將 cjkfonts_font.css 上傳到您的Web服務器，上傳文件位置一般是 css 文件夾。

例如 :

 

05. 網頁引入 cjkfonts_font.css

需要在你的網頁<head>中包含一個<link>元素

<link rel="stylesheet" href="/css/cjkfonts_font.css">

 

06. 在 id 或 class 加入字型

使用文字編輯器打開 cjkfonts_font.css ，內裡找尋 font-family，在以下例子中，記下 NotoSansCJK_Black

@font-face {
  font-family: "NotoSansCJK_Black";

在網頁 CSS 加入

.new_font {
  font-family: "NotoSansCJK_Black";
}

在網頁加入字型

<body>

<span>中文字體</span>
<span class="new_font">中文字體</span>

</body>

效果

中文字體
中文字體

 

範例

01. 思源黑體

中文Web Font做出高質感的網站

中文Web Font做出高質感的網站

中文Web Font做出高質感的網站

中文Web Font做出高質感的網站

中文Web Font做出高質感的網站

中文Web Font做出高質感的網站

中文Web Font做出高質感的網站

02. 思源宋體

壹貳參肆伍陸柒捌玖拾

壹貳參肆伍陸柒捌玖拾

壹貳參肆伍陸柒捌玖拾

壹貳參肆伍陸柒捌玖拾

壹貳參肆伍陸柒捌玖拾

壹貳參肆伍陸柒捌玖拾

壹貳參肆伍陸柒捌玖拾

03. 思源柔黑體

故人西辭黃鶴樓
煙花三月下揚州
孤帆遠影碧山盡
唯見長江天際流

;