對中文網頁來說，CSS 字型設定一直是個麻煩的問題，想直接載入字型檔案容量太大，拖慢網頁速度、耗費過多流量，通常會使用網頁字型解決，像是 Google Fonts 和 Adobe Fonts（以前叫作 Typekit）就有提供思源黑體和思源宋體等中文網頁字型，只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用，讓網頁的中文部分更易於閱讀，設計看起來也更有質感。
CSS
Taiwan Icon Font 屬於台灣的免費圖示，收錄台北101、珍珠奶茶等圖案
Hexometer Website Analyzer 分析網站使用那些第三方服務或工具（Chrome、Firefox）
通常一個網站背後是由許多的技術和服務組成，舉例來說，使用 WordPress 做為內容管理系統，再以 Cloudflare 加速並保護網站、對圖片進行分流，透過 Google Analytics 分析流量等資訊，搭配 Google AdSense 和 Google DFP 管理廣告和營利等等，雖然可以直接從原始碼得知網站可能使用那些技術，但也有更快速的查詢工具，像是 SimilarTech 和 WhatRuns 都能立即顯示某個網站使用的第三方服務或程式庫。
Line Awesome 超過 4000 個免費線稿圖示，修改自知名 Font Awesome
如果說到最知名的免費圖示字型（Icons Font），我想大家一定聽過 Font Awesome，這套圖示最初發佈於 2012 年，現今則由 1,544 個圖案組成，主要分為免費、開放原始碼和付費 Pro 圖示兩大類型，在使用 Font Scripts 網站中佔有 20% 市佔率，可以想見我們看到的很多圖案可能都是來自它。若要使用這套圖示，除了直接從官方網站或 GitHub 下載整套圖示集，亦可透過開放式內容傳遞網路提供的鏈結載入相關圖案。
CSSgram 以 CSS 和 Sass 編寫而成 Instagram 濾鏡效果
Freebies.ByPeople 各種免費素材集散地，設計師開發人員必須收藏
免費資源網路社群本身已經是一個收錄超過六千篇文章的免費資源網站，因此我就比較少介紹同類型的服務，不過網路上確實有不少類似網站，例如 Evernote Design 設計師必備懶人包就在單一網站上整合各種設計相關素材資源；或是 The Stocks 精選免費圖庫，一站收錄更方便搜尋等等，這些集合式免費資源都非常值得加入書籤以備不時之需。
Darkmode.js 為網站加入深色模式，只要一段程式碼就能實現
macOS 10.14 Mojave 加入全新「深色模式」功能，iOS 13 預告也會加入此模式，如果你曾經將電腦切換為深色，應該會發現有些應用程式可完美支援，也會一併轉為暗色介面，但在不支援深色模式的應用程式表現出來的顏色會更刺眼，嚴重影響到使用體驗。如果你是應用程式開發者，可能後續都得再加上對於深色模式的支援，讓顏色更接近暗色，亦可在使用者選擇不同模式時自動調整為最合適的配色效果。
CSSFX 最美的 CSS 動態效果一鍵複製，提升使用者操作體驗
前陣子介紹過「CSSeffectsSnippets 收錄 CSS 動態效果，線上預覽一鍵複製程式碼」這個很有趣的網站，事實上現今 CSS 樣式表可以做的事越來越多，甚至透過幾段原始碼達到動態效果，看起來不僅互動性高，還能提升使用者體驗，完全不用額外載入其他的 JavaScript 程式庫，只不過這些原始碼不一定每個人都會寫，利用 CSSeffectsSnippets 網站直接線上預覽，找到需要的動態效果後就會給出相關 CSS 原始碼（和早期在學習做網頁很像）。