如何設定 CSS，讓您的網頁在 Windows 與 Mac 都能顯示楷書
今天在設計網頁時，遇到一個小問題：有個網頁的「抬頭」（Title），我希望用「楷書」來呈現，好讓它與其它區塊有所視覺上的區隔。雖然有人說「楷書只適合印刷用，電腦上看楷書都會糊糊的，不舒服」，但我試過好幾種手法，還是覺得那個文章標題用「楷書」來呈現，最漂亮、最得我心。加上它是標題，使用 48 點字，應該不會有看起來糊糊的缺點。所以就著手做了。
眾所周知，網頁中要讓某一段文字變成標楷體，可以使用 CSS 中的「font-family」屬性指定。如下所示：
HTML 部份：
CSS 部份：
.my-style {
font-size: 48px;
font-family: "標楷體";
text-align:center;
}
就會做出「置中、48 點字、標楷體」的字樣來。但若對方使用的瀏覽器，執行於國別設定不為「中文（繁體，台灣）」的話，它就會用英文名稱抓字型，必須設定成：
font-family: "標楷體", DFKai-sb;
若你把這樣的網頁放到 Mac 上去執行時，Mac 的標楷體名稱叫做「BiauKai」，所以還得補上「BiauKai」，才能讓 Mac 下也看得到標楷體：
font-family: "標楷體", DFKai-sb, BiauKai;
至於我個人最愛的 Linux，我還沒找到方法。由於我用 Linux 是為了寫程式，所以故意灌成英文版。若有人能依照上述方法，找到 Linux 內建標楷體的字型名稱（有嗎？XD），麻煩您提供一下，不勝感激！
本篇參考資料：
[CSS] 網頁字體： http://kuoe0.ch/1110/css-web-font/
CSS -- 中英文字型家族相關整理： http://blog.kkbruce.net/2010/11/blog-post_23.html
dfkai-sb字體 在 [字型] 集眾人之力確認正確的標楷體版本- 看板MAC 的推薦與評價
標楷體是陳年老問題，
我個人在 Mavericks～El Capitan 的 Office 2011 for Mac 中，
用過抓來的「Windows 正常版 DFKai-SB」，
有解決問題
（當時確實都要從 Menubar「字型」選單勾選 DFKai-SB，才用得了，
不然都無法顯示出標楷體字型）
升到 Big Sur + Office 2019（365 版）後，
Biaukai 好像比較正常了，系統似乎選用了新版的標楷體，
而不是我以前自己從論壇找到的 Win 版標楷體；
從 Ribbon 面板上選擇 Biaukai 後確實能顯示一個像是標楷體的樣子。
但最近像 #1WK5qf67 這串的討論，
也讓我警覺還是要小心跨平台通用的問題，
而且也擔心我手上的標楷體會不會其實又有問題了。
（因為疫期，業務量減少，
暫時比較少跟同事確認檔案的標楷體交換到 Win 以後，有沒有什麼不相容）
我在想一個方法，讓大家可以更明確地瞭解自己手上的標楷體到底正不正常呢。
比如大家確認一下，自己使用上是正常，還是有狀況，
然後去「字體簿」裡，check 一下裡面所裝的標楷體有幾套、
啟用哪個版本、版號為何，大家來交換一下資訊，
最後再歸納出，哪個版本會有問題、哪個版本不要用、
哪個版本才是最理想的跨平台相容選擇。
臺灣 Mac 眾真的需要終結「標楷體之亂」啊……
我把自己的「字體簿」擷圖如下：
看起來，我啟用的版本是 13.0d1e2，（我暫時還沒有按「解決字型衝突」）
而且安裝的路徑是 /System/Library/AssetsV2/... 那一長串，
所以這個好像是 macOS 內建的？
但我目前暫時無法分享跨系統交換的相容性（如前所述），
所以要拜託大家分享看看這版會不會造成災情。
然後，我還有兩版標楷體，它們是我以前就裝在 /Library/Fonts 的，
隨著時光機帶上來新電腦的，
其中 kaiu.ttf 這個，3.00 版、日期很古老，
我印象中它就是我一直用過的「Win 版 DFKai-SB」；
還有一個 BiauKai.ttf，6.1d3e1 版號的，
這個我記得就是舊版 Office for Mac 所裝的，然後舊版 Office 裡會有問題的。
不知道大家所用的「正常（好）」標楷體，
或「不行的標楷體」，分別是什麼版號呢？
真的拜託大家多多分享資料以便彙整比較。
如果資訊足夠的話，我規劃整理初步結論 po 到自己的部落格上，
或是 GitHub 或 Gist 之類的空間，
讓以後大家都有跡可循。謝謝大家！
--
【愛灣語 Aiuanyu】關懷臺灣語言現在未來的轉播站
https://www.facebook.com/Aiuanyu
【Taigi123】汝个臺語小學堂 https://taigi123.ga/
【Hakka123】摎你共下來講客 https://hakka123.ga/
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.134.29.16 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/MAC/M.1626687364.A.EBD.html
... <看更多>