CSS SANS 日本團隊以純 CSS 語法打造英文字型，開放原始碼免費下載

如果提到 CSS，你會想到什麼呢？一般來說，階層式樣式表通常用來為結構化文件（例如 HTML、XML）加入樣式，當我們在瀏覽網頁時，包括內容顏色、字型和排版等看得到的顯示特性皆為 CSS 範疇，但你知道嗎？國外有許多技術高手，還會利用 CSS 來畫圖，聽起來很神奇，密密麻麻的程式碼也可以繪製出美麗圖案，最近有日本設計師以 CSS 打造出一套純 CSS 英文字型，開放給所有使用者免費下載。

CSS SANS 是一套單純以 CSS 程式碼來設計的字型，包含 A 到 Z 的所有英文字母（不過沒有小寫），這套字型設計精簡、可透過程式碼來直接顯示，更重要的是它也紀錄了網頁發展演進歷史，從網站 Archive 頁面可以發現當 CSS SANS 被用於古老的瀏覽器上，字元是沒辦法正確顯示的，因為當時瀏覽器並不支援一些現今的 CSS 語法。

至今 CSS 已經發展到 CSS3，而且被多數主流瀏覽器支援，在運用上也更有彈性、能做出更多變化，如果你也喜歡 Pure CSS Design，不妨到 CSS SANS 來看看這個日本團隊是如何以純 CSS 打造這麼一套字體，專案採開放原始碼，同時也把 CSS SANS 轉為 .ttf、.otf 字型檔提供給需要的使用者下載。

網站名稱：CSS SANS
網站鏈結：https://yusugomori.com/projects/css-sans/

使用教學

STEP 1

CSS SANS 在 Fonts 頁面列出所有 A 到 Z 英文字母的 CSS 語法。

將滑鼠游標移動到 CSS 語法上方，還會標記這段語法主要是建構字元符號的那一部份，對於想要學習 CSS 設計的朋友來說是個不錯的教材。

STEP 2

從網頁的 Archive 頁面可以看到，當 CSS SANS 在不同瀏覽器使用時，也會呈現出稍有差異的效果，不過當用於現今主流的瀏覽器時，CSS SANS 都能夠很正確顯示。

STEP 3

最後開啟 Download 頁面，就能將 CSS SANS 的原始碼（Source Code）打包下載，網站也提供了簡易的使用範例。別忘了頁面下方還有 CSS SANS Font Kit，如果你想在一些文書編輯或繪圖軟體上使用 CSS SANS 字型，可以下載字型包來進行安裝。

想在 Google 搜尋優先看到免費資源網的內容？

加入 Google 偏好來源