Slogan Word 開源文字排版工具：把一句話排成直排文字圖

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

2026-10-07 這天，我在自己電腦上把 Slogan Word 這套開源文字排版工具完整跑了一遍：從 GitHub 把原始碼 clone 下來、裝好相依套件、啟動本機伺服器、打字、切直排、按匯出，全部流程走完不到五分鐘。工具本身活得好好的，但它的官方網站 slogan.ishell.online 已經連不上，網域名稱查詢連一筆紀錄都不剩；更關鍵的發現在打開頁面後一分鐘內就出現：畫面上那排字型選單總共十四個選項，實際能用的字型數量是零。

先講判斷。這是一個 2024 年 7 月用八天寫完、之後就凍結的小工具，價值核心有兩塊：一是把一段文字排成橫排或直排、配上純色漸層或背景圖、輸出成 PNG 圖檔的編輯器本體；二是選單上那十四款中文字型。自架之後你會發現編輯器這一塊真的能用，橫排出圖乾淨俐落；字型那一塊則全掛在開發者自己的私人 CDN 上，那個網域跟官網一起消失了，所以現在十四個選項全部靜默退化成你電腦裡的預設字型。直排是它對中文使用者最大的賣點，預覽畫面正確無誤，但按下匯出後字元會在圖片裡散開。這三件事都有解或可繞，細節後面逐段展開。

官網死了，原始碼還在

Slogan Word 的來歷可以用三個時間點講完。2024 年 7 月 24 日，開發者用 Cloudflare 的專案範本起了一個新倉庫 PandaBearLab/slogan，第一天就把所見即所得編輯與圖片匯出做完；7 月 31 日最後一個 commit「add more fonts」推上線，之後再沒有新的提交，整個開發期前後八天、二十個 commit。網際網路檔案館（Internet Archive）對 slogan.ishell.online 的收錄從 2024 年 7 月 25 日就開始，一路延續到今年。然後是現在：slogan.ishell.online 與字型所在的 cdn.ishell.online 兩個網域的 DNS 查詢都只得到「查無此域」的答案，該站的收錄紀錄共有十九次成功擷取，最後一次是 2026 年 3 月 7 日，標題列一樣是 Slogan Word。換句話說，這個站至少活到今年三月，消失發生在最近七個月內。

倉庫本身倒是活得健康。76 顆星、14 個 fork、一則懸著沒人理會的 issue 都還在 GitHub 上，任何人都能 clone。有個細節可以證明線上版與原始碼完全同步：我在本機執行正式打包，產出的 JavaScript 檔名是 index-CHDWNxXN.js，與存檔服務三月擷取紀錄裡網站實際載入的檔名一字不差。當年部署的就是最後一版，沒有藏著沒公開的秘密版本。

順帶一提它的文件狀態：README 是 Vite 腳架的預設模板原文，一行都沒改，內容還在教你「這個模板幫你用 Vue 3 上手」。對照之下，開發者倒是留了聯絡方式，頁面底部有個 Contact Information 卡片，放著一張大頭貼與 X 帳號 mrbear1024，倉庫擁有者 PandaBearLab 與個人帳號同一天建立。工具能自架、作者找得到人，這兩點對後面要講的授權問題有些影響。

三個指令在本機把它跑起來

自架流程比想像中短。裝好 Node.js 之後，三個指令搞定：

git clone https://github.com/PandaBearLab/slogan.git
cd slogan && npm install
npm run dev

相依套件只有兩個正式依賴：Vue 3.4 與把畫面轉成圖片的 html2canvas 1.4.1，其餘都是開發工具。開發伺服器約 1.2 秒就能啟動，瀏覽器打開 localhost:5173 就是完整介面，這段流程在 macOS 搭配 Node 20 的環境實測過；兩個正式依賴都是跨平台的純 JavaScript，Windows 與 Linux 理論上相同，但我只實測了 macOS。要正式打包也行，npm run build 在我這台機器花了 608 毫秒，產出約 270 KB 的 JavaScript 與 14 KB 的樣式檔，丟到任何靜態主機都能跑。倉庫裡還留著 wrangler pages deploy 的部署腳本，說明當年就是部署在 Cloudflare Pages 上，這條路現在照樣走得通。

介面長相很單純：左邊是控制面板，字體大小、文字顏色、字型、對齊方式、行間距、文字方向（橫向或縱向）、背景類型（純色、漸變色、圖片）、輸出寬高，加一個輸入框；右邊是即時預覽區，可以拉邊條改尺寸。全部標籤是簡體中文，下載與重設兩個按鈕、輸入框的提示文字都是，介面沒有繁中與英文版本，這一點得先有心理準備。文中引述的介面文字一律轉寫成繁體。

Pin

隱私面倒是乾淨得少見。整個工具是純前端應用，你打的字、上傳的背景圖全部留在瀏覽器裡，背景圖走的是本機檔案讀取轉成內嵌資料，全程沒有任何一個請求把你的文字送到伺服器。實測時 network 記錄裡對外請求只有一類，就是等一下要講的字型檔。要放還沒公開的文案或活動字卡，這點讓人放心。同樣難得的是整份原始碼裡沒有任何統計或廣告追蹤碼，index.html 不載第三方腳本，元件裡也沒有埋分析呼叫，自架等於拿到一個完全不打報告的編輯器。當年的線上版曾被 Cloudflare Pages 平台自動注入一枚統計 beacon，那不在原始碼裡，自架版不會有。

十四個字型選項，打開來全是空的

自架完成、頁面打開，第一眼看不出任何問題：字型下拉選單整整齊齊列了十四款中文字型，從明朝體、楷體到黑體都有。問題要打開瀏覽器的開發者工具才會現形：主控台裡躺著紅字錯誤，網路紀錄裡第一筆字型請求，預設的匯文明朝體，就失敗了，接著每換一款字型再添一筆失敗紀錄，錯誤碼全是 ERR_NAME_NOT_RESOLVED，請求目標都是 cdn.ishell.online。

翻開原始碼就知道原因。樣式檔 src/assets/main.css 裡定義了十九組 @font-face 字型規則，每一組的字型檔來源都指向 https://cdn.ishell.online/pubic/ 這個網址，副路徑還拼錯了，public 寫成 pubic。這是開發者自己的網域，跟官網同一個命運：DNS 紀錄已經不存在。瀏覽器抓不到字型檔，於是全部靜默退換，預設的明朝體選項退成系統的襯線字，黑體選項退成系統的無襯線字，畫面上什麼錯誤提示都不會出現。你以為自己在用十四款字型，實際上一款都沒載入。

原始碼裡還有一層更有意思的帳目對不上。比對 @font-face 定義與下拉選單的選項值，會發現 CSS 裡載了五款字型是選單永遠選不到的：全字庫簡文楷體、包圓小白體、調英風格體、麻手鋒黑體、手書體（名稱轉寫自原始碼的簡體寫法）。它們存在於樣式檔，卻不在使用中的字型清單裡。原來倉庫裡有個 FontSelector.vue 元件，裡面維護了另一份十六款的字型清單，跟實際接線的清單內容對不上，而這個元件從頭到尾沒有被任何頁面引用，是一份死代碼。也就是說，就算 CDN 還活著，選單與字型庫也是兩本帳，讀者看到的選項跟 CSS 實際準備的字型從來沒對齊過。

選單上寫的粗細，其實是同一個字型檔

字型的帳還沒算完。十四個選項裡有兩對其實是同一個東西：「OPPO Sans 粗體」與「OPPO Sans 超粗體」的選項值一字不差，「思源黑體 極細」與「思源黑體 超粗」也共用同一個字型家族名。這種選單要成立，前提是工具提供粗細控制，讓兩個選項指向同一字型的不同字重檔案。字重指的是同一款字型的胖瘦版本，常見從細體、常規、粗體到特粗，設計師靠它做層次強調。這個介面沒有任何粗細滑桿或選項。

原始碼與實測都印證了這件事。CSS 裡 OPPO Sans 定義了兩個字重檔：OPPOSans-B.ttf 標記為粗體、OPPOSans-H.ttf 標記為 900 字重。我在選單裡分別選「粗體」與「超粗體」，網路紀錄兩次都只抓了 OPPOSans-B.ttf，另一顆更重的字檔連被請求的機會都沒有。思源黑體那對也一樣，極細與超粗共用一個家族名，瀏覽器的字重匹配規則會固定挑中其中一顆。所以這四個選項在畫面上是四行字，實際渲染結果是兩種字型，選單的粗細差異純粹是裝飾。

這不算什麼惡意，更像是八天衝刺裡的倉促：先抄了一份字型清單進來，後來加字型時沒有重新整理選項值。但對使用者的意義很實際：想要真正的粗體或細體，這個工具給不了，你得自己在 CSS 裡補 font-weight 或換字型檔。

直排預覽正常，匯出那一刻散開

直排是這個工具對中文使用者最有價值的功能。把文字方向切到「縱向」，預覽區立刻變成由上到下、從右到左的直欄，每個字端正立著，這是瀏覽器原生 CSS 的功勞：原始碼用的是 writing-mode: vertical-rl 搭配 text-orientation: upright，這組宣告對中文直排的支援很成熟。配上行間距與置中對齊，預覽畫面就是一張像樣的直排文字卡。直排文字在中文場景的用途比想像中多：詩句摘錄、店家招牌文案、活動主視覺的一句話標語，或單純想做一張有古書排版的社群圖片，都吃這個功能。

Pin

問題出在匯出。這個工具把預覽區變成圖片的引擎是 html2canvas 1.4.1，一套老牌的網頁截圖函式庫，而它對 writing-mode 直排模式的支援有已知缺陷。實測結果非常有戲劇性：同一段十一個字的直排文字，預覽整整齊齊，按下下載鈕之後，得到的 PNG 裡只有開頭三個字還疊在直欄上，其後的字元階梯狀錯開，最後幾個字被推到畫布邊緣，看起來像排版爆炸。我重跑了兩次，散開的樣貌一致，屬於穩定重現。對照組也做了：同一段文字切橫向匯出，字距均勻、基線整齊，完全正常。

Pin

Pin

匯出還有兩個小毛病順帶記下。其一，預覽框的圓角邊框會一起進圖，四個角落留著圓角與白色缺口，想要方正滿版的圖得事後裁切，或先把預覽框的圓角樣式移除。其二，下載的檔名固定叫「文字排版.png」，每次匯出都覆蓋同一個名字。解析度倒是給得實在：輸出設定 800×600，得到的是 1600×1200 的 PNG，匯出時內建兩倍取樣，做社群圖片夠用。另外原始碼的匯出函式裡還留著一行 console.log 除錯殘碼，每按一次匯出就印一次，無傷大雅，但看得出收尾的倉促。

所以實務上的用法是：直排排版在預覽區完成後，別按它自己的匯出鈕，直接用作業系統或瀏覽器的截圖工具把預覽區框下來，反而得到正確的直排圖。橫排文字卡則可以安心用內建匯出。

預設字型救得活，其他十三顆要自己找

字型全滅的問題，有一條已驗證的自救路。前面提過的網站存檔服務裡，恰好收錄了預設字型匯文明朝體的檔案 Huiwen_mingchao.woff2，共 8.0 MB。流程是這樣：把檔案從存檔服務抓下來，放進專案的 public/fonts/ 資料夾，然後打開 main.css 找到第一組 @font-face，font-family 引號內的字型名稱保持原樣別動（下拉選單靠這個名稱對到字型），只把 src 那行的來源網址換成本地路徑 /fonts/Huiwen_mingchao.woff2。改完存檔，頁面重新載入，瀏覽器的字型狀態檢查 document.fonts.check 傳 true，預覽區的文字真的變成帶襯線筆畫的明朝體，直排渲染也正常。這條路我完整走過一次，不含下載大檔的時間大約三分鐘。

Pin

要說清楚的是這條路的覆蓋率。存檔服務對那個 CDN 路徑的收藏不完整，十四顆字型檔裡只有匯文明朝體這一顆有存檔，其餘十三顆沒有任何存檔。好在那份清單裡多數是網路上找得到的知名免費中文字型：思源黑體是 Adobe 與 Google 合作的開源字型，OPPO Sans 釋出時就由官方宣告免費商用，賢二體、站酷小薇LOGO體、胡曉波系列也都是設計圈公開分享的字型。願意花時間的話，把每個 family 換成自己取得的字檔、來源指向本地，就能把整個字型庫重建起來；更省事的路是把 @font-face 整組換成 Google Fonts 的繁中字型連結，原理相同。

重置鈕、沒人答的 issue，與一個停在原地的專案

用一輪之後還會撞到幾個小坑。最大的一個是重置設定按鈕：它把各項設定還原的方式是寫死一組數值，但那組數值跟初始狀態對不上。字型被還原成一個叫 Huiwen Mingchao 的羅馬拼音名，這個名稱不在選單十四個選項裡，於是下拉選單直接變成空白，連選了什麼都看不到；對齊方式被設成「左」，而工具初始值是「置中」。重置按完，你拿到的不是起點，是一個比起點更糟的狀態，得手動再把字型與對齊點一遍。

輸入框的邏輯也有縫。字體大小欄位標了最小 12、最大 72，但那只是 HTML 標籤屬性，瀏覽器不擋、程式也不驗，我直接輸入 200，預覽區立刻用 200px 的字渲染，想做海報級大字反而方便。真正的硬限制在別處：文字只能靠對齊方式與輸出尺寸定位，沒有任意拖放或座標定位，文字永遠從畫布中央那一套對齊邏輯排。這正是倉庫裡唯一一則 issue 討論的東西：2024 年 8 月 28 日有人留言希望支援調整文字位置，兩年過去，零答覆，零實作。搭配背景圖使用時這個限制最明顯，字的位置壓不到你想要的地方。

專案的維護狀態因此不難判斷：二十個 commit 播完八天就停，唯一一則功能請求晾了兩年，README 維持腳架預設。好消息是整個專案的程式量極小，核心元件 TextFormatter.vue 一個檔案 18 KB，全部讀完不用一小時，任何會 Vue 的人都能接手改。

沒有授權條款的「開源」要怎麼看待

接下來這件事對商業用途的人最重要：整個倉庫沒有 LICENSE 檔案，GitHub 的授權偵測結果是 null。原始碼公開在 GitHub 上不等於法律上的開源授權，沒有授權條款的預設效果是著作權法保留所有權利：你自己抓下來跑、改給自己用，實務上沒有人管得著；但如果你把修改版散佈、包進產品商用，嚴格說需要先取得作者同意。介紹文章稱它開源工具，形式上沒錯，但法律上它處於「原始碼可見、授權未授予」的狀態。

這對不同人有不同重量。個人拿來做文字卡、長輩圖、社群圖片，完全不用理會。團隊想拿它的直排程式碼整合進自己的服務，建議先透過倉庫擁有者留下的 X 帳號聯繫作者，或在倉庫發個 issue 問授權意願。以這專案八天的生命週期與 76 顆星的熱度，拿到善意答覆的機率不低，但這是程序問題，不能跳過。

誰該把它撿起來用

整理成一個判斷：如果你的需求是把一段文字快速變成一張圖，而且在乎文字不出自己的電腦，這個工具自架後的編輯體驗是及格的，橫排文字卡開箱即用，輸出兩倍解析度，背景與漸層控制齊全。如果你的核心需求是直排出圖即用，它現在給不了，你得採用預覽加外部截圖的繞法，或等自己改程式。如果你要的是文字位置自由拖放、真正的多字重、繁中介面，這三樣都要自己動手，此時它的價值就只剩一份 18 KB 的直排參考實作。

跟同類工具擺在一起看會更清楚。想把文章變成手寫風格圖片的人，text-to-handwriting 那類專注手寫模擬的工具更對味；想把程式碼截圖變得好看，Chalkist 是現成的選擇；一般螢幕截圖的美化加工，ShotEasy 在瀏覽器裡就能完成；做電子印章或浮水印，站上也有 drawstamp 與 Picseal 的介紹。Slogan Word 在這條光譜上的位置是「直排中文文字卡」這個小眾格點，而且因為官網已死，它同時是這個格點裡少數完全自架、零帳號、零上傳的選項。需要這個格點的人，它值得撿；不需要的人，前面那幾個現成服務省事得多。

最後給一個整體評價：Slogan Word 是一面很好的鏡子，照出「開源」兩個字在小型網頁工具上的實際涵義。編輯器本體是真的開了，字型與線上服務跟著開發者的網域一起消失，匯出品質卡在第三方函式庫的舊缺陷上，授權狀態停在未授予。把它撿起來用的正確姿勢是：當它一份可讀、可改、可自架的直排排版起點，別當它一個開箱完整的產品。