系列文章
DAY 21｜FontKit (1)：字型拆包套件
對於任何一個已經封裝完成，也就是格式為 *.otf 或是 *.woff 的字型來說，想要將其逆向拆包，可以使用 Python 的 fontTools 工具，或是...
DAY 22｜FontKit (2)：CPLR 與 CPAL table
在 昨天的 FontKit 介紹 裡，我們知道許多 Webfont 服務商為了加速字型載入，會將一個字型檔案拆分成多個 subset font，並透過 unic...
DAY 23｜Color Picker：使用者自定義
在昨天的文章裡，我們透過 FontKit 拆解 Noto Color Emoji，從 CPAL table 得知，小海豚 🐬 由四個顏色所組成的。而在今天，我們...
DAY 24｜Emoji Mart：讓使用者挑喜歡的 Emoji
在昨天的 有趣的實驗 裡，我們測試了老朋友 🐬 在 Noto Color Emoji 上的可能性，除了讓使用者能自由的選色之外，也應該要可以讓使用者選擇想要的...
DAY 25｜將文字轉成圖片吧！
對於渲染引擎而言，不論我們如何用 override-colors 的方式調整 Color Font 的顏色，顯示的都是「字」，在記憶體裡面儲存的其實是該字符的「...
DAY 26｜功能需求與檢討
有了前面好幾天的 domain knowledge 補充和實驗之後，在今天，我們要來規劃使用者流程與功能。一但決定之後，就是熬夜寫 code 的任務啦。 TL;...
DAY 27｜網頁切版與介面設計
前面我們一直都在介紹 OpenType 的 AFDKO 和 javascript 上的 FontKit 解法，不過既然我們要做一個網頁嘛...那就需要有前端的畫...
DAY 28｜網站上線前夕該注意的事
在 local 端設計好網頁、測試好功能之後，我們接下來就要把網站上線到 WWW 了！ 對於一些比較複雜、需要前後端分離的網站來說，可能會需要再 AWS / G...
DAY 29｜總複習：從電腦如何儲存一個字，到電腦如何顯示一個字
終於，到了系列文的尾聲～在 demo 最終結果之前，先來複習一下這一個月以來提到的要點們——「字」是怎麼被電腦讀取、並且顯示出來的？ 以輸入 A好耶🥹 這四個字...
DAY 30｜Present & Ending
事不宜遲，讓我們直接來看最後的成果。 介面設計 在 DAY 27 時，我們設想的版型相對簡單，只是一個三欄三列的網格，所以在時間有限的情況下，我直接用 Boot...