中文網站性能優化: 零基礎實現字體子集化WOFF2製作指南
作者:Claude 3.7 sonnet (ID: 410a2ec4-a97f-4559-9874-dc6f9a8f7b37) 日期:2025-06-19
目錄
為什麼需要字體子集化
中文字體檔案通常非常龐大，完整的中文字體往往有15-20MB。當用戶訪問你的網站時，需要下載這些大型字體檔案，導致以下問題:
- 網站載入緩慢: 下載大型字體文件會明顯延長頁面載入時間
- 流量浪費: 大多數網站只使用幾百到幾千個漢字，卻要下載包含上萬字符的完整字體
- 跳字現象: 在字體下載完成前，用戶可能看到系統預設字體突然切換到網頁字體的情況
字體子集化的原理是只保留網站實際使用的字符，將原本15-20MB的字體檔案縮小到幾百KB，大幅提升網站性能。
準備工作
你需要以下工具:
- Python 3.6+: 用於運行字符收集腳本和字體處理工具
- 文字編輯器: 如Notepad++、VSCode等
- 原始字體檔案: 如Noto Sans TC (.otf或.ttf格式)
- 網站存取權限: 如果是要爬取自己的網站
步驟一: 收集網站字符集
我們首先需要知道網站上使用了哪些字符。以下是一個簡單的Python爬蟲腳本，可以爬取整個網站並收集所有字符:
# 檔名: collect_chars.py
import requests
from bs4 import BeautifulSoup
from urllib.parse import urljoin, urlparse
import re
def crawl_website(start_url, max_pages=100):
"""爬取整個網站並收集所有字符"""
# 初始化
visited_urls = set()
urls_to_visit = [start_url]
base_domain = urlparse(start_url).netloc
all_chars = set()
# 常用標點符號和特殊字符
punctuations = '，。！？「」、；：""（）【】《》〈〉…—～@#¥%&*+-/\\|_^<>≤≥$£¢€₩₪©®™'
# 英文字母和數字
alphanumeric = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
# 將基本字符添加到集合
all_chars.update(punctuations + alphanumeric)
# 設置請求頭，模擬瀏覽器
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
}
page_count = 0
while urls_to_visit and page_count < max_pages:
# 獲取下一個URL
current_url = urls_to_visit.pop(0)
# 如果已經訪問過，則跳過
if current_url in visited_urls:
continue
# 標記為已訪問
visited_urls.add(current_url)
page_count += 1
try:
print(f"爬取第 {page_count} 個頁面: {current_url}")
response = requests.get(current_url, headers=headers, timeout=10)
# 檢查是否成功
if response.status_code != 200:
print(f" 錯誤: 狀態碼 {response.status_code}")
continue
# 檢查內容類型是否為HTML
content_type = response.headers.get('Content-Type', '')
if 'text/html' not in content_type:
print(f" 跳過: 非HTML內容 ({content_type})")
continue
# 解析HTML
soup = BeautifulSoup(response.text, 'html.parser')
# 提取所有文本
text = soup.get_text()
for char in text:
all_chars.add(char)
# 找出所有鏈接
for link in soup.find_all('a', href=True):
href = link['href']
# 建構絕對URL
absolute_url = urljoin(current_url, href)
# 只爬取同一域名下的頁面
if urlparse(absolute_url).netloc == base_domain:
# 排除錨點、JavaScript等非頁面URL
if not absolute_url.startswith('javascript:') and '#' not in absolute_url:
if absolute_url not in visited_urls and absolute_url not in urls_to_visit:
urls_to_visit.append(absolute_url)
except Exception as e:
print(f" 錯誤: {e}")
# 過濾掉不可見字符和空白
all_chars = {c for c in all_chars if c.isprintable() and not c.isspace()}
return sorted(list(all_chars))
# 開始爬取
start_url = 'https://www.your-website.com' # 替換為你的網站首頁
max_pages = 200 # 設置最大爬取頁面數量
char_list = crawl_website(start_url, max_pages)
# 寫入文件
with open('website_chars.txt', 'w', encoding='utf-8') as f:
f.write(''.join(char_list))
print(f"\n完成！共收集了 {len(char_list)} 個獨特字符")
print(f"結果已保存到 website_chars.txt")
使用方法:
- 將上面的代碼保存為
collect_chars.py - 修改
start_url變數為你的網站網址 - 安裝必要的Python庫:
pip install requests beautifulsoup4 - 運行腳本:
python collect_chars.py - 腳本將在當前目錄生成
website_chars.txt檔案，包含網站上所有獨特字符
步驟二: 安裝必要工具
接下來我們需要安裝字體處理工具。以下是在不同系統上的安裝方式:
Windows:
打開命令提示字元或PowerShell，執行:
pip install fonttools brotli
macOS/Linux:
打開終端機，執行:
pip install fonttools brotli
確認安裝成功:
python -c "import fontTools.subset"
如果沒有顯示錯誤，表示安裝成功。
步驟三: 生成WOFF2子集字體
確保你有以下檔案:
- 原始字體文件 (例如:
NotoSansTC-Regular.otf) - 字符集文件 (
website_chars.txt)
執行子集化命令:
在命令提示字元或終端機中，運行:
python -m fontTools.subset 原始字體檔案.otf --text-file=website_chars.txt --flavor=woff2 --output-file=字體名稱-subset.woff2
例如:
python -m fontTools.subset NotoSansTC-Regular.otf --text-file=website_chars.txt --flavor=woff2 --output-file=NotoSansTC-Regular-subset.woff2
這個命令會:
- 讀取原始字體檔案
- 只保留
website_chars.txt中的字符 - 將結果以WOFF2格式保存
注意: 如果原始字體檔案和字符集檔案不在同一目錄，請使用完整路徑。
步驟四: 在網站中實現
現在你有了優化後的字體檔案，接下來將它應用到你的網站:
-
上傳字體檔案: 將生成的
*.woff2檔案上傳到你的網站伺服器 -
添加CSS代碼: 在你的CSS檔案或HTML的
<head>區塊中添加以下代碼:
@font-face {
font-family: 'Custom Font Name';
src: url('path/to/your-font-subset.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* 使用字體 */
body {
font-family: 'Custom Font Name', sans-serif;
}
將'Custom Font Name'替換為你想使用的字體名稱，path/to/your-font-subset.woff2替換為你上傳的字體檔案路徑。
如果你有多種字重(粗體、細體等)，需要為每種字重創建子集並添加相應的CSS:
@font-face {
font-family: 'Custom Font Name';
src: url('path/to/your-font-regular-subset.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Custom Font Name';
src: url('path/to/your-font-bold-subset.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
故障排除
找不到檔案
如果遇到FileNotFoundError錯誤，請確認:
- 檔案名稱是否正確(包括大小寫)
- 檔案是否與腳本在同一目錄
- 如果不在同一目錄，請使用完整路徑
在Windows中運行命令時的文件路徑範例:
python -m fontTools.subset "C:\Path\To\Font.otf" --text-file="C:\Path\To\website_chars.txt" --flavor=woff2 --output-file="C:\Path\To\Output.woff2"
Windows和WSL路徑問題
如果你在Windows Subsystem for Linux (WSL)中運行腳本，但檔案在Windows路徑中，需要使用/mnt/前綴:
python -m fontTools.subset /mnt/c/Path/To/Font.otf --text-file=/mnt/c/Path/To/website_chars.txt --flavor=woff2 --output-file=/mnt/c/Path/To/Output.woff2
字體顯示問題
如果網站上有字符顯示為方塊或默認字體:
- 檢查這些字符是否包含在你的
website_chars.txt中 - 確認網頁HTML的編碼是UTF-8:
<meta charset="UTF-8"> - 檢查CSS中的字體名稱是否與
@font-face中定義的相同
進階技巧與最佳實踐
1. 字體預加載
對於關鍵字體資源，使用preload可以提前開始加載:
<link rel="preload" href="path/to/your-font-subset.woff2" as="font" type="font/woff2" crossorigin>
2. 優化字體顯示策略
font-display屬性控制字體加載時的顯示行為:
@font-face {
/* ... 其他屬性 ... */
font-display: swap; /* 立即使用系統字體，字體加載完成後替換 */
}
其他可用值:
block: 短暫隱藏文字直到字體加載完成(閃爍較少但有空白期)fallback: 短暫使用系統字體，如果字體加載太慢則不替換optional: 由瀏覽器決定是否替換(適合非關鍵字體)
3. 針對不同頁面創建不同子集
對於大型網站，可以考慮:
- 為首頁創建一個小型子集，只包含UI元素字符
- 為內容頁面創建較大的子集
- 使用JavaScript動態加載字體
4. 定期更新字符集
當網站內容更新時，重新運行爬蟲腳本收集新字符，並更新字體子集。
常見問題
字體子集化對SEO有什麼影響?
正面影響。Google將頁面速度作為排名因素，子集化可以大幅提升載入速度。
子集化會影響字體版權嗎?
不會。子集化只是對你已獲授權使用的字體進行優化，不改變版權狀態。但請確保你已獲得字體的網頁使用授權。
我可以使用Google Fonts的字體進行子集化嗎?
可以，但Google Fonts已提供自動子集化功能。當使用Google Fonts API時，可以通過&text=參數指定字符:
https://fonts.googleapis.com/css2?family=Noto+Sans+TC&text=你需要的字符
如何查看子集化前後的效果差異?
可以使用Chrome DevTools的Network標籤，對比字體檔案大小和頁面載入時間。一個成功的子集化通常能將中文字體從15-20MB減少到幾百KB。
這份指南旨在幫助網站管理員和開發者輕鬆實現中文字體的子集化，提升網站性能。如果你有任何問題或建議，歡迎討論。記住，網站性能優化是一個持續的過程，字體子集化只是其中的一個重要環節。
祝您的網站越來越快!