• 跳至主要導覽
  • 跳至主要內容
  • 跳至主要資訊欄
Ernest Chan watermark

Ernest Chan

Do Or Do Not. There is No Try.

  • WordPress
  • 初創
  • 科技
  • 攝影
    • 天文
    • 長爆光
    • 風景
    • 光圈愛漫遊
你在這裡: 主頁 / WordPress / 思源宋體

思源宋體

2020/02/11 作者: Ernest

思源宋體

字體一直在各式各樣的設計上都扮演非常重要的角色。無論是平面設計還是網站設計,我都對字體非常的著重。平面設計比較簡單,只需要將購買回來或是免費下載的字體安裝好了,就馬上可以使用。

然而,網站的字體就有點不一樣。因為不同的裝置的操作系統不一樣,而每一家公司分別使用的內置字體都不一樣(或者說是都有輕微的區別吧)。所以,一路以來要在不同的裝置上控制版面的格式和外觀都對設計師來講存在著一定的挑戰。直到 Web Font(互聯網字型)的出現。Web Font可以令網站設計者可以在建立HTML檔案時,使用用家沒有安裝於裝置上的字體,而且出來的效果可以比較一致。同時也可以減少使用圖檔,從而減少載入頁面時所花費用家的流量(很多國家不像香港手機用家般幸福,可以不限流量)。

谷歌(Google)在2010推出了Google Fonts,到今時今日已經有超過900款字體提供用戶選擇使用。但是這些字體大部份都是西方文字的字體為主導的,所以有一段長時間,中文的程式或者網站設計師還是需要依靠裝置上本身載有的通用字型(font-family)來選擇到底是用襯線字(serif,又稱「白體」或香港普遍叫「有腳字」)、無襯線字(sans-serif,又稱「黑體」或香港普遍叫「無腳字」)、等寬字等等(monospace)。但是還是有點不確定性,經常會有意料以外的問題出現。

兩大矽谷科技巨人攜手合作

就著這個問題,Google 和 Adobe攜手合作解決了。分別於2015年推出了開源(Open Source)的「思源黑體」(Adobe:Source Sans Pro CJK,Google:Noto Sans)及於2017年推出了「思源宋體」(Adobe:Source Serif Pro CJK,Google:Noto Serif)。

這個工程是在上是非常浩大的,字體的名稱裡面的「CJK」代表著的是Chinese(繁體及簡體中文)、Japanese(日文)及 Korean(韓文)。由於這三個亞洲語言都屬於「象形文字」(Glyphs),總字數高達65,535個。再加上7個字重(font-weight)。總字數一共高達458,745個字。明顯地,這跟英文(26個字母、大小階加起來共52個字母)或是其他西方、希臘、以及拉丁文字的字體都有很大程度上的距離。要完成如此浩瀚的工程,真的非投入大量的資源不成。

思源宋體的各個字重
思源宋體的各個字重
思源宋體各個字重的比較
思源宋體各個字重的比較

另外,思源宋體比起其他襯線字體還有另外一個好處,就是它支援大量的西方字形。因為Google的Noto項目已經存在多年,它對應其他西方語系,例如拉丁字母、希臘字母和斯拉夫字母等,都較其他字體要好,從而提高了設計和觀感的一致性。

這個版本對於多國語言設計人員而言,真的非常重要。這些字體達成了『不再出現豆腐』(No More Tofu) 的目標,這表示在 Unicode 內排版時不會再出現空白字符。
– Sandoll 執行長 Geumho Seok

從審美角度來講,我對「思源宋體」的批評不多,只是對字重比較輕的西方文字的喜好只屬於一般。如果可以選擇及使用別的字體,問題還是不大的。但是如果是一些段落的文字,我則比較喜歡使用「思源黑體」。你們現在瀏覽的這個網站也是用上了「思源黑體」。

而使用上來的時候,我則比較喜歡用比較粗的字重,如:700(Bold)、900(Heavy)等來做標題。我的YouTube頻道《好味道》第二季的縮圖大部份都是用上了思源宋體的900(Heavy)字重。

《好味道》第二季第五十七集 - 龍蝦炒金邊粉 就是用上了「思源宋體」
《好味道》第二季第五十七集 – 「龍蝦炒金邊粉」的縮圖就是用上了「思源宋體」

開源優勢 速度取勝

最後,「思源」系列的字體還有一個特點。「思源黑體」和「思源宋體」由於都是開源的,用戶可在 Typekit 裡面同步字體或嵌入到網站裡面,而且是免費的,即使沒有使用付費的Creative Cloud都可以用到。由於 Adobe 的伺服器和內容傳遞網路(Content Delivery Network)佈滿全球每個角落,字體載入的速度也比其他公司要快。這個也是他們的優勢。

如果想下載到電腦裡面使用的話,也可以直接到 Google 或 GitHub 下載字體檔案然後安裝。

在TypeKit網站選擇所需要的字體和字重
在TypeKit網站選擇所需要的字體和字重
再把代碼嵌入所需要的網站的<head>部分
再把代碼嵌入所需要的網站的<head>部分

其實,除了「思源」系列外,是還有其他的Web Font的。設計也一點都不比「思源」差,甚至可以說是有過之而無不及。但是鑑於種種因素,在工作上我永遠都不會在使用那些字型了。至於原因為何,我則留待下次再和大家分解。

Facebook 留言

分類: WordPress, 科技 標籤: 字型, 字體, 平面設計, 思源宋體, 網頁設計

主要資訊欄

搜尋

近期文章

  • 「果粉」的佳音

    「果粉」的佳音

    2021/09/14
  • Photoshop的「黑科技」新功能 – Neural Filters

    Photoshop的「黑科技」新功能 – Neural Filters

    2021/08/09
  • 建立YouTube頻道前,值得知道的10件事

    建立YouTube頻道前,值得知道的10件事

    2021/06/15
  • 最完美的相機

    最完美的相機

    2021/06/03
  • 拍攝日出日落:曙暮光及手機應用程式

    拍攝日出日落:曙暮光及手機應用程式

    2020/05/05

關於我

 Ernest Chan 陳嘉杰

果粉。黑色控。愛攝影、編程、各類軟件硬件。堅持無時無刻終身學習。認為在網絡年代,沒有學不會的事情,只有有多想做得到。

社交媒體

訂閱電子報

    如有疑問,可以到訪我們的私隱政策頁面了解我們怎麼使用該類資料。
  • This field is for validation purposes and should be left unchanged.

© 2025 · Ernest Chan 版權所有 如欲轉載 請先聯絡