css

text2voice.cc 是一款基於微軟 Edge TTS（Neural 語音合成）技術開發的免費線上 TTS 服務。實際上，它的核心是透過 WebSocket 直連微軟的語音合成服務，讓合成出來的聲音相當接近真人說話的自然感，而不是那種機械感很重的傳統 TTS。

根據官網的介紹，這個工具目前提供兩組語音引擎備援機制：主要使用 Microsoft Edge TTS，當服務無法使用時，會自動切換到瀏覽器內建的 Web Speech API，確保使用者在大多數情況下都能正常使用。整個工具以純前端技術（HTML5、CSS3、原生 JavaScript）建構，不需要後端伺服器，對資料隱私也相對友善。

Weather Icons 是一套可商用的免費圖示集，專為提供與天氣、海事及氣象相關的圖示設計。此圖示集提供 SVG 和 Icon Font 兩種檔案格式，讓使用者依需求選擇使用。圖示類型豐富，包括白天 (Daytime)、夜晚 (Nighttime)、中性 (Neutral)、其他 (Miscellaneous)、月相 (Moon Phases)、時間 (Time)、方向箭頭 (Directional Arrows)、風速等級 (Beaufort Wind Scale)、風向 (Wind Cardinal) 及風度數 (Wind Degree) 等多種天氣圖示。Weather Icons 提供了現成的 CSS，並且能輕鬆整合至 Bootstrap 開發環境，讓開發者可以快速套用圖示。此外，該圖示集的圖示部分採用了 SIL Open Font License 授權，而程式碼則採用 MIT License 授權，這表示無論是個人或商業項目都可自由使用該圖示集中的 200 多個圖示，完全沒有授權限制。

Uiverse 是一個匯集數千個由 CSS 或 Tailwind 精心設計的網頁元件線上工具。從 Buttons、Checkboxes、Toggle Switches、Cards、Loaders、Inputs、Radio Buttons、Forms、Patterns 到 Tooltips，涵蓋了網頁設計中常見的各種元件。每個元件都提供 HTML 和 CSS 原始碼，讓使用者輕鬆取得並直接應用於網頁。Uiverse 不僅提供了線上範例，讓使用者快速預覽效果，還具有社群驅動的特點，所有的 UI 元素都由熱衷的社群成員貢獻製作。這些元件完全免費，並以開放原始碼的形式提供，可在個人和商業項目中自由使用。這個資源庫為設計師和開發者提供了極具靈感的創意空間，讓網頁元素的選擇變得更加豐富多樣。

UI Colors 是一個免費的線上工具，專為提供色彩搭配整體解決方案而設計。使用者只需任選一種顏色，就能以該顏色為基準，自動生成前後搭配的數十種相輔相成的顏色，並將這些顏色組合成一個用色範例，讓使用者可以預覽該顏色在網頁設計中的搭配效果。UI Colors 可為產出的顏色提供適用於 Tailwind、CSS、SCSS 及 SVG 所使用的 HEX、OKLCH、HSL、RGB 及 Figma 顏色碼。使用 UI Colors 無須註冊，但若註冊後，可方便儲存所編輯的顏色，以供未來參考之用。

UI Buttons 是個為網頁提供各種可與使用者互動按鈕的網站，每個按鈕範例均有實例展示，遇到合適的還可以直接複製其提供的 HTML 及 CSS 語法，貼到網頁想要使用的位置即可，相當方便，即便是不用，也可以從中學習 CSS 語法，增加自己排版功力。

Transform tools 是一個免費的線上工具，專為轉換用於網頁開發與數據描述格式而設計。例如將 SVG 轉成 JSX、HTML 轉成 JSX、JSON 轉成 TypeScript 或是 JSON 轉 MySQL 及 CSS 轉 TailwindCSS 等。Transform tools 平台目前可以對 SVG、HTML、JSON、JSON Schema、CSS、JavaScript、GraphQL、JSON-LD、TypeScript、Flow 及其他，例如 Markdown to HTML 等。每種主要格式可轉換的格式各有不同，例如：JSON 格式可轉出一個 Create table 的 MySQL Script，免除還要手動的改寫的麻煩。

現在許多網頁都提供了明亮與黑暗主題的切換功能，這能夠讓使用者享受更佳的瀏覽體驗。如果也想在自家網頁中加入此功能，但又不想花費大量時間重新設計與實現 Dark Mode 切換，那麼可以考慮使用 Theme Toggles。Theme Toggles 是一個提供 Dark Mode 切換範本程式碼的網站，每個範例都可直接操作，如果覺得適合，使用者可以輕鬆將所需的 HTML 語法和 React 程式碼複製到自家網站中使用。Theme Toggles 是一個開放原始碼項目，適用於各種 CSS 框架，例如 Tailwindcss，所有範例均已模組化，可根據不同的需求進行客製化。透過 Theme Toggles，讓網站添加 Dark Mode 切換功能將變得更加輕鬆和便捷。

Material Symbols & Icons 是一套由 Google Fonts 所推出的圖示字型，將超過 3,216 個字形整合到一個字體檔案中，並具有多種設計變體。每種圖示都提供 Outlined、Rounded 及 Sharp 三種樣式以及 Fill、Weight、Grade 及 Optical Size 四種可調節的可變字體樣式，並讓使用者自行選擇要以字型或是 SVG、PNG 圖檔格式下載。使用者可以在線上自行操作設定圖示並複製所提供的 CSS 及 HTML Code，輕鬆將其應用到自己的 Wwb、Android 或是 iOS 專案中。此外，該圖示套件還支援 Figma Plugin，在 Figma 中輕鬆使用。Material Symbols & Icons 採 Apache license 授權，這表示不論是個人還是商業使用均可。

Live CSS Tester 是個免費的瀏覽器擴充功能，使用方式非常簡單，只要到達要測試的網站後，開啟 Live CSS Tester 的 CSS 編輯器，輸入 CSS 語法，就能將該段 CSS 語法注入到該網頁中，即時呈現該段 CSS 對網頁所帶來的效果與影響。Live CSS Tester 提供程式碼提示和程式碼完成功能，輔助用戶輸入 CSS 語法。

Icongo 是一個匯集超過 7萬個 SVG Icon 的線上平台，它集結了包括 Ant Design Icons、Boxicons、CSS.gg、Devicons、Eva Icons 等超過 70個開放原始碼的免費 Icon 資源網站。使用者不僅可以透過關鍵字輕鬆搜尋所需的 Icon，還能在 Icongo 網站上直接瀏覽各開放原始碼網站提供的 SVG Icon。此外，Icongo 提供了方便的預覽和下載功能，每個 Icon 集都可生成獨立的npm檔案供使用，同時也支援轉換為 React 元件。圖示採用 MIT 許可證，允許自由修改並可免費用於商業目的。對於仍在尋找全面且開放的 SVG Icon 資源的使用者來說，Icongo 絕對是一個不可錯過的平台。

Free HTML 404 page templates 是個免費提供 404頁面模板的網站，使用方式很簡便，只需在網站上瀏覽並選擇自己喜歡的模板，就可以使用 CodePen 進行預覽並可以根據自己的需求，修改模板的顏色、字體、圖像等元素，以便與自己的網站風格相匹配。一旦滿意了修改後的模板，只需複制所需的 HTML、CSS 及 Javascript 語法，然後將其貼到網站中相應的 404 頁面即可。

Font Finder & Style Detector( 網頁字型搜尋與樣式偵測器 ) 是一個瀏覽器擴充功能，所以 Edge 及 Chrome 都可以安裝使用，其採用先進的字體識別技術，只要將滑鼠輕輕移動到網頁上的任何文字，就能立刻顯示出字體的詳細資訊。不僅完全免費使用，更支援全球所有網站，讓你秒變字體、CSS 樣式偵探！