用 Framer 做中文網站:語言、字體、排版設定一次搞定

Framer 築者基地作者青魚 Cyan 頭像

青魚 Cyan

•

「Framer 有中文版嗎?」這是很多新手剛踏入 Framer 時第一個好奇的問題。先講結論:Framer 的編輯器目前只有英文介面,但你做出來的網站可以完全是繁體中文網站,而且只要把幾個設定弄對,中文網站一樣可以又快又好看。這篇就把做中文網站會碰到的四件事一次整理:網站語言、中文字體、中文排版,還有想做中英雙語時怎麼辦~

Framer 有中文介面嗎?

Framer 的編輯器目前官方只提供英文介面。

不過別擔心,介面是英文不代表做不了中文網站。面板上的英文單字其實就那幾個,理解後不用擔心被英文卡住!如果你是剛入門,可以先從《Framer 新手必修課:搞懂 Fill 與 Fit Content》開始,最常用排版的觀念都在這裡。

真正需要留意的,是接下來這三件「讓網站變成中文網站」的設定。

網站語言怎麼設成繁體中文?

第一步先告訴瀏覽器和 Google「我的網站是繁體中文」。

  1. 打開 Site Settings

  2. 找到 Site Language,加上語言設定

  3. 選擇繁體中文

Framer 的網站設定畫面,顯示可將網站語言設為繁體中文的選項

設定好之後,Framer 會自動幫整個網站加上語言標記。這個設定看不到畫面上的變化,但會在背後默默幫你做好幾件事:

  • 讓 Google 更清楚這是一個繁中網站,有助於出現在繁中的搜尋結果

  • 讓螢幕閱讀器會用正確的語言念出內容,對視障使用者更友善

  • 讓瀏覽器不會跳出「要不要翻譯這個網頁?」的提示

Framer 可以用哪些中文字型?

Framer 的字型選單裡有幾個分頁,做中文網站最常用的是這兩個:

  • Google 分頁:Framer 字型選單裡能直接用的中文字型,就是 Google Fonts 上有的那些,例如 Noto Sans TC(思源黑體)、Noto Serif TC(思源宋體)…也可以找看看日文字型,但就比較容易有缺字的問題!

  • Custom 分頁:上傳自己買的字型檔,或品牌指定的字型。

小技巧:在 Framer 裡一個一個找很花時間,可以先到 Google Fonts 網站,用語言篩選「Chinese (Traditional)」把繁中字體全部列出來,輸入自己的文案預覽,挑好再回 Framer 搜名字套用。

Google Fonts 網站的字型瀏覽畫面,用於篩選與預覽繁體中文字型

建議大家中文字體優先選 Google Fonts。原因是中文字體檔案非常大。英文字體只要幾百個字元,中文字體動輒上萬字,一個字重就可能好幾 MB。Google Fonts 會把字體切成很多小塊,訪客的瀏覽器只會下載「這一頁真的有用到的字」;但自己上傳的字體沒有這個處理,等於整包下載,網站就會變慢。

所以如果一定要用自訂字體:

  • 檔案格式選 .woff2,這是目前最輕的網頁字體格式

  • 上傳前確認授權有包含網站使用(很多字體的桌面授權不能放網站)

  • 只放真的會用到的字重,不要一次上傳六個粗細

Framer 中上傳自訂中文字型時的字型檔案與設定畫面

字體選好之後,行高和字級怎麼設,可以接著看《告別 App 文字設計思維!行高、間距與 SEO 標籤邏輯》。

中文排版要注意什麼?

中文不像英文可以以單字為一個單位,這個特性讓幾個在英文網站很好用的設定,放到中文會有不一樣的效果。最常遇到的有兩件事:

1. 左右齊行(Justify)會讓字距忽大忽小

英文設計稿上很常用左右齊行,看起來很整齊。但在網頁上,瀏覽器為了讓每行剛好對齊,會偷偷拉開某幾行的字距,結果同一段文字有的密、有的鬆。中文內文建議直接用靠左對齊,右邊有一點點不齊是正常的。

2. 斷行與孤字:善用 Balance 和 Pretty
有時候會遇到段落最後一行只剩「了。」一兩個字(孤字),看起來會很空。Framer 的文字設定裡有兩個斷行選項可以幫忙:

  • Balance:讓每一行長度盡量平均,適合標題這種只有兩三行的短文字

  • Pretty:主要用來避免最後一行只剩一兩個字,適合內文段落

Framer 文字設定畫面,示範 Balance 與 Pretty 斷行選項的使用方式

想做中英雙語網站怎麼辦?

如果你的網站需要中英雙語,Framer 有內建的 Localization(多語系)功能:

  • 可以用 AI 先翻譯一版,再手動修

  • 切換語言時,Framer 會自動處理語言標記,讓 Google 知道這幾頁是同一頁的不同語言版本

要注意的是,多語系是付費加購的功能:每多一個語言,每月多 NT$274。方案價格的差別可以看《Framer 價格費用解析:2026 最新方案比較與挑選建議》。

結語

整理一下,用 Framer 做繁體中文網站,記得這四件事:

  1. 網站語言設成繁體中文

  2. 中文字體優先用 Google Fonts,自訂字體選 .woff2

  3. 內文靠左對齊;標題用 Balance、內文用 Pretty 處理孤字,開了記得檢查各斷點

  4. 雙語言需要付費加購開 Localization 多語系功能

文章大綱
本文作者介紹
Framer 築者基地作者青魚 Cyan 頭像
青魚 Cyan

現職於醫藥行銷公司的資訊設計師,同時從事網頁與視覺設計接案。工作之餘,持續投入 Framer 與網頁設計工具的學習與實踐,並打造一個面向中文圈創作者的交流與共學空間。

本文作者介紹
Framer 築者基地作者青魚 Cyan 頭像
青魚 Cyan

現職於醫藥行銷公司的資訊設計師,同時從事網頁與視覺設計接案。工作之餘,持續投入 Framer 與網頁設計工具的學習與實踐,並打造一個面向中文圈創作者的交流與共學空間。

看看其他文章

Connect, configure and preview
Connect, configure and preview