自行架設 Wiki 引擎（二）：變更預設字體

在 Foswiki 上，預設的字體可以從開發者工具中看出，CSS 上的字體設定如下。

1 2 3 4

html body {   font-family: arial,verdana,sans-serif;   font-size: small; }

不過如果要在 Foswiki 上寫一些中英文夾雜的條目，預設的字體其實蠻不好閱讀的！
因此就想要變更 Foswiki 預設使用的網頁字體。

首先想要變更字體，就得先知道有什麼方法可以變更。
稍微透過 Google 翻找了一下 Foswiki 的文件後，看到好像字體的設定是直接透過 CSS 設定的 [1]
同時也看到 CSS 檔預設的存放路徑如下：

1	%PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css

簡單比對了一下瀏覽器的開發者工具看到的 CSS 樣式，以及 style.css 檔案裡的 CSS 樣式
確認了網頁讀到預設的全域樣式是來自 style.css。

接著，關於要使用何種字體，雖然找了一些研究字體的文章（例如 [2]），不過好像沒看到合適的字體
後來突然想到了號稱給程式開發者使用的 YaHei.Consolas 這個自訂字體，結合了英文的 Consolas 字體以及中文的微軟雅黑
我自己用起來覺得看得蠻習慣的，因此就想讓 Foswiki 也用這個字體
不過考慮到不同電腦上不見得有 YaHei.Consolas 字體檔，最理想的方式還是能夠讓網頁自動根據不同語言切換字體。
稍微搜尋了一下之後，還好 CSS3 有支援這樣的功能，而且在這個年代 CSS3 也已經被多數主流瀏覽器支援了！（IE 嘛......略過 XD）
在搜尋過程中，剛好也看到有網友貼出類似的範例 [3]，因此我就借了網友的範例來修改了。

大體上結構都沒有改（要改的話其實我也不太會改 XD），只有把字體名字換掉而已，結果如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

@font-face { 　　font-family: MyCustomFont; 　　src: local(Heiti TC),local("微軟雅黑"); }   @font-face { 　　font-family: MyCustomFont; 　　unicode-range: U0-24f; 　　src: local(Helvetica),local(Consolas); }   @font-face { 　　font-family: MyCustomFont; 　　unicode-range: U3100-312f; 　　src: local(LiHei Pro),local("微軟雅黑"); }   @font-face { 　　font-family: MyCustomFont; 　　unicode-range: U3040-30ff; 　　src: local(Hiragino Kaku Gothic Pro),local(Meiryo); }   html body { 　　font-family: MyCustomFont,arial,verdana,sans-serif; 　　font-size: small; }

CSS 內容順利組成後，因為 style.css 是被壓縮過的檔案，因此也利用了 CSS Shrink 網站來幫忙壓縮上面的 CSS
壓縮的結果如下：

1

@font-face{font-family:MyCustomFont;src:local(Heiti TC),local("微軟雅黑")}@font-face{font-family:MyCustomFont;unicode-range:U0-24f;src:local(Helvetica),local(Consolas)}@font-face{font-family:MyCustomFont;unicode-range:U3100-312f;src:local(LiHei Pro),local("微軟雅黑")}@font-face{font-family:MyCustomFont;unicode-range:U3040-30ff;src:local(Hiragino Kaku Gothic Pro),local(Meiryo)}html body{font-family:MyCustomFont,arial,verdana,sans-serif;font-size:small}

最後把上述內容直接取代掉 style.css 裡面的 html body 區塊即可！
如果是使用 Debian Package 安裝的 Foswiki 的話，style.css 的路徑如下：

1	/var/lib/foswiki/pub/System/PatternSkinTheme/style.css

參考資料：
1、Foswiki: Pattern Skin CSS Cook Book
2、大眾字型學(3)：Word 預設中英搭配有什麼問題？
3、利用 CSS 分別設定中文字、英數、注音、假名的字體：使用 CSS3 @font-face