選單

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

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 SANS

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

CSS SANS

STEP 2

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

CSS SANS

STEP 3

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

CSS SANS

分享本文