<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[TwinType Blog]]></title><description><![CDATA[在TwinType Blog這裡有關於字型排印的社群，字體下載、字體分享、排版技巧...等相關知識。]]></description><link>https://blog.twintype.co/</link><image><url>https://blog.twintype.co/content/images/size/w256h256/2025/03/LOGO_I_B_WW.png</url><title>TwinType Blog</title><link>https://blog.twintype.co/</link></image><lastBuildDate>Thu, 01 Oct 2026 17:18:13 GMT</lastBuildDate><atom:link href="https://blog.twintype.co/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[橫跨 20 餘年的造字人生]]></title><description><![CDATA[<p>如果要一個人從零開始製作一套中文字體，光是想想五千多個中文字，就已經讓人頭痛，但在二十多年前，來香港的設計師——阮慶昌（Eddie）真的完成了這件看似不可能的事情。  當時市場上的中文字體，無論從選擇數量或設計風格來看，都遠不如今天豐富。對於一位平面設計工作者而言，字體設計早已經是工作的一部分，但真正能夠拿來使用的中文字體並不多。  他在學生時期開始累積的字體興趣，慢慢變成了一個實際的計畫，而這套字體，就是後來的「硬黑體」。   從書本、字體目錄，到電腦上的第一個字  今天要研究字體，搜尋網路就能找到大量資料，甚至可以在生成是 AI 的輔助下寫出造字軟體的外掛的時代，學習造字並非件難事。  但在九十年代，是完全無法想像的，在那個年代還沒有現在這麼方便的網路資源。想認識不同的字體，只能從設計書籍、字體目錄，甚至早期的刮字與照相植字中慢慢摸索。  Eddie 當時會到書局閱讀英文、日文的設計書，也收集不同植字公司的字款目錄。這些看似不起眼的資料，成為了日後創作的養分。  到了九十年代初期，蘋果電腦開始進入他的工作流程，當時陸續出現 Mac System 7、ChineseTalk、Free</p>]]></description><link>https://blog.twintype.co/journey-of-a-type-designerer-eddie/</link><guid isPermaLink="false">6aa2a8a11bca7a00017a6130</guid><category><![CDATA[設計]]></category><category><![CDATA[TwinType Cloud]]></category><dc:creator><![CDATA[Chloe Wu]]></dc:creator><pubDate>Mon, 28 Sep 2026 09:50:43 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2026/09/-------------1--------10@2x-100.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2026/09/-------------1--------10@2x-100.jpg" alt="橫跨 20 餘年的造字人生"><br><p>如果要一個人從零開始製作一套中文字體，光是想想五千多個中文字，就已經讓人頭痛，但在二十多年前，來香港的設計師——阮慶昌（Eddie）真的完成了這件看似不可能的事情。</p>
<p>當時市場上的中文字體，無論從選擇數量或設計風格來看，都遠不如今天豐富。對於一位平面設計工作者而言，字體設計早已經是工作的一部分，但真正能夠拿來使用的中文字體並不多。</p>
<p>他在學生時期開始累積的字體興趣，慢慢變成了一個實際的計畫，而這套字體，就是後來的「硬黑體」。</p>
<h2 id="%E5%BE%9E%E6%9B%B8%E6%9C%AC%E3%80%81%E5%AD%97%E9%AB%94%E7%9B%AE%E9%8C%84%EF%BC%8C%E5%88%B0%E9%9B%BB%E8%85%A6%E4%B8%8A%E7%9A%84%E7%AC%AC%E4%B8%80%E5%80%8B%E5%AD%97">從書本、字體目錄，到電腦上的第一個字</h2>
<p>今天要研究字體，搜尋網路就能找到大量資料，甚至可以在生成是 AI 的輔助下寫出造字軟體的外掛的時代，學習造字並非件難事。</p>
<p>但在九十年代，是完全無法想像的，在那個年代還沒有現在這麼方便的網路資源。想認識不同的字體，只能從設計書籍、字體目錄，甚至早期的刮字與照相植字中慢慢摸索。</p>
<p>Eddie 當時會到書局閱讀英文、日文的設計書，也收集不同植字公司的字款目錄。這些看似不起眼的資料，成為了日後創作的養分。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/data-src-image-5fbe15ef-b2c0-4258-b2bb-e5e52f1fac84.jpeg" class="kg-image" alt="" loading="lazy" width="1705" height="960" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/data-src-image-5fbe15ef-b2c0-4258-b2bb-e5e52f1fac84.jpeg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/data-src-image-5fbe15ef-b2c0-4258-b2bb-e5e52f1fac84.jpeg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/data-src-image-5fbe15ef-b2c0-4258-b2bb-e5e52f1fac84.jpeg 1600w, https://blog.twintype.co/content/images/2026/09/data-src-image-5fbe15ef-b2c0-4258-b2bb-e5e52f1fac84.jpeg 1705w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">早期字體設計書、字款目錄、刮字或植字資料的整理</span></figcaption></figure>
<p>到了九十年代初期，蘋果電腦開始進入他的工作流程，當時陸續出現 Mac System 7、ChineseTalk、FreeHand，以及現在還有些許人聽過的 Fontographer，電腦開始讓中文字體從傳統的字稿與排版工具，進入可以自己製作的階段。</p>
<h2 id="%E7%82%BA%E4%BB%80%E9%BA%BC%E6%9C%80%E5%BE%8C%E9%81%B8%E6%93%87%E3%80%8C%E7%A1%AC%E9%BB%91%E9%AB%94%E3%80%8D%EF%BC%9F">為什麼最後選擇「硬黑體」？</h2>
<p>其實最初並不是只有一個方案，字型設計在一開始的發想上，總是這麼的美好，有許多想法，但一步步轉化，有時候只是某些風格在少數幾個字好看，發展成一套字體時，就不盡人意。Eddie 從多年累積的草稿中，最後留下了三個方向：硬黑體、柔黑體，以及黑圓體。</p>
<p>柔黑體是在黑體裡加入宋體的特徵，但與當時市場上已有的字型風格較為接近，因此首先被放棄；黑圓體則是在圓體的基礎上加入宋體元素。但最後留下來的，是硬黑體。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/002.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1022" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/002.jpg 1600w, https://blog.twintype.co/content/images/2026/09/002.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">黑圓體與柔黑體樣張</span></figcaption></figure>
<p>選擇硬黑體，一方面是因為當時市場上很難找到相近的中文字體，他的目標明確，要打造一款沒有曲線，剛硬的黑體；另一方面，這樣的設計也比較適合一個人進行長時間的開發。</p>
<p>於是，硬黑體成為第一個真正開始製作的字體。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/g-------------1--------14@2x-100.jpg" class="kg-image" alt="" loading="lazy" width="1816" height="716" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/g-------------1--------14@2x-100.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/g-------------1--------14@2x-100.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/g-------------1--------14@2x-100.jpg 1600w, https://blog.twintype.co/content/images/2026/09/g-------------1--------14@2x-100.jpg 1816w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">硬黑體樣張</span></figcaption></figure>
<h2 id="%E6%93%BA%E5%9C%A8%E8%A8%AD%E8%A8%88%E5%89%8D%E7%9A%84%E5%A4%A7%E5%93%89%E5%95%8F%EF%BC%9F">擺在設計前的大哉問？</h2>
<p>真正開始做字之後，第一個遇到的問題，反而不是設計，而是編碼問題。</p>
<p>當時 Fontographer 4.1 並沒有直接支援大五碼（Big5），使用者需要自行處理字體內碼。因此，在開始畫字之前，必須先弄清楚大五碼到底有哪些字，以及每一個字所對應的編碼。</p>
<p>這在今天看起來可能非常簡單，但在當時，這意味著要自己尋找完整的大五碼資料，再整理成可以使用的字碼表。</p>
<p>那時候的網路還是 56K 撥接時代，幾經艱章才能找到一份可以直接下載的 TXT 大五碼碼表，已經足以解決一個很大的問題。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/g-------------1--------6@2x-100.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1022" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/g-------------1--------6@2x-100.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/g-------------1--------6@2x-100.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/g-------------1--------6@2x-100.jpg 1600w, https://blog.twintype.co/content/images/2026/09/g-------------1--------6@2x-100.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">大五碼字碼表</span></figcaption></figure>
<p>這也讓硬黑體的製作從「設計一套字」開始，變成了一個同時涉及<strong>字體設計、字元編碼與字體製作技術</strong>的長期工程。</p>
<h2 id="%E4%BA%94%E5%8D%83%E5%A4%9A%E5%80%8B%E5%AD%97%EF%BC%8C%E8%A6%81%E6%80%8E%E9%BA%BC%E7%B6%AD%E6%8C%81%E5%90%8C%E4%B8%80%E5%A5%97%E9%AA%A8%E6%9E%B6%EF%BC%9F">五千多個字，要怎麼維持同一套骨架？</h2>
<p>中文字體和英文標題字最大的不同之一，就是字數，英文字母只需要處理有限的基本字元，但中文字體即使只製作常用字，也已經是數千個字。</p>
<p>而且漢字的結構差異非常大，簡單的字可以很容易表現設計特色，但遇到筆畫非常複雜的字，例如「龘」，原本的設計概念就不一定能夠直接套用。</p>
<p>把一個字做好不困難，把一堆字做好，且要看起來仍然屬於同一套字體，就是場夢魘，硬黑體因此必須在非常簡單的視覺語言裡，處理不同漢字結構所帶來的問題。沒有大量裝飾，也沒有複雜的曲線。更多的是透過方正的結構與筆畫關係，讓整套字保持一致。</p>
<h2 id="%E5%9B%9B%E5%B9%B4%E5%85%89%E9%99%B0%EF%BC%8C%E4%BA%94%E5%8D%83%E6%BC%A2%E5%AD%97">四年光陰，五千漢字</h2>
<p>從真正開始繪製，到基本完成大五碼中的五千多個常用字、英文字元與符號，前後花了四年多的時間，這還沒結束，在繪製完成後，才真正進入製作階段。</p>
<p>接下來就需要將設計稿，轉化成電腦中的曲線，字型與圖示不同，還需要多了一個編碼步驟，原本使用 Fontographer 製作，後來隨著 OSX 與 PfaEdit，也就是今天的 FontForge 出現，製作流程又進行了一次轉換。</p>
<p>慶幸的是 FontForge 原生支援大五碼與 Unicode，也因此大幅降低了後續製作上的困難。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/Screenshot-2026-09-28-at-11.51.18---am.png" class="kg-image" alt="" loading="lazy" width="1798" height="1022" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/Screenshot-2026-09-28-at-11.51.18---am.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/Screenshot-2026-09-28-at-11.51.18---am.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/Screenshot-2026-09-28-at-11.51.18---am.png 1600w, https://blog.twintype.co/content/images/2026/09/Screenshot-2026-09-28-at-11.51.18---am.png 1798w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">硬黑體手稿</span></figcaption></figure>
<p>從今天回頭看，這些早期字稿當然還有很多可以修改的地方，事實上，硬黑體推出後，Eddie 又花了半年進行修改。</p>
<h2 id="%E4%BA%94%E5%B9%B4%E4%B9%8B%E5%BE%8C%EF%BC%8C%E7%A1%AC%E9%BB%91%E9%AB%94%E5%87%BA%E7%94%9F%E4%BA%86">五年之後，硬黑體出生了</h2>
<p>經過多次測試，在香港與台灣朋友的協助下，硬黑體 1.0 終於完成。</p>
<p>2002 年七月二十六日，硬黑體正式推出。</p>
<p>從最初的一個念頭，到研究字碼、尋找資料、設計字形、繪製五千多個漢字，再到真正製作成字體，前後超過五年的時間。</p>
<p>圖：2002 年硬黑體首次發布的資料／當年的網站截圖</p>
<h2 id="%E4%BA%8C%E5%8D%81%E5%A4%9A%E5%B9%B4%E5%BE%8C%EF%BC%8C%E5%86%8D%E7%9C%8B%E7%A1%AC%E9%BB%91%E9%AB%94">二十多年後，再看硬黑體</h2>
<p>後來的硬黑體在香港的大街小巷中流串，這事件直得開心的事情，但對於 Eddie 來說卻憂喜參半，隨然用的人多，但真正透過正版管道購入的人卻十分地少，這也意味著無法透過字型設計作為主要收入。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/g-------------1--------8@2x-100.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1022" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/g-------------1--------8@2x-100.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/g-------------1--------8@2x-100.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/g-------------1--------8@2x-100.jpg 1600w, https://blog.twintype.co/content/images/2026/09/g-------------1--------8@2x-100.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">硬黑體真實使用樣張</span></figcaption></figure>
<p>後來的硬黑體又經歷了漫長的重置，剛硬、不加修飾的銳角與筆畫依舊存在，但在重心與筆畫灰度上改進了續多地方。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/jjwef.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="794" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/jjwef.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/jjwef.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/jjwef.jpg 1600w, https://blog.twintype.co/content/images/2026/09/jjwef.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">硬黑體 1.0 與 2.0 比較</span></figcaption></figure>
<h2 id="%E5%87%A1%E6%AE%BA%E4%B8%8D%E6%AD%BB%E6%88%91%E7%9A%84%EF%BC%8C%E5%BF%85%E4%BD%BF%E6%88%91%E6%9B%B4%E5%BC%B7%E5%A4%A7">凡殺不死我的，必使我更強大</h2>
<p>在經歷了種種後，雖然字型設計難以作為主要收入來源，但這並未澆熄 Eddie 對於設計的熱愛，在 20 年後，沉積在內心的想法不斷翻騰。Eddie 希望可以將累積多年的想法復之實踐，但要設計什麼樣的字體呢？</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/000.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/000.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/000.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/000.jpg 1600w, https://blog.twintype.co/content/images/2026/09/000.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Eddie 在這十幾年間還是不斷地嘗試設計與研究新字型</span></figcaption></figure>
<h2 id="%E8%B7%B3%E5%87%BA%E9%BB%91%E3%80%81%E5%AE%8B%E7%9A%84%E7%AF%84%E7%96%87">跳出黑、宋的範疇</h2>
<p>中文字體市場裡「宋、黑、仿、楷」一直都是最熟悉的幾種分類。</p>
<p>它們有各自非常成熟的設計語言，也幾乎構成了我們閱讀中文字的基本樣貌，但如果想在這些分類之外，再尋找一種新的可能呢？</p>
<p>Eddie 在古籍中汲取靈感，在數位字型中發想，想要創造易款融入雕版字型的生動，又相對簡潔的字體風格。</p>
<h2 id="%E7%B0%A1%E6%BD%94%E8%80%8C%E4%B8%8D%E7%B0%A1%E5%96%AE">簡潔而不簡單</h2>
<p>這款新字型，沒有過度誇張的裝飾，也沒有刻意強調某一種書寫風格。</p>
<p>但仔細看每一個筆畫，就會發現這款新字體，沒有傳統明、宋體的末端三角襯線，因其被以一種隱晦且婉約的方式融入其筆畫中，中宮略收，在閱讀時文字自然舒張，卻不宣兵奪主。較粗的字重中，筆畫大膽張揚，顯眼有力。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/09/g-------------1--------9@2x-100.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/g-------------1--------9@2x-100.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/g-------------1--------9@2x-100.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/g-------------1--------9@2x-100.jpg 1600w, https://blog.twintype.co/content/images/2026/09/g-------------1--------9@2x-100.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">娉婷體樣張</span></figcaption></figure>
<h2 id="%E5%BE%9E%E5%85%A7%E6%96%87%E5%AD%97%E9%AB%94%E5%87%BA%E7%99%BC">從內文字體出發</h2>
<p>娉婷體起初非為了作為醒目的標題字而設計，它更大的挑戰，是如何將不同的元素放進中文字體的日常閱讀裡中。</p>
<p>畢竟，中文字數量龐大，字形結構又各不相同。</p>
<p>一個設計如果只在少數幾個字上成立，並不能成為一套真正可以使用的中文字體。</p>
<p>因此，真正重要的是讓方正、書寫、飾線與粗幼變化，在不同漢字結構裡維持一致的視覺語言。</p>
<h2 id="%E6%B5%B7%E7%B4%8D%E7%99%BE%E5%B7%9D%EF%BC%8C%E5%A4%9A%E6%96%B9%E6%B1%B2%E5%8F%96%E9%9D%88%E6%84%9F">海納百川，多方汲取靈感</h2>
<p>如果說黑體提供了清楚直接的結構，宋體帶來了印刷與雕刻的細節，那麼娉婷體想做的，就是在兩者之外找到另一種可能。沒有完全離開傳統，嘗試在熟悉的漢字結構中，加入一些新的線條關係。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2026/09/g-------------1--------12@2x-100.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="711" srcset="https://blog.twintype.co/content/images/size/w600/2026/09/g-------------1--------12@2x-100.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/09/g-------------1--------12@2x-100.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/09/g-------------1--------12@2x-100.jpg 1600w, https://blog.twintype.co/content/images/2026/09/g-------------1--------12@2x-100.jpg 1815w" sizes="(min-width: 720px) 720px"></figure>
<p>也因此，娉婷體並不急著被歸類。如果你正在尋找一款不同於傳統黑體、宋體，又希望保留中文字結構與閱讀性的字體，娉婷體或許會是一個值得嘗試的新選擇。</p>
<p><strong>硬黑體 Hard Gothic Normal</strong></p>
<p>一款幾乎沒有曲線，以方正、直接的結構所構成的中文字體。二十多年前，一個人的造字計畫。今天，繼續被使用。</p>
<p><strong>娉婷體</strong></p>
<p>方正與靈動、簡潔與細節、溫柔與力量。這些看似相反的特質，在娉婷體裡被放在一起。</p>
<p>今天，我們很高興讓這套誕生於二零零二年的硬黑體，與娉婷體，重新上架到TwinType Cloud 中。</p>
<style>
  .twintype-card {
    margin-top:50px;
    width:100%;
    border: 0.6px solid #1a1a1a;
    border-radius: 6px;
    padding: 50px 20px;
    text-align: center;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .twintype-title {
    font-size: 18px;
    color: #000000;
    margin: 0 0 24px 0;
    font-weight: 400;
    letter-spacing: 0.5px;
  }

  .twintype-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .twintype-btn {
    display: inline-block;
    background-color: #005691;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    transition: background-color 0.2s ease;
  }
    .twintype-btn>a {
    color: #ffffff;
  }

  .twintype-btn:hover {
    background-color: #004372;
  }
</style>

<div class="twintype-card">
  <h4 class="twintype-title">透過 TwinType Cloud 立即訂閱並使用字型</h4>
  <div class="twintype-buttons">
    <a href="https://cloud.twintype.co/family/PingTing-TC?ref=blog.twintype.co" class="twintype-btn" target="_blank" rel="noopener noreferrer" style="color:#ffffff;">娉婷體</a>
    <a href="https://cloud.twintype.co/family/HardGothic-TC?ref=blog.twintype.co" class="twintype-btn" target="_blank" rel="noopener noreferrer" style="color:#ffffff;">硬黑體</a>
  </div>
</div>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/2Bp5-t</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/2Bp5-t";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>]]></content:encoded></item><item><title><![CDATA[限動如何換字體 | ZiZi 教學]]></title><description><![CDATA[<p>完整教學指南，快速上手 TwinType Cloud。  instagram內建中文字體較少（基本上中文只會顯示黑體），今天教你如何美化限動，讓限動有用更多字體！   秘密武器：ZiZi 全能限動改造王  ZiZi 是由 TwinType 打造的限動排版工具，支援 Android 與 iOS，內建 20 多款字體，也可自行匯入字體，或是透過 TwinType Cloud 小額訂閱解鎖更多優質字體。  網址如下：  ZiZi|全能限動改造王ZiZi|全能限動改造王：一款專為限時動態與社群分享打造的文字美感工具，致力於讓每個人都能用最簡單的方式，做出乾淨、有質感的畫面。不需要設計背景、不必學習複雜操作，只要輸入文字，就能完成好看的文字。   使用教學   1. 下載並安裝。  2. 開啟後，映入眼簾的是編輯區，可以接文本書寫於此  3. 下方工具列，可調整文字樣式，會及時根據排版調整顯示樣式。  4. 最後一步，只要點選「複製」按鈕，再到 instagram 限動文字區，「貼上」，就完成啦！   ZiZi 文字編輯工具列介紹  由左至右分別為   1. 文字控制項  2. 文字顏色  3.</p>]]></description><link>https://blog.twintype.co/zizi-app-font-tutorial/</link><guid isPermaLink="false">6a196be97c43240001bf81e3</guid><category><![CDATA[TwinType Cloud]]></category><category><![CDATA[ZiZi]]></category><dc:creator><![CDATA[ZiZi 開發團隊]]></dc:creator><pubDate>Fri, 29 May 2026 14:09:49 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2026/05/001.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2026/05/001.jpg" alt="限動如何換字體 | ZiZi 教學"><br><p>完整教學指南，快速上手 TwinType Cloud。</p>
<hr>
<p>instagram內建中文字體較少（基本上中文只會顯示黑體），今天教你如何美化限動，讓限動有用更多字體！</p>
<h2 id="%E7%A7%98%E5%AF%86%E6%AD%A6%E5%99%A8%EF%BC%9Azizi-%E5%85%A8%E8%83%BD%E9%99%90%E5%8B%95%E6%94%B9%E9%80%A0%E7%8E%8B">秘密武器：ZiZi 全能限動改造王</h2>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/002.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/002.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/002.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">ZiZi 官網：</span><a href="https://zizi.twintype.co/?ref=blog.twintype.co"><span style="white-space: pre-wrap;">https://zizi.twintype.co/</span></a></figcaption></figure>
<p>ZiZi 是由 TwinType 打造的限動排版工具，支援 Android 與 iOS，內建 20 多款字體，也可自行匯入字體，或是透過 TwinType Cloud 小額訂閱解鎖更多優質字體。​</p>
<p>網址如下：</p>
<figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://zizi.twintype.co/?ref=blog.twintype.co"><div class="kg-bookmark-content"><div class="kg-bookmark-title">ZiZi|全能限動改造王</div><div class="kg-bookmark-description">ZiZi|全能限動改造王：一款專為限時動態與社群分享打造的文字美感工具，致力於讓每個人都能用最簡單的方式，做出乾淨、有質感的畫面。不需要設計背景、不必學習複雜操作，只要輸入文字，就能完成好看的文字。</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://blog.twintype.co/content/images/icon/icon.png" alt=""></div></div><div class="kg-bookmark-thumbnail"><img src="https://blog.twintype.co/content/images/thumbnail/og_image.jpg" alt="" onerror="this.style.display = &#x27;none&#x27;"></div></a></figure>
<h3 id="%E4%BD%BF%E7%94%A8%E6%95%99%E5%AD%B8">使用教學</h3>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/003.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1125" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/003.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/003.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/003.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/003.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">ZiZi 編輯介面簡單易懂</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/004-1.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/004-1.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/004-1.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/004-1.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/004-1.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">操作方式簡單：只需輸入文字並調整樣式，接著複製，貼上到限動即完成！</span></figcaption></figure>
<ol>
<li>下載並安裝。</li>
<li>開啟後，映入眼簾的是編輯區，可以接文本書寫於此</li>
<li>下方工具列，可調整文字樣式，會及時根據排版調整顯示樣式。</li>
<li>最後一步，只要點選「複製」按鈕，再到 instagram 限動文字區，「貼上」，就完成啦！</li>
</ol>
<h2 id="zizi-%E6%96%87%E5%AD%97%E7%B7%A8%E8%BC%AF%E5%B7%A5%E5%85%B7%E5%88%97%E4%BB%8B%E7%B4%B9">ZiZi 文字編輯工具列介紹</h2>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/005.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1125" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/005.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/005.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/005.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/005.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">編輯 Bar 示意圖</span></figcaption></figure>
<p>由左至右分別為</p>
<ol>
<li>文字控制項</li>
<li>文字顏色</li>
<li>描邊控制項</li>
<li>字體選擇列表</li>
<li>段落樣式</li>
<li>複製按鈕</li>
</ol>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/006-1.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/006-1.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/006-1.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/006-1.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/006-1.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">文字控制項以及文字顏色調整面板</span></figcaption></figure>
<h3 id="%E6%96%87%E5%AD%97%E6%8E%A7%E5%88%B6%E9%A0%85%EF%BC%8C%E5%8F%AF%E4%BB%A5%E8%AA%BF%E6%95%B4%E6%96%87%E5%AD%97%E5%B0%BA%E5%AF%B8%E3%80%81%E9%96%93%E8%B7%9D%E8%88%87%E8%A1%8C%E9%AB%98%E3%80%82">文字控制項，可以調整文字尺寸、間距與行高。</h3>
<p>小提示：如果文字數較多，可以優先選用裝飾性較少的字體，適當提高「行高」有助於閱讀喔！</p>
<h3 id="%E6%96%87%E5%AD%97%E9%A1%8F%E8%89%B2">文字顏色</h3>
<p>文字顏色，有提供多種預設選項，當然也可以自己調整，請填選最末端「+」號按鈕即可自己調配！</p>
<p>小提示：淺色文字，背景會自動轉為深色，不影響實際輸出的樣式喔！</p>
<h3 id="%E6%8F%8F%E9%82%8A%E6%8E%A7%E5%88%B6%E9%A0%85">描邊控制項</h3>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/007.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/007.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/007.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/007.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/007.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">描邊樣式編輯</span></figcaption></figure>
<p>斯斯有兩種，描邊也有。</p>
<ul>
<li>「描邊」會將文字沿文字符輪廓加上邊框，如上圖「提拉米蘇」字樣。</li>
<li>「背景」會將文字框視為整體，在背景加上矩形色塊</li>
</ul>
<p>不論何種描邊，皆可任意更改顏色，但不可同時存在！</p>
<h3 id="%E6%AE%B5%E8%90%BD%E6%A8%A3%E5%BC%8F">段落樣式</h3>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/008.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/008.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/008.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/008.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/008.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">段落樣式說明</span></figcaption></figure>
<p>斯斯有兩種，段落樣式有六種。</p>
<ul>
<li>「靠右對齊」文字靠右邊切齊。</li>
<li>「置中」置中對齊。</li>
<li>「靠左對齊」文字靠左邊切齊。</li>
<li>「靠右且左右切齊」文字靠右邊切齊，但左側同時也會切齊，程式會自動運算擠壓或是加大字元間距（Spacing）。</li>
<li>「垂直 / 縱書」垂直文字樣式，上下皆會自動切齊。</li>
<li>「環形文字」文字沿著圓形排列，啟用該選項後可以回到「文字控制項」選擇角度與方向。</li>
</ul>
<p>小提示：除了「環形文字」外，其餘段落樣式，皆已啟用「<a href="https://bambook-doc.twintype.co/zh-TW/v0.0.4/01-tips.html?ref=blog.twintype.co#%E9%81%BF%E9%A0%AD%E5%B0%BE">避頭尾</a>」。</p>
<h3 id="%E5%AD%97%E9%AB%94%E9%81%B8%E6%93%87">字體選擇</h3>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/009.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/009.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/009.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/009.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/009.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">字體選擇列表</span></figcaption></figure>
<p>斯斯有兩種，內建字體超多種。ZiZi 內建 20 多款可商用與開源字型，絕大部分可以透過雲端調用，不必在手機上安裝一大堆字體文件（容量救星✌🏼）。</p>
<p>詳細字體列表，可點前往<a href="https://zizi.twintype.co/?ref=blog.twintype.co">ZiZi官網</a>點選「預載字體」查看，或開啟APP查看。在APP中你只需要點選工具列的「字」圖示，即可任意切換字體風格。最上方會是你所訂選的字體。</p>
<h2 id="%E5%84%B2%E5%AD%98%E8%8D%89%E7%A8%BF%EF%BC%9A%E5%BF%AB%E7%85%A7%E5%8A%9F%E8%83%BD">儲存草稿：快照功能</h2>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/010.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/010.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/010.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/010.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/010.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">快照功能說明</span></figcaption></figure>
<p>編輯到一半，需要先離開，或是想存著下次複用？沒問題，可以點選「快照」圖示即可儲存。</p>
<p>之後可以開啟選單，點選「Capsa」即可查看已經儲存的快照。</p>
<p>備註：快照僅儲存於本機，如果重新安裝或是更換裝置，快照將遺失。</p>
<h2 id="%E5%8C%AF%E5%85%A5%E5%AD%97%E9%AB%94">匯入字體</h2>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/011.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/011.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/011.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/011.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/011.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">匯入字體功能</span></figcaption></figure>
<p>開啟選單，點選「Galley」可進入字體列表，這會顯示當前可用之字體，上方有分類可查看。</p>
<p>點選「+」即可匯入字體，支援 .ttf 與 .otf。匯入之字體只會儲存與該裝置中，您需字型備份，如重新安裝、更換裝置，匯入之字體將遺失。</p>
<p>可透過「小花」圖示，釘選字體至編輯介面的字體列表中，「眼睛」圖是可以選擇是否顯示在列編輯介面的列表中。</p>
<p>小提示：大多數預設字體皆為雲端掉用，您無法刪除，但可以隱藏在編輯介面（Papyrus）的列表中。其中有兩款預設字體，「jf-粉圓體」、「霞鶩文楷TC」為安裝置至本地中，作為備案，當您處於無網路環境下，將會自動自動退回（Fallback ）此字體。</p>
<h2 id="%E5%B0%8F%E9%A1%8D%E8%A8%82%E9%96%B1%E5%AD%97%E9%AB%94">小額訂閱字體</h2>
<p>一般字體買斷授權費高昂，但又想來點不一樣的字體嗎？沒問題，現在可以透過 TwinType Cloud，小額訂閱字體，凡有訂閱完整字體包的用戶，也可享有 ZiZi 使用授權！</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/012.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/012.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/012.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/012.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/012.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">在 TwinType Cloud 可以訂閱 ZiZi 專用包</span></figcaption></figure>
<p>第一步，請前往TwinType Cloud，註冊或登入，點選心儀的字體，並選擇方案。<br>
上方為完整授權訂閱方案。下方為 ZiZi 訂閱項目，僅可用於社群媒體中，如：instagram 限動​。</p>
<figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://cloud.twintype.co/?ref=blog.twintype.co"><div class="kg-bookmark-content"><div class="kg-bookmark-title">TwinType Cloud — 字型訂閱平台 — TwinType Cloud</div><div class="kg-bookmark-description">探索並訂閱高品質中文字型，涵蓋宋體、黑體、仿宋、書法、手寫等類型，支援 webfont 即時預覽。</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://blog.twintype.co/content/images/icon/favicon-DNPBlXSg-3.png" alt=""><span class="kg-bookmark-author">TwinType Cloud</span><span class="kg-bookmark-publisher">TwinType Cloud</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://blog.twintype.co/content/images/thumbnail/og-default-3.png" alt="" onerror="this.style.display = &#x27;none&#x27;"></div></a></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/013.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/013.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/013.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/013.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/013.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">啟用訂閱字體方式</span></figcaption></figure>
<p>當於 TwinType Cloud 訂閱完成後，可以回到 ZiZi「選單」，並點選「以 TwinType Cloud 帳號繼續」，接著遵照指示燈入，再回到列表中，即可看到訂閱的字體喔！</p>
<p>小提示：如果確定正確訂閱，且登入後沒出現，可以先關閉軟體並重開即可！</p>
<h3 id="zizi-%E5%B0%8F%E9%A1%8D%E8%A8%82%E9%96%B1%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85%EF%BC%9A">ZiZi 小額訂閱注意事項：</h3>
<ul>
<li>本訂閱授權，僅限用於社群媒體中素材中，不得挪作他用，例如重新於繪圖軟體中描繪提取邊框。詳細授權請參閱：</li>
<li>訂閱字型，也屬於雲端字型，需在連網狀態下使用。</li>
<li>本服務會自動續訂，如需取消，請前往 TwinType Cloud >帳號>我的訂閱>付款管理，進行取消。</li>
</ul>
<h2 id="%E5%B7%A5%E5%95%86%E6%99%82%E9%96%93%EF%BC%9A%E8%9B%8B%E8%9B%8B%E9%9C%B8%E6%B0%A3%E9%AB%94">工商時間：蛋蛋霸氣體</h2>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/015.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="788" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/015.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/015.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/015.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/015.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">蛋蛋霸氣體：真誠用心，豪放搶眼，非常適合用於社群行銷中！</span></figcaption></figure>
<p>本次文中，多張片畫面使用〈蛋蛋霸氣體〉，這是一款豪放搶眼，真誠不做作的手寫字體！</p>
<p>由圖文作家——蛋頭親筆繪製，且加入多個 emoji，讓你用字體表達喜怒哀樂。非常適合用在社群中，而且內含 80 多個彩色 emoji！</p>
<p>現在可透過 TwinType Cloud 訂閱商業授權與小額 ZiZi 授權！</p>
<figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://cloud.twintype.co/display-egg-bossy?ref=blog.twintype.co"><div class="kg-bookmark-content"><div class="kg-bookmark-title">蛋蛋霸氣體 — TwinType Cloud</div><div class="kg-bookmark-description">蛋蛋霸氣體展示頁：自然率性、靈動搶眼，支援中英韓文與彩色 emoji，立即預覽與訂閱。</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://blog.twintype.co/content/images/icon/favicon-DNPBlXSg-4.png" alt=""><span class="kg-bookmark-author">TwinType Cloud</span><span class="kg-bookmark-publisher">TwinType Cloud</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://blog.twintype.co/content/images/thumbnail/og.jpg" alt="" onerror="this.style.display = &#x27;none&#x27;"></div></a></figure>
<div class="quoteBox">
<h3>相關連結</h3>
<a href="https://zizi.twintype.co/?ref=blog.twintype.co" rel="noreferrer" target="_blank">ZiZi全能限動改造王</a><br>

<a href="http://bambook-doc.twintype.co/?ref=blog.twintype.co" rel="noreferrer" target="_blank">Bambook使用文件_V0.0.</a><br>

<a href="https://cloud.twintype.co/?ref=blog.twintype.co" rel="noreferrer" target="_blank">TwinType Cloud—字型訂閱平台</a><br>

</div>
<style>
    .quoteBox{
        width: 100%;

        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 2em;
    }
  h3{
    margin-top: 0px;
    
}
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/FG36_0</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/FG36_0";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>]]></content:encoded></item><item><title><![CDATA[TwinType Cloud 使用手冊]]></title><description><![CDATA[<p>完整教學指南，快速上手 TwinType Cloud。  使用者能夠透過 TwinType Cloud 訂閱使用字型，適配多種作業系統，且能夠使用於市面上各類軟體。本篇將詳細說明下載方式、帳號登入流程與字型安裝方法。   關於 TwinType Cloud  TwinType Cloud 提供字型訂閱服務，讓使用者能以訂閱制方式使用字型，降低一次性購買所產生的高額費用負擔。使用者可於網站選擇欲訂閱的字型，並登 TwinType Cloud 下載使用。  字型檔將由 TwinType Cloud 系統集中管理，使用者不會直接取得完整字型檔，以降低字型檔外流的風險。因此，若應用程式需直接存取完整字型檔，可能較不適合透過本產品下載字型。  TwinType Cloud 能夠適配不同的作業系統，並支援市面上絕大部分的軟體。本篇將詳細說明下載方式、帳號登入流程，以及字型安裝與使用方法。   使用流程：  Stop1.註冊 TwinType 帳號  Stop2.預覽及訂閱字型  Stop3.下載並登入 TwinType Cloud  Stop4.安裝啟用字型   Windows：   帳號註冊 |</p>]]></description><link>https://blog.twintype.co/twintype-cloud-tutorial/</link><guid isPermaLink="false">6a0fd0c0b23f4b0001d618c8</guid><category><![CDATA[TwinType Cloud]]></category><dc:creator><![CDATA[Reese Wang]]></dc:creator><pubDate>Fri, 22 May 2026 06:42:15 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2026/05/-------49.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2026/05/-------49.jpg" alt="TwinType Cloud 使用手冊"><br><p>完整教學指南，快速上手 TwinType Cloud。</p>
<hr>
<p>使用者能夠透過 TwinType Cloud 訂閱使用字型，適配多種作業系統，且能夠使用於市面上各類軟體。本篇將詳細說明下載方式、帳號登入流程與字型安裝方法。</p>
<h2 id="%E9%97%9C%E6%96%BC-twintype-cloud">關於 TwinType Cloud</h2>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2026/05/-------72-1.png" class="kg-image" alt="" loading="lazy" width="2000" height="1252" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------72-1.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------72-1.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------72-1.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/-------72-1.png 2400w" sizes="(min-width: 720px) 720px"></figure>
<p>TwinType Cloud 提供字型訂閱服務，讓使用者能以訂閱制方式使用字型，降低一次性購買所產生的高額費用負擔。使用者可於網站選擇欲訂閱的字型，並登 TwinType Cloud 下載使用。</p>
<p>字型檔將由 TwinType Cloud 系統集中管理，使用者不會直接取得完整字型檔，以降低字型檔外流的風險。因此，若應用程式需直接存取完整字型檔，可能較不適合透過本產品下載字型。</p>
<p>TwinType Cloud 能夠適配不同的作業系統，並支援市面上絕大部分的軟體。本篇將詳細說明下載方式、帳號登入流程，以及字型安裝與使用方法。</p>
<h3 id="%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B%EF%BC%9A">使用流程：</h3>
<p>Stop1.註冊 TwinType 帳號</p>
<p>Stop2.預覽及訂閱字型</p>
<p>Stop3.下載並登入 TwinType Cloud</p>
<p>Stop4.安裝啟用字型</p>
<h2 id="windows%EF%BC%9A">Windows：</h2>
<h3 id="%E5%B8%B3%E8%99%9F%E8%A8%BB%E5%86%8A-%E5%AD%97%E5%9E%8B%E8%A8%82%E9%96%B1">帳號註冊 | 字型訂閱</h3>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------43-6.png" class="kg-image" alt="" loading="lazy" width="2000" height="1010" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------43-6.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------43-6.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------43-6.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/-------43-6.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">進入 </span><a href="https://cloud.twintype.co/?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">TwinType Cloud</span></a><span style="white-space: pre-wrap;"> 網站，於上方</span><a href="https://auth.twintype.co/interaction/pahVeYq_3We2aPaX4gKzO?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">註冊並登入</span></a><span style="white-space: pre-wrap;">。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------48.png" class="kg-image" alt="" loading="lazy" width="2000" height="1055" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------48.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------48.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------48.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/-------48.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">下滑進入字型選單挑選完成後，進入字型頁面即可預覽測試及訂閱字型。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/11-43--1-.png" class="kg-image" alt="" loading="lazy" width="2000" height="1010" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/11-43--1-.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/11-43--1-.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/11-43--1-.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/11-43--1-.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">在訂閱字型之前，請詳細閱讀</span><a href="https://cloud.twintype.co/license?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">授權條款</span></a><span style="white-space: pre-wrap;">及各項</span><a href="https://privacy-policy.twintype.co/zh-TW/v1.0.0/index.html?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">隱私政策</span></a><span style="white-space: pre-wrap;">，也請先下載軟體測試軟體相容性。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/25-56--1-.png" class="kg-image" alt="" loading="lazy" width="2000" height="1033" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/25-56--1-.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/25-56--1-.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/25-56--1-.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/25-56--1-.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">訂閱完成後點擊</span><a href="https://cloud.twintype.co/account?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">使用者帳號</span></a><span style="white-space: pre-wrap;">可查看帳戶資訊和訂閱方案，字型將會於到期日自動續訂，付款管理處可提前停止訂閱。</span></figcaption></figure>
<h3 id="%E8%BB%9F%E9%AB%94%E8%88%87%E5%AD%97%E5%9E%8B%E5%AE%89%E8%A3%9D">軟體與字型安裝</h3>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------69.png" class="kg-image" alt="" loading="lazy" width="2000" height="1033" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------69.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------69.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------69.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/-------69.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">上方點擊</span><a href="https://cloud.twintype.co/download?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">下載</span></a><span style="white-space: pre-wrap;">後，選擇對應的作業系統下載 TwinType Cloud Client 。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/2-43.png" class="kg-image" alt="" loading="lazy" width="2000" height="1010" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/2-43.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/2-43.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/2-43.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/2-43.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Windows 系統下載時若被安全系統阻擋，點擊其他資訊選擇仍要下載。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------70.png" class="kg-image" alt="" loading="lazy" width="2000" height="1033" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------70.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------70.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------70.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/-------70.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">啟動登入後可以看到已訂閱的字型，點擊下載圖示安裝字型。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/99-43--1-.png" class="kg-image" alt="" loading="lazy" width="2000" height="1010" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/99-43--1-.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/99-43--1-.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/99-43--1-.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/05/99-43--1-.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">顯示啟用成功後即可正常使用。</span></figcaption></figure>
<h2 id="ios%EF%BC%9A">iOS：</h2>
<h3 id="%E5%B8%B3%E8%99%9F%E8%A8%BB%E5%86%8A-%E5%AD%97%E5%9E%8B%E8%A8%82%E9%96%B1">帳號註冊 | 字型訂閱</h3>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------63.png" class="kg-image" alt="" loading="lazy" width="1602" height="2752" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------63.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------63.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------63.png 1600w, https://blog.twintype.co/content/images/2026/05/-------63.png 1602w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">進入 </span><a href="https://cloud.twintype.co/?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">TwinType Cloud</span></a><span style="white-space: pre-wrap;"> 網站，於上方</span><a href="https://auth.twintype.co/interaction/pahVeYq_3We2aPaX4gKzO?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">註冊並登入</span></a><span style="white-space: pre-wrap;">。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------66.png" class="kg-image" alt="" loading="lazy" width="1602" height="3027" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------66.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------66.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------66.png 1600w, https://blog.twintype.co/content/images/2026/05/-------66.png 1602w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">下滑進入字型選單挑選完成後，進入字型頁面即可預覽測試及訂閱字型。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------67.png" class="kg-image" alt="" loading="lazy" width="1602" height="3126" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------67.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------67.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------67.png 1600w, https://blog.twintype.co/content/images/2026/05/-------67.png 1602w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">在訂閱字型之前，請詳細閱讀</span><a href="https://cloud.twintype.co/license?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">授權條款</span></a><span style="white-space: pre-wrap;">及各項</span><a href="https://privacy-policy.twintype.co/zh-TW/v1.0.0/index.html?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">隱私政策</span></a><span style="white-space: pre-wrap;">，也請先下載軟體測試軟體相容性。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------65.png" class="kg-image" alt="" loading="lazy" width="1602" height="2939" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------65.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------65.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------65.png 1600w, https://blog.twintype.co/content/images/2026/05/-------65.png 1602w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">訂閱完成後點擊</span><a href="https://cloud.twintype.co/account?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">使用者帳號</span></a><span style="white-space: pre-wrap;">可查看帳戶資訊和訂閱方案，字型將會於到期日自動續訂，付款管理處可提前停止訂閱。</span></figcaption></figure>
<h3 id="%E8%BB%9F%E9%AB%94%E8%88%87%E5%AD%97%E5%9E%8B%E5%AE%89%E8%A3%9D">軟體與字型安裝</h3>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------57.png" class="kg-image" alt="" loading="lazy" width="1597" height="3289" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------57.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------57.png 1000w, https://blog.twintype.co/content/images/2026/05/-------57.png 1597w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">至 </span><a href="https://apps.apple.com/tw/app/twintype-cloud/id6767417011?ref=blog.twintype.co" rel="noreferrer"><span style="white-space: pre-wrap;">App Store</span></a><span style="white-space: pre-wrap;"> 安裝 TwinType Cloud。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------59.png" class="kg-image" alt="" loading="lazy" width="1598" height="3290" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------59.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------59.png 1000w, https://blog.twintype.co/content/images/2026/05/-------59.png 1598w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">啟動登入後可以看到已訂閱的字型，點擊下載圖示安裝字型。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------60.png" class="kg-image" alt="" loading="lazy" width="1602" height="3291" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------60.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------60.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------60.png 1600w, https://blog.twintype.co/content/images/2026/05/-------60.png 1602w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">啟用成功的字型將會存放至 Apple 系統中。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/05/-------62.png" class="kg-image" alt="" loading="lazy" width="1602" height="3290" srcset="https://blog.twintype.co/content/images/size/w600/2026/05/-------62.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/05/-------62.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/05/-------62.png 1600w, https://blog.twintype.co/content/images/2026/05/-------62.png 1602w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">確認安裝完成後即可正常使用。</span></figcaption></figure>
<h2 id="%E5%B8%B8%E8%A6%8B%E5%95%8F%E9%A1%8C">常見問題</h2>
<h3 id="q1-twintype-cloud-%E6%94%AF%E6%8F%B4%E5%93%AA%E4%BA%9B%E4%BD%9C%E6%A5%AD%E7%B3%BB%E7%B5%B1%EF%BC%9F">Q1. TwinType Cloud 支援哪些作業系統？</h3>
<p>TwinType Cloud 支援 Windows、macOS 與 iOS 等作業系統，使用者可依照需求於支援的平台上下載並使用字型。</p>
<h3 id="q2-%E8%A8%82%E9%96%B1%E5%BE%8C%E5%A6%82%E4%BD%95%E5%8F%96%E5%BE%97%E5%AD%97%E5%9E%8B%EF%BC%9F">Q2. 訂閱後如何取得字型？</h3>
<p>完成訂閱後，登入 TwinType Cloud 帳號即可於系統內查看已訂閱字型，並透過 TwinType Cloud 下載與啟用使用。</p>
<h3 id="q3-%E4%B8%80%E5%80%8B%E5%B8%B3%E6%88%B6%E5%8F%AF%E4%BB%A5%E5%90%8C%E6%99%82%E5%9C%A8%E5%A4%9A%E5%8F%B0%E9%9B%BB%E8%85%A6%E4%BD%BF%E7%94%A8%E5%97%8E%EF%BC%9F">Q3. 一個帳戶可以同時在多台電腦使用嗎？</h3>
<p>不可以。每個 TwinType Cloud 帳戶僅限一台裝置使用，不支援同時於多台裝置登入及使用字型。</p>
<h3 id="q4-twintype-cloud-%E6%94%AF%E6%8F%B4%E5%93%AA%E4%BA%9B%E8%BB%9F%E9%AB%94%EF%BC%9F">Q4. TwinType Cloud 支援哪些軟體？</h3>
<p>TwinType Cloud 支援市面上絕大部分常見設計、文書及影像編輯軟體，實際支援情況可依各字型與軟體版本為準。</p>
<h3 id="q5-%E7%82%BA%E4%BB%80%E9%BA%BC%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%E5%AE%8C%E6%95%B4%E5%AD%97%E5%9E%8B%E6%AA%94%EF%BC%88-ttf-otf-%EF%BC%89%EF%BC%9F">Q5. 為什麼無法取得完整字型檔（ TTF / OTF ）？</h3>
<p>為保障字型授權與降低字型檔外流風險，TwinType Cloud 採集中管理機制，不提供完整字型檔下載。</p>
<h3 id="q6-%E7%82%BA%E4%BB%80%E9%BA%BC%E6%88%91%E4%B8%8B%E8%BC%89%E4%BA%86%E5%AD%97%E5%9E%8B%E5%8D%BB%E6%B2%92%E6%9C%89%E5%9C%A8%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F%E5%85%A7%E9%A1%AF%E7%A4%BA%EF%BC%9F">Q6. 為什麼我下載了字型卻沒有在應用程式內顯示？</h3>
<p>為了確保應用程式載入出新安裝字型，建議先安裝完成字型再啟動要使用的應用程式，確保字型能被系統讀。</p>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/u3f1nm</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/u3f1nm";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>]]></content:encoded></item><item><title><![CDATA[手機如何換字體？怎麼做到的？]]></title><description><![CDATA[<p>過去一段時間，偶而會看到身旁人的手機，使用了極其特殊的字體，那種與一般常見作業系統預設黑體大相逕挺的風格，令人過目難忘。   濫觴：手機的普及化  在大約2000年初，智慧型手機逐漸嶄露頭角，但當時還是以類似「黑莓機」的形式出場，往往帶著一個實體鍵盤，直到2000年末，賈伯斯帶的第一代iPhone問世，各家廠商紛紛跟進「全觸控」的手機市場。  在硬體的加持下，我們開始可以將較為複雜的運算功能移植到行動端上，智慧型手機也愈發普及，從原本簡單的「商務使用」到「人手一機」。   資本家的嗅覺：Monotype 進軍手機字體市場  使用的人多了，就有商機，此時世界上最大的字體帝國Monotype嗅到商機，希望可以開發一款能「換字體」的工具，當時在2007到2010年之間，手機製造商如雨後春筍般冒出，包括：Nokia、Samsung、Apple等，作業系統部分，也是各立門戶，不像現在只有Android與iOS。  最早Monotype其實是為Nokia的Symbian作業系統打造換字體技術。Monotype將此技術稱為「FlipFont」，當時透過Nokia的商店安裝該APP，即可切換系統使用者</p>]]></description><link>https://blog.twintype.co/history-of-mobile-font-changing/</link><guid isPermaLink="false">69b9facecadc6900017c0786</guid><category><![CDATA[字型技術]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Wed, 18 Mar 2026 17:11:06 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2026/03/000-2.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2026/03/000-2.jpg" alt="手機如何換字體？怎麼做到的？"><br><p>過去一段時間，偶而會看到身旁人的手機，使用了極其特殊的字體，那種與一般常見作業系統預設黑體大相逕挺的風格，令人過目難忘。</p>
<h2 id="%E6%BF%AB%E8%A7%B4%EF%BC%9A%E6%89%8B%E6%A9%9F%E7%9A%84%E6%99%AE%E5%8F%8A%E5%8C%96">濫觴：手機的普及化</h2>
<p>在大約2000年初，智慧型手機逐漸嶄露頭角，但當時還是以類似「黑莓機」的形式出場，往往帶著一個實體鍵盤，直到2000年末，賈伯斯帶的第一代iPhone問世，各家廠商紛紛跟進「全觸控」的手機市場。</p>
<p>在硬體的加持下，我們開始可以將較為複雜的運算功能移植到行動端上，智慧型手機也愈發普及，從原本簡單的「商務使用」到「人手一機」。</p>
<h2 id="%E8%B3%87%E6%9C%AC%E5%AE%B6%E7%9A%84%E5%97%85%E8%A6%BA%EF%BC%9Amonotype-%E9%80%B2%E8%BB%8D%E6%89%8B%E6%A9%9F%E5%AD%97%E9%AB%94%E5%B8%82%E5%A0%B4">資本家的嗅覺：Monotype 進軍手機字體市場</h2>
<p>使用的人多了，就有商機，此時世界上最大的字體帝國Monotype嗅到商機，希望可以開發一款能「換字體」的工具，當時在2007到2010年之間，手機製造商如雨後春筍般冒出，包括：Nokia、Samsung、Apple等，作業系統部分，也是各立門戶，不像現在只有Android與iOS。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/03/002.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2026/03/002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/03/002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/03/002.jpg 1600w, https://blog.twintype.co/content/images/2026/03/002.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Symbian OS截圖（時代的眼淚）。</span></figcaption></figure>
<p>最早Monotype其實是為Nokia的Symbian作業系統打造換字體技術。Monotype將此技術稱為「FlipFont」，當時透過Nokia的商店安裝該APP，即可切換系統使用者介面字體。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/03/3-2.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2026/03/3-2.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/03/3-2.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/03/3-2.jpg 1600w, https://blog.twintype.co/content/images/2026/03/3-2.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">FlipFont APP操作示意圖</span></figcaption></figure>
<h2 id="%E5%86%8D%E8%A6%8Bsymbian%EF%BC%8C%E4%BD%A0%E5%A5%BDandroid%EF%BC%81">再見Symbian，你好Android！</h2>
<p>事過境遷，Symbian系統經歷一翻的併購（甚至還有Windows Phone參與其中），最終Symbian宣告死亡。到了2012左右，根據IDC提出的相關報告，當時市面上裝載Android的智慧型移動裝置，達到約70%左右。</p>
<p>Monotype此時就轉向Android系統。與該作業系統下最大設備製造商Samsung合作，實現在手機端換字體。</p>
<h2 id="%E6%98%AF%E9%99%90%E5%88%B6%EF%BC%8C%E4%B9%9F%E6%98%AF%E4%BF%9D%E8%AD%B7%EF%BC%9A%E7%82%BA%E4%BD%95%E8%A6%81%E9%80%8F%E9%81%8E%E5%AE%98%E6%96%B9%E5%AE%89%E8%A3%9D%E5%AD%97%E9%AB%94%EF%BC%9F">是限制，也是保護：為何要透過官方安裝字體？</h2>
<p>帶大家應該有發現，似乎在Android平台下，無法輕鬆的替換系統使用者介面字體，最快速的方式是透過如：Samsung商城......等，手機廠商官方的商店取得字體。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/03/4.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="795" srcset="https://blog.twintype.co/content/images/size/w600/2026/03/4.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/03/4.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/03/4.jpg 1600w, https://blog.twintype.co/content/images/2026/03/4.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Samsung商城的字體主題購買畫面截圖</span></figcaption></figure>
<p>一般來說，用戶無法透過「設定」直接切換字體，最直接的原因是因為Android並未開放相關API讓用戶可以直接註冊系統字體，至於像是Samsung商城這樣的作法，是因為Samsung在開發One UI時，就保留內部接口，可以透過指定方式調用，但僅限於經過認證的廠商。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/03/9.jpg" class="kg-image" alt="" loading="lazy" width="1025" height="288" srcset="https://blog.twintype.co/content/images/size/w600/2026/03/9.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/03/9.jpg 1000w, https://blog.twintype.co/content/images/2026/03/9.jpg 1025w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">透過官方下載的字體包內的AndroidManifest.xml配置是意圖，透過聲明，以做到隱藏</span></figcaption></figure>
<p>從Samsung商城安裝的字體，本質上「應用軟體」的形式，只是在一般應用列表中無法看見，本質上是購買了一款應用軟體。</p>
<h2 id="android-app%E6%8F%9B%E5%AD%97%E9%AB%94%EF%BC%9F">Android APP換字體？</h2>
<p>大家可能聽過有部分第三方平台（例如：愛X體、zFxxx）可以做到，通常使用該方法存在許多風險。此類APP大致分為兩種方式達成此目的：</p>
<h3 id="1%E4%BD%BF%E7%94%A8root">1.使用ROOT</h3>
<p>在Android系統啟動時，會自動尋找「etc/fonts.xml」文件，並讀取配置。而ROOT方式就是直接修改該文件，替換字體路徑或是修改字型檔案。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/03/5-1.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="795" srcset="https://blog.twintype.co/content/images/size/w600/2026/03/5-1.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/03/5-1.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/03/5-1.jpg 1600w, https://blog.twintype.co/content/images/2026/03/5-1.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Android fonts.xml文件示意圖</span></figcaption></figure>
<p>風險顯而易見，首先如果路徑失效，可能會造成系統無法正常啟動，而且只要是一般用戶從市售渠道購買的行動裝置，基本上製造上都不會允許此操作，如果修改過，會導致文件無法通過原廠認證，這可能會失去保固。</p>
<p>加上近期Android開發團隊十分重視安全性，加入了Play Integrity......等相關技術限制，如果發現有對裝置ROOT過，會使許多應用無法開啟。</p>
<h3 id="2%E6%AC%BA%E6%95%B5%E6%88%B0%E8%A1%93">2.欺敵戰術</h3>
<p>ROOT方法太危險？還有許多APP號稱ROOT就可換字體。</p>
<p>此類APP會先安裝「預設字型包」或系統支援字型包，接著讓用戶上傳字體的檔案，次十該應用會將該字體包裝成執行檔案，並且刻意用與「預設字型包」一樣的配置（可能是AndroidManifest.xml），讓系統以為是同樣的東西，調用名稱、家族名、宣告......等都一致，只是最後顯示的圖形不同。</p>
<p>此方法其實也不見會成功，許多廠商已經加入更複雜的較驗系統，包括檢查配置文件的Hash值，防止竄改。</p>
<h2 id="%E9%80%8F%E9%81%8Eapp%E6%8F%9B%E5%AD%97%E9%AB%94%E7%9A%84%E9%A2%A8%E9%9A%AA">透過APP換字體的風險</h2>
<p>上面已經講過ROOT的風險，即便不是用ROOT也可能存在風險，沒有相關技術背景的人使用，APP可能在安裝檔案（多為 apk）嵌入具有風險的程式，會使資訊安全暴露高度風險中。</p>
<p>攻擊手法推層出新，甚至可以夾帶有問題的字型檔案，直接造成系統崩潰或漏洞。例如：CVE-2020-15999的漏洞，透過將與宣告不符合的PNG文件鑲嵌入字體中，造成堆棧溢出（簡單來說，就是騙記憶空間，然後塞入地址，然後程式就會跑到那地址執行惡意程式碼）......等問題。</p>
<p>在極端一點，如果有人刻意將「9」的編碼上，改為「0」的樣式，剛好你掃描了一個付款QRcode，那原本你以為只是支付「1,000」但事實上支付了「1,999」，這就虧大了。</p>
<p>最後，還有許多APP號稱可以換中文字體，但其中字體授權來路不明，品質參差不齊，還可能引發法律問題，千萬勿以身試法！</p>
<h2 id="ios%E5%8F%AF%E4%BB%A5%E6%8F%9B%E5%AD%97%E9%AB%94%E5%97%8E%EF%BC%9F">iOS可以換字體嗎？</h2>
<p>可以，但也有限制！iOS與MacOS都可以調用<code>CTFontManager</code>API，可以合法在系統中註冊字體，但僅限於應用中調用。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2026/03/6.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="795" srcset="https://blog.twintype.co/content/images/size/w600/2026/03/6.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/03/6.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/03/6.jpg 1600w, https://blog.twintype.co/content/images/2026/03/6.jpg 1815w" sizes="(min-width: 720px) 720px"></figure>
<p>例如：可以透過文鼎的Fonts Fun安裝字體，並在Word中使用，又或是在iPad中使用剪輯軟體，可調用字體。</p>
<h2 id="%E6%87%89%E8%A9%B2%E6%8F%9B%E5%AD%97%E9%AB%94%E5%97%8E%EF%BC%9F">應該換字體嗎？</h2>
<p>​個人手機UI字體，作用域僅限於個人手機，不像對外的設計需要讓大眾存取，確實可以更「自我」的思考這題，假設在安全的情況下，還是可能出現其他的狀況。</p>
<p>狀常見的就是缺字，或品質問題！例如：在Samsung商城啟用〈華康玉刻仿宋〉在下方截圖中就出現，簡體中文無法顯示、西里爾字母字距不自然。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/03/7.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="795" srcset="https://blog.twintype.co/content/images/size/w600/2026/03/7.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/03/7.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/03/7.jpg 1600w, https://blog.twintype.co/content/images/2026/03/7.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">使用其他非系統預設字體實際顯示問題示意</span></figcaption></figure>
<p>即便顯示正常，我們應該也要思考，在小字號下，這些字體閱讀體驗好嗎？</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/03/8.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="876" srcset="https://blog.twintype.co/content/images/size/w600/2026/03/8.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/03/8.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/03/8.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/03/8.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">字型比較</span></figcaption></figure>
<p>以上舉〈華康玉刻仿宋〉與預設的〈思源黑體〉做為比較，因〈玉刻仿宋〉是目前合法情況下能取得最接近內文字體的設計了，華康官網也是這麼定義他的。感受與評價，留給大家自行判斷。</p>
<p>總結來說，要選擇更換系統UI與否，主要在個人，可以根據自身需要思考，如果自己認為更換系統用字，可帶來幸福感，何嘗不可呢？</p>
<p>唯需在此之前，認知其風險與後果，如想更換，建議依照官方指示方式操作，避免將數位安全暴露於風險之中。</p>
<p></p>
<div class="quoteBox">
<h3>相關連結</h3>
<a href="https://mobile.phoneky.com/applications/?id=y0y17749&#x26;ref=blog.twintype.co" rel="noreferrer" target="_blank">Flipfont Symbian App - Download on PHONEKY</a><br>

<a href="CTFontManagerRegisterGraphicsFont(_:_:) | Apple Developer Documentation" rel="noreferrer" target="_blank">CTFontManagerRegisterGraphicsFont(_:_:) | Apple Developer Documentation</a><br>

<a href="https://stackoverflow.com/questions/8080976/qt-symbian-fonts?ref=blog.twintype.co" rel="noreferrer" target="_blank">Qt Symbian Fonts</a><br>

<a href="https://issuetracker.google.com/issues/37062981?ref=blog.twintype.co" rel="noreferrer" target="_blank">Google Issue Tracker</a><br>

<a href="https://www.monotype.com/services/screen-imaging-solutions/flip-font?ref=blog.twintype.co" rel="noreferrer" target="_blank">FlipFont Mobile Personalization | Monotype.</a><br>

<a href="https://xdaforums.com/t/create-your-own-flipfont-apks-complete-walkthrough-now-with-quick-font-size-scaling.755472/?ref=blog.twintype.co" rel="noreferrer" target="_blank">Create your own FlipFont APKs complete walkthrough +Now with quick font size scaling | XDA Forums</a><br>

</div>
<style>
    .quoteBox{
        width: 100%;

        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 2em;
    }
  h3{
    margin-top: 0px;
    
}
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/oj82IZ</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/oj82IZ";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>
<p></p>
<p></p>]]></content:encoded></item><item><title><![CDATA[豎排消失中？現代數位裝置的困境]]></title><description><![CDATA[<p>傳統的漢字書寫方向一直以來大多採用垂直形式。從以前的書法、刻本，再到現代的照排、鉛字，都多以這種形式與大家見面。   豎排／縱書  傳統的漢字書寫方向一直以來大多採用垂直形式。從以前的書法、刻本，再到現代的照排、鉛字，都多以這種形式與大家見面！  不過，這一切在進入數位時代後，開始發生變化，豎排開始漸漸消失，取而代之的是橫排文字，從電子文書到社群軟體絕大多，皆已改為橫式。   來自技術的侷限。  這一切的濫觴要從1973說起，當時美國Xerox公司，推出了Xerox Alto，這是世界上最早成熟的圖形化作業系統（是的，最早的GUI操作系統不是Microsoft、IBM或Apple推出的）。  再往前推的貝爾實驗、AT&amp;T，甚至回朔到艾倫·圖靈......等人，這些公司、研究者絕大多數都來自歐美，或在歐美國家進行開發，所以他們用自己熟悉的語言開發在合理不過。  從技術層面來說，英文的組成也比中文等語系少得多，透過少數的字母符號組合不同結果，這在當時記憶體珍貴的硬體條件下，是最經濟的考量。  基於這樣的原因，自然的就會以拉丁為優先，或具體來說，是優先支援ASCII編碼的文字、習慣，而這些文</p>]]></description><link>https://blog.twintype.co/digital-limits-on-vertical-text/</link><guid isPermaLink="false">69724702254b020001e05a64</guid><category><![CDATA[字型技術]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Sun, 01 Feb 2026 08:14:14 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2026/02/00.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2026/02/00.jpg" alt="豎排消失中？現代數位裝置的困境"><br><p>傳統的漢字書寫方向一直以來大多採用垂直形式。從以前的書法、刻本，再到現代的照排、鉛字，都多以這種形式與大家見面。</p>
<h2 id="%E8%B1%8E%E6%8E%92%EF%BC%8F%E7%B8%B1%E6%9B%B8">豎排／縱書</h2>
<p>傳統的漢字書寫方向一直以來大多採用垂直形式。從以前的書法、刻本，再到現代的照排、鉛字，都多以這種形式與大家見面！</p>
<p>不過，這一切在進入數位時代後，開始發生變化，豎排開始漸漸消失，取而代之的是橫排文字，從電子文書到社群軟體絕大多，皆已改為橫式。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/002.jpg" class="kg-image" alt="早期刻本多以豎排／縱書為主。以康熙字典為例。TwinType" loading="lazy" width="2000" height="1125" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/002.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/01/002.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">早期刻本多以豎排／縱書為主。以康熙字典為例</span></figcaption></figure>
<h2 id="%E4%BE%86%E8%87%AA%E6%8A%80%E8%A1%93%E7%9A%84%E4%BE%B7%E9%99%90%E3%80%82">來自技術的侷限。</h2>
<p>這一切的濫觴要從1973說起，當時美國Xerox公司，推出了Xerox Alto，這是世界上最早成熟的圖形化作業系統（是的，最早的GUI操作系統不是Microsoft、IBM或Apple推出的）。</p>
<p>再往前推的貝爾實驗、AT&#x26;T，甚至回朔到艾倫·圖靈......等人，這些公司、研究者絕大多數都來自歐美，或在歐美國家進行開發，所以他們用自己熟悉的語言開發在合理不過。</p>
<p>從技術層面來說，英文的組成也比中文等語系少得多，透過少數的字母符號組合不同結果，這在當時記憶體珍貴的硬體條件下，是最經濟的考量。</p>
<p>基於這樣的原因，自然的就會以拉丁為優先，或具體來說，是優先支援ASCII編碼的文字、習慣，而這些文種的書寫系統本生就是以橫排為主的。造就了現在以橫排</p>
<h2 id="%E4%B9%9F%E6%B2%92%E9%80%99%E9%BA%BC%E7%B5%95%E6%9C%9B%EF%BC%9F">也沒這麼絕望？</h2>
<p>講到電子裝置上的豎排，其實「電子書」就是最佳案例，目前主流的電子書裝置，大多可支援豎排模式。不是說逐漸消失嗎？</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/02/20260201_142154.jpg" class="kg-image" alt="電子書豎排示意圖。TwinType" loading="lazy" width="2000" height="1125" srcset="https://blog.twintype.co/content/images/size/w600/2026/02/20260201_142154.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/02/20260201_142154.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/02/20260201_142154.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/02/20260201_142154.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">電子書豎排示意圖</span></figcaption></figure>
<p>要回答這問題，要先掉書袋一下，如果你是電子書讀者，可能聽過電子書是使用 epub 格式，這種格式其實底層就是網頁技術，基於HTML 與 CSS，再加入配置文件等封裝成以.zip為編碼的文件。</p>
<p>既然是基於HTML 與 CSS，那當然是用瀏覽器解析囉！大多數的電子書軟體在你閱讀文章時，都會透過內嵌的小瀏覽器（通常是以Chromium為主，因為原生移動端Webview可能存在CSS兼容、效能等問題），進行解析。</p>
<p>沒錯！瀏覽器是支援的！這最早是在大約在2010年底時，由日本的專家學者提出相關草案，後被負責維護CSS的W3C組織正式支援。（這之中要感謝W3C團隊與特邀專家，這是個長故事，未來有機會也能在分享）。</p>
<h2 id="%E7%80%8F%E8%A6%BD%E5%99%A8%E6%98%AF%E7%A8%AE%E9%81%B8%E6%93%87%EF%BC%8C%E4%BD%86%E4%B8%8D%E6%98%AF%E5%94%AF%E4%B8%80%E3%80%82">瀏覽器是種選擇，但不是唯一。</h2>
<p>只有瀏覽器支援豎排遠遠不夠。因為WebAPI的崛起，瀏覽器愈發強大，不僅可以編輯文件、剪輯排版，甚至是建模。即便如此，許多時候軟體還是需要深度與硬體、系統交互，我們不會所有的軟體都基於瀏覽自開發， 因為存在安全、效能以及使用者體驗之問題。</p>
<p>就像是instagram即便網頁版功能十分強大，但手機端應用依然採用React Nnative開發（編譯後元素元件會變編譯成平台原生）這樣可以有更棒的用戶體驗，以及一些需要與操作手勢相關的行為。</p>
<p>所以，瀏覽器並非所有，即便將它包成APP或是PWA，也無法避免一些缺點。例如：銀行APP需要安全隔離。</p>
<p>又或是你今天打算做一款離線使用的記帳APP（大Vibe Coding時代，大家不知道為何都喜歡做這個），想使用資料庫保存資料，如果使用基於瀏覽器的PWA技術，那選擇可能剩下不多，最常見是使用 indexedDB，以類似Json形式存入，但這樣不僅有容量問題，如果備系統清除快取，可能資料就不復存在，不力資料持久化，退一萬步使用SQLite WASM還是有穩定性問題。這再次證明，框架或原生應用必須存在的現實。</p>
<h2 id="%E9%99%A4%E4%BA%86%E7%80%8F%E8%A6%BD%E5%99%A8%E4%BB%A5%E5%A4%96%E7%9A%84%E9%81%B8%E6%93%87">除了瀏覽器以外的選擇</h2>
<p>剛才舉證了瀏覽器並不能取代所有APP。接下來要談談還有甚麼做法。最好理解的就是原生平台iOS用SwiftUI，Android用Jetpack Compose，這是最直接的方法。</p>
<p>當然所謂的跨平台框架，也十分盛行，最有名的非React Nnative莫屬，由Meta團隊開源（請注意此處提及的是React Nnative非React！）。以及後起之秀Flutter，這是由Google維護超級具有野心的框架，目前可以編譯成iOS、Android、Windows、Web端。</p>
<h2 id="%E8%AC%9B%E4%BA%86%E9%80%99%E9%BA%BC%E5%A4%9A%EF%BC%8C%E5%9B%B0%E5%A2%83%E5%9C%A8%E5%93%AA%EF%BC%9F">講了這麼多，困境在哪？</h2>
<p>困境在於除了瀏覽器外，其他框架、平台，無一支援垂直排版。是的，很遺憾無一支援。</p>
<h2 id="%E8%B1%8E%E6%8E%92%EF%BC%8F%E7%B8%B1%E6%9B%B8%E9%9B%A3%E5%9C%A8%E5%93%AA%EF%BC%9F">豎排／縱書難在哪？</h2>
<p>聽起來只是將文字方塊換方向排列，但事實上CJKV排印充滿著玄機，舉凡：避頭尾、日文假名、諺文、標點擠壓，還有地區差異，以及多文種混排的問題。光是母語用戶，要將這些規則描述成規格文件，就要花上許多時間，更別提大多來自非CJKV母語者的開發團隊要將規則轉換程式碼實踐。</p>
<p>W3C不是成功了嗎？其他團隊不跟進？可能沒這麼樂觀！瀏覽器最早就是為數位文字顯示而生，看看HTML的全名就知道「HyperText Markup Language」。所以開發小組有深厚的相關經驗與願景。</p>
<p>然而其他框架、SDK初衷並非如此，他們還必須要關注、編譯、效能、硬體橋接、大大小小兼容性的問題。在Flutter中有人提交了<a href="https://github.com/flutter/flutter/issues/15710?ref=blog.twintype.co#issuecomment-470418200">相關問題</a>，而Flutter團隊則回應了，在一開始就並不打算支援該功能。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/image-1.png" class="kg-image" alt="在Flutter #15710 issue提交中，官方人員回覆" loading="lazy" width="1716" height="574" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/image-1.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/image-1.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/image-1.png 1600w, https://blog.twintype.co/content/images/2026/01/image-1.png 1716w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">在Flutter #15710 issue提交中，官方人員回覆</span></figcaption></figure>
<h2 id="%E6%B2%92%E6%9C%89%E6%9B%BF%E4%BB%A3%E6%96%B9%E6%A1%88%EF%BC%9F">沒有替代方案？</h2>
<p>可能有人會想說使用圖片、PDF形式，但這樣治標不治本，首先這樣鑲嵌的文件無法做到響應式，也無法動態更新，容量、效能也不盡然理想。</p>
<h2 id="%E4%B9%9F%E8%A8%B1%E6%88%91%E5%80%91%E8%83%BD%E5%81%9A%E9%BB%9E%E4%BB%80%E9%BA%BC%EF%BC%9F">也許......我們能做點什麼？</h2>
<p>TwinType身為文字的使用者，中文字的使用者，漢字的使用者；身為設計者，字體的設計者，程式的設計者。我們或許能做點甚麼；我們或許要做點甚麼？</p>
<p>既然沒有輪子，那就造一個，我們決來編寫開源套件，解決該問題。我們決定先以Flutter為試驗，開發一個套件處理CJKV中文排版的套件。</p>
<p>會選擇Flutter的原因？根據Appfigures統計數據，Flutter在兩大移動端中都是僅次原生框架的開發套件，同時也是TwinType常用的技術棧，有較多調試經驗，故選用。</p>
<h2 id="%E9%9A%86%E9%87%8D%E4%BB%8B%E7%B4%B9bambook%EF%BC%9Aflutter%E8%B1%8E%E6%8E%92%E7%89%88%E5%A5%97%E4%BB%B6">隆重介紹Bambook：Flutter豎排版套件</h2>
<p>這是一款針對 Flutter 的套件。可你提供您垂直排版能力，為 CJK 語種提供另一種選項(甚至在蒙古文中是唯一選項)。該文字排版引擎，支援垂直書寫、縱中橫、避頭尾與標點視覺修正等功能。</p>
<p>您可以透過<a href="https://pub.dev/packages/bambook?ref=blog.twintype.co">pub.dev</a>使用，也可以至<a href="https://github.com/twinTypeFont/bambook?ref=blog.twintype.co">Github</a>查看原始碼。也歡迎回報、提出問題！</p>
<p>文件說明：<a href="https://bambook-doc.twintype.co/?ref=blog.twintype.co">https://bambook-doc.twintype.co/</a></p>
<p>目前版本為0.0.4(2026.02.01)，我們將持續擴充功能包括，更好的支援蒙文、注音以及標擠壓、OpenType等特性。期待看到以豎排／縱書設計的UI應用遍地開花。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/02/68747470733a2f2f696d6167652e7477696e747970652e636f2f696d616765732f3030332e6a7067.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1037" srcset="https://blog.twintype.co/content/images/size/w600/2026/02/68747470733a2f2f696d6167652e7477696e747970652e636f2f696d616765732f3030332e6a7067.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/02/68747470733a2f2f696d6167652e7477696e747970652e636f2f696d616765732f3030332e6a7067.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/02/68747470733a2f2f696d6167652e7477696e747970652e636f2f696d616765732f3030332e6a7067.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/02/68747470733a2f2f696d6167652e7477696e747970652e636f2f696d616765732f3030332e6a7067.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">基於垂直排版應用的想像</span></figcaption></figure>
<div class="quoteBox">
<h3>相關連結</h3>
<a class="reference" href="https://github.com/flutter/flutter/issues/15710?ref=blog.twintype.co#issuecomment-470418200" rel="noreferrer" target="_blank">Can to draw text at an angle using flutter? · Issue #15710 · flutter/flutter</a><br>

<a class="reference" href="https://stackoverflow.com/questions/56782788/vertical-text-widget-for-flutter?ref=blog.twintype.co" rel="noreferrer" target="_blank">dart - Vertical Text widget for Flutter - Stack Overflow</a><br>

<a class="reference" href="https://github.com/flutter/flutter/issues/80?ref=blog.twintype.co" rel="noreferrer" target="_blank">We should support ideographic, hanging, and mathematical baselines · Issue #80 · flutter/flutter</a><br>

<a class="reference" href="https://suragch.medium.com/my-first-disappointment-with-flutter-5f6967ba78bf?ref=blog.twintype.co" rel="noreferrer" target="_blank">My first disappointment with Flutter | by Suragch | Medium</a><br>

<a class="reference" href="https://www.w3.org/International/articles/vertical-text/?ref=blog.twintype.co" rel="noreferrer" target="_blank">Styling vertical Chinese, Japanese, Korean and Mongolian text</a><br>

<a class="reference" href="https://www.unicode.org/reports/tr50/?ref=blog.twintype.co" rel="noreferrer" target="_blank">UAX #50: Unicode Vertical Text Layout</a><br>

<a class="reference" href="https://www.w3.org/TR/clreq/?ref=blog.twintype.co" rel="noreferrer" target="_blank">Requirements for Chinese Text Layout - 中文排版需求</a><br>

<a class="reference" href="https://www.thetype.com/2025/01/26402/?ref=blog.twintype.co" rel="noreferrer" target="_blank">The Type — 文字 / 设计 / 文化   —  新版《中文排版需求》：结构的统一与未来的可能性</a><br>

<a class="reference" href="https://www.iso.org/standard/53255.html?ref=blog.twintype.co" rel="noreferrer" target="_blank">ISO/IEC TS 30135-1:2014 - Information technology — Digital publishing — EPUB3 — Part 1: EPUB3 Overview&#x3C;</a><br>

<a class="reference" href="https://flutter.dev/?ref=blog.twintype.co" rel="noreferrer" target="_blank">Flutter - Build apps for any screen</a><br>

<a class="reference" href="https://reactnative.dev/?ref=blog.twintype.co" rel="noreferrer" target="_blank">React Native · Learn once, write anywhere</a><br>

<a class="reference" href="https://edu.law.moe.gov.tw/LawContent.aspx?id=GL000249&#x26;ref=blog.twintype.co" rel="noreferrer" target="_blank">教育部主管法規共用系統-法規內容-中文書寫及排印方式統一規定</a><br>

<a class="reference" href="https://crm.org/articles/xerox-parc-and-the-origins-of-gui?ref=blog.twintype.co" rel="noreferrer" target="_blank">Xerox PARC and the Origins of GUI | CRM.org</a><br>

<a class="reference" href="https://ecma-international.org/publications-and-standards/standards/ecma-262/?ref=blog.twintype.co" rel="noreferrer" target="_blank">ECMA-262 - Ecma International</a><br>

<a class="reference" href="https://web.dev/learn/pwa?ref=blog.twintype.co" rel="noreferrer" target="_blank">Learn PWA | web.dev</a><br>

<a class="reference" href="https://pub.dev/packages/bambook?ref=blog.twintype.co" rel="noreferrer" target="_blank">bambook | Flutter package</a><br>

<a class="reference" href="https://bambook-doc.twintype.co/zh-TW/v0.0.4/?ref=blog.twintype.co" rel="noreferrer" target="_blank">Bambook使用文件_V0.0.4</a><br>

<a class="reference" href="https://dart.dev/tools/pub/create-packages?ref=blog.twintype.co" rel="noreferrer" target="_blank">Creating packages | dart.dev</a><br>

</div>
<style>
    .quoteBox{
        width: 100%;
        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 2em;
      text-align: start;
    }
  h3{
    margin-top: 0px;
    
}
  .reference{
    font-size:0.8em;
  }
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/6PZwXu</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/6PZwXu";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>
<p></p>
<p></p>]]></content:encoded></item><item><title><![CDATA[小圖示大學問：網頁圖示技術？與字體也有關係？]]></title><description><![CDATA[<p>你曾想過網頁上「圖示（icons）」也與字體有關嗎？為何要使用字體技術呢？到底是技術的限制還是歷史的原因，讓我們繼續看下去！   第一種，老方法：將圖示以HTML中&lt;img&gt;語法插入  在HTML標籤中基礎的&lt;img&gt;標籤，用於顯示圖片，圖示本質上也屬於圖片的一種，但使用這種方式，存在幾種缺陷。  首先，是引入.jpg、.png......等點陣圖格式，需要要預先考量解析度問題，以及顏色是固定，在常見的網頁特效，如hover中，當滑鼠滑動到該元素，會出現變色、或是放大等效果，如果使用&lt;img&gt;希望在hover時讓圖片變色，就需要準備兩張圖片替換，在素材準備上較於麻煩。  即便是使用&lt;img&gt;嵌入.svg，也會因為透過&lt;img&gt;而導致JavaScript、CSS無法讀取.svg內的路徑，無法做到特效。  但如果想要做到類似「Airbnb Lava Style」的「擬物」風格的圖示，因為要透過向量繪製出擬物風格的圖示較於麻煩，所以大多會使用&lt;img&gt;標籤插入渲染出的點陣圖。  Airbnb的例子，包括動畫效果，實現方式有很多種，包括：GIT、影片、Lottie，甚至是canvas API，</p>]]></description><link>https://blog.twintype.co/the-secrets-of-variable-icons/</link><guid isPermaLink="false">6925df150d19270001c99f99</guid><category><![CDATA[字型技術]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/20251125-003.png]]></category><category><![CDATA[網頁字型]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Sun, 04 Jan 2026 16:25:50 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/11/20251125-001.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/11/20251125-001.jpg" alt="小圖示大學問：網頁圖示技術？與字體也有關係？"><br><p>你曾想過網頁上「圖示（icons）」也與字體有關嗎？為何要使用字體技術呢？到底是技術的限制還是歷史的原因，讓我們繼續看下去！</p>
<h2 id="%E7%AC%AC%E4%B8%80%E7%A8%AE%EF%BC%8C%E8%80%81%E6%96%B9%E6%B3%95%EF%BC%9A%E5%B0%87%E5%9C%96%E7%A4%BA%E4%BB%A5html%E4%B8%ADimg%E8%AA%9E%E6%B3%95%E6%8F%92%E5%85%A5">第一種，老方法：將圖示以HTML中&#x3C;img>語法插入</h2>
<p>在HTML標籤中基礎的&#x3C;img>標籤，用於顯示圖片，圖示本質上也屬於圖片的一種，但使用這種方式，存在幾種缺陷。</p>
<p>首先，是引入.jpg、.png......等點陣圖格式，需要要預先考量解析度問題，以及顏色是固定，在常見的網頁特效，如hover中，當滑鼠滑動到該元素，會出現變色、或是放大等效果，如果使用&#x3C;img>希望在hover時讓圖片變色，就需要準備兩張圖片替換，在素材準備上較於麻煩。</p>
<p>即便是使用&#x3C;img>嵌入.svg，也會因為透過&#x3C;img>而導致JavaScript、CSS無法讀取.svg內的路徑，無法做到特效。</p>
<p>但如果想要做到類似「Airbnb Lava Style」的「擬物」風格的圖示，因為要透過向量繪製出擬物風格的圖示較於麻煩，所以大多會使用&#x3C;img>標籤插入渲染出的點陣圖。</p>
<p>Airbnb的例子，包括動畫效果，實現方式有很多種，包括：GIT、影片、Lottie，甚至是canvas API，此處不細究。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/20251125-002.jpg" class="kg-image" alt="" loading="lazy" width="1876" height="698" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/20251125-002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/20251125-002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/20251125-002.jpg 1600w, https://blog.twintype.co/content/images/2026/01/20251125-002.jpg 1876w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Airbnb擬物風格的圖示</span></figcaption></figure>
<div class="codeAndDisplayBox">
    <div class="exampleCode">
        <div style="width: 100%;overflow-y: scroll;">
<script src="https://gist.github.com/2460124601/b67a8730b9b37098491beba99cf9f3a4.js"></script>        </div>
        <a href="https://gist.github.com/2460124601/b67a8730b9b37098491beba99cf9f3a4?ref=blog.twintype.co" target="_blank" rel="noopener noreferrer"><p>前往GitHub Gist查看完整示範</p></a>

    </div>
    <div class="resultDisplay">
        <img src="https://imagehub.twinty.pe/images/20251125-003.png" alt="擬物圖示是意圖，以東方短毛貓為例" style="width: 100%;">
      <figcaption><span style="white-space: pre-wrap;"><p>擬物圖示示意圖，以東方短毛貓為例</p></span></figcaption>

    </div>
</div>
<p>在無障礙方面，如果希望能讓視障者使用之閱讀器，讀出該&#x3C;img>元素，可以使用「alt」屬性，賦予語意。</p>
<h2 id="%E7%AC%AC%E4%BA%8C%E7%A8%AE%EF%BC%9A%E9%91%B2%E5%B5%8Csvg%E6%A8%99%E7%B1%A4">第二種：鑲嵌&#x3C;svg>標籤</h2>
<p>相較第一種直接將&#x3C;svg>鑲嵌入網頁HTML中，提升了部分優點。因為不再使用&#x3C;img>所以JavaScript、CSS可以讀取其中路徑資訊。包括使用「{ fill: red; }」對元素封閉路徑改變顏色，這在需要實現深、淺色模式的場景十分便利。</p>
<p>透過&#x3C;svg>標籤，還有另外的優點，可以透過JavaScript對於其中的路徑元素，進行操作，例如：動畫。下面範例是使用JavaScript對網頁中的&#x3C;svg>中的一組元素進行上下移動的範例。</p>
<style>
    .codeAndDisplayBox {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
      flex-direction: row

    }

    .exampleCode {
        width: 50%;
    }

    .resultDisplay {
        width: 50%;
      padding:20px;
    }
  @media (max-width: 768px) {
        .codeAndDisplayBox {
        flex-wrap: wrap;
          flex-direction: column-reverse

    }
        .exampleCode {
        width: 100%;
    }

    .resultDisplay {
            width: 100%;
    }

}
</style>
<div class="codeAndDisplayBox">
    <div class="exampleCode">
        <div style="width: 100%;aspect-ratio: 1/1;overflow-y: scroll;">
            <script src="https://gist.github.com/2460124601/c870418bc8a32fda10267391dcb42b45.js"></script>
        </div>
            <a href="https://gist.github.com/2460124601/c870418bc8a32fda10267391dcb42b45?ref=blog.twintype.co" target="_blank" rel="noopener noreferrer"><p>前往GitHub Gist查看完整示範</p></a>

    </div>
    <div class="resultDisplay">
        <svg id="a01" data-name="a01" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 283.46" style="width:100%;height:auto;">
            <defs>
                <style>
                    .cls-1 {
                        fill: none;
                        stroke: #631010;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                        stroke-width: 16px;
                    }
                </style>
            </defs>
            <path class="cls-1" d="M24.81,243.87c123.99-50.46,123.99,39.38,233.85,0"></path>
            <g id="floatPathGroup">
                <path class="cls-1" d="M37.9,129.74c15.54,38.22,23.05,52.12,103.83,52.12s88.29-13.9,103.83-52.12c-51.76,24.1-156.17,23.98-207.66,0Z"></path>
                <polyline class="cls-1" points="133.43 147.67 133.43 27.14 227 91.9 136.48 91.9"></polyline>
            </g>
        </svg>
    </div>
</div>

<script>
    (function () {
        const svg = document.getElementById('a01');
        const floatGroup = document.getElementById('floatPathGroup');
        if (!svg || !floatGroup) return;

        let start = null;
        const amplitude = 5;
        const duration = 2000;

        function animate(timestamp) {
            if (!start) start = timestamp;
            const elapsed = timestamp - start;
            const progress = (elapsed % duration) / duration;
            const angle = progress * Math.PI * 2;
            const offset = Math.sin(angle) * amplitude;

            floatGroup.setAttribute('transform', 'translate(0,' + offset + ')');
            requestAnimationFrame(animate);
        }
        requestAnimationFrame(animate);
    })();
</script>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/20251125-009.jpg" class="kg-image" alt="instagram即採用嵌入<SVG>之方案" loading="lazy" width="1764" height="812" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/20251125-009.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/20251125-009.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/20251125-009.jpg 1600w, https://blog.twintype.co/content/images/2026/01/20251125-009.jpg 1764w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">instagram即採用嵌入&#x3C;SVG>之方案</span></figcaption></figure>
<p>在&#x3C;svg>希望做到類似於&#x3C;img>之「alt」屬性，可以使用「aria-label」屬性，抑或是在&#x3C;svg>標籤底下包夾&#x3C;title>。</p>
<h2 id="%E7%AC%AC%E4%B8%89%E7%A8%AE%EF%BC%9Aiconfont-%E5%B0%87%E5%9C%96%E7%A4%BA%E5%B0%81%E8%A3%9D%E6%88%90%E5%AD%97%E5%9E%8B">第三種：iconfont-將圖示封裝成字型</h2>
<p>上述的SVG方法，已經可以解決，解析度與動態調整顏色的問題，但如果在一個網頁塞入多個複雜的SVG，可能會出現開發不易（會增加HTML程式碼量，除非參考Meta用框架解決管理問題），還有可能出現像是Vue框架渲染錯誤情況，或是特定使用場景用戶瀏覽器不支援之情況（ft.IE 8）。</p>
<p>因此iconfont誕生，這本質上就是將圖示塞入字體檔案中。這樣做的好處，可以降低更新成本，假設今天有個網頁的圖示風格要全面更新，這樣需要重新打包成字體檔案，將字體檔案替換即可，前端程式碼不用逐一更新。且因為字體顯示在所有瀏覽器都已經很成熟，所以因為兼容性問題發生機率較低。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/20251125-006.jpg" class="kg-image" alt="將圖示封裝入字體檔示意圖" loading="lazy" width="2000" height="892" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/20251125-006.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/20251125-006.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/20251125-006.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/01/20251125-006.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">將圖示封裝入字體檔示意圖</span></figcaption></figure>
<p>而且因為是字體，所以可以支援<a href="https://blog.twintype.co/variable_fonts_otvaroverview/">可變字體技術</a>，動態調整粗細，應用更加廣闊，例如在許多網頁都有深色、淺色模式，一般情況下與白底黑字同樣粗的字體，在深色背景淺色文字下會顯得較粗，此時如果是可變字體，就可以進行微調。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/20251125-008.jpg" class="kg-image" alt="在Google Material Icons所提供之圖示支援三軸可調節參數" loading="lazy" width="2000" height="946" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/20251125-008.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/20251125-008.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/20251125-008.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2026/01/20251125-008.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">在Google Material Icons所提供之圖示支援三軸可調節參數</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/20251125-005.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="681" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/20251125-005.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/20251125-005.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/20251125-005.jpg 1600w, https://blog.twintype.co/content/images/2026/01/20251125-005.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">同樣粗細的字體，黑底白字會相較白底黑字看起來更粗</span></figcaption></figure>
<p>隨然聽起來簡單，但實作上仍有許多細節的差異。</p>
<p>第一種：以偽元素+字型形式。是將所需要的圖示封裝到字體中，但Unicode碼位使用私人使用區（Private Use Areas）避免衝突，再透過HTML標註資訊，CSS指定字體。</p>
<p>以知名圖示服務fontawesome來說，首先鑲嵌官方提供的JS程式碼，這段程式碼會自動載入需要的css與woff（字體檔）文件，其中CSS文件會已經設定好多組class的樣式，只要用戶複製fontawesome提供的&#x3C;i>元素，就能成功將圖示以「偽元素」的方式加載。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/20251125-004.jpg" class="kg-image" alt="fontawesome 運作原理示意" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/20251125-004.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/20251125-004.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/20251125-004.jpg 1600w, https://blog.twintype.co/content/images/2026/01/20251125-004.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">fontawesome 運作原理示意</span></figcaption></figure>
<p>第二種：透過強制連字（required ligatures）完成。「連字」顧名思義，透過設定字體檔案，當出現特定排列後，執行替換字符。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2026/01/20251125-007.png" class="kg-image" alt="在Glyphs中設定強制連字畫面截圖" loading="lazy" width="2000" height="954" srcset="https://blog.twintype.co/content/images/size/w600/2026/01/20251125-007.png 600w, https://blog.twintype.co/content/images/size/w1000/2026/01/20251125-007.png 1000w, https://blog.twintype.co/content/images/size/w1600/2026/01/20251125-007.png 1600w, https://blog.twintype.co/content/images/size/w2400/2026/01/20251125-007.png 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">在Glyphs中設定強制連字畫面截圖</span></figcaption></figure>
<p>這樣的好處是保留了「語意」，因為只是替換顯示效果，在HTML中還是文字本生的意思，如果該介面只有使用圖示表示動作的情況下，對於視障者的螢幕閱讀軟體，可以直接讀取到文字，不必額外設定。</p>
<p>但反之也可能會出現務問題，多半透過聯字的圖示服務都是使用英文，例如：Google Material Icons，如果用戶開啟網頁自動翻譯，會因為字符被翻譯成其他文種，導致強制連字失效。不過開發者只需要在該元素加上「translate="no"」即可。</p>
<style>
        @font-face {
            font-family: "TwinTypeIcon";
            font-weight: 400;
            src: url(data:application/octet-stream;base64,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);
        }

        .twintype-icon-vf {
            font-family: 'TwinTypeIcon';
            font-size: 4em;
        }
    </style>
    <div class="codeAndDisplayBox">
        <div class="exampleCode">
            <div style="width: 100%;aspect-ratio: 1/1;overflow-y: scroll;">
                <script src="https://gist.github.com/2460124601/b5f1182b64de3e31a1b7668fb37ea501.js"></script>
            </div>
            <a href="https://gist.github.com/2460124601/b5f1182b64de3e31a1b7668fb37ea501?ref=blog.twintype.co" target="_blank" rel="noopener noreferrer">前往GitHub Gist查看完整示範</a>

        </div>
        <div class="resultDisplay" style="display: flex;justify-content: center;align-items: center;">
            <span class="twintype-icon-vf" translate="no">cart</span>
        </div>
    </div>
<p>上面的示範，是啟用了「cart」強制連字功能，大家可以嘗試選中這個圖是並且按下複製並貼到記事本，或是用電腦打開網頁開發者工具，就會看到其實他在HTML是顯示「cart」。</p>
<h2 id="%E8%A9%B2%E6%80%8E%E9%BA%BC%E9%81%B8%EF%BC%9F">該怎麼選？</h2>
<p>如果你希望複雜的擬物、3D效果，哪麼圖片也許會是最直觀的選擇；如果希望針對圖示有動畫、轉場、漸層等那麼SVG方案會很適合，如果是大規模專案，需要高度統一的設計語彙，不追求漸層、旋轉等特效，iconfont的方式在管理上會便利許多，是個合適的選擇。</p>
<p></p>
<div class="quoteBox">
  <h3 class="referenceTitle">相關連結</h3>
  <div class="referenceBox">
    <ol>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img?ref=blog.twintype.co" target="_blank">&#x3C;img>:  The Image Embed element - HTML | MDN</a></li>
        <li><a href="https://stackoverflow.com/questions/23210126/inline-svg-vs-svg-file-performance?ref=blog.twintype.co" target="_blank">html - Inline SVG vs SVG File Performance - Stack Overflow</a></li>
        <li><a href="https://www.w3.org/groups/wg/svg/?ref=blog.twintype.co" target="_blank">SVG | Working Groups | Discover W3C groups | W3C</a></li>
        <li><a href="https://www.linkedin.com/posts/airbnb_the-airbnb-2025-summer-release-activity-7328129178187317249-b-ct?utm_source=share&#x26;utm_medium=member_desktop&#x26;rcm=ACoAADz0T8EBuFGj3Lue4EMttOlDudF2ChWtgtk" target="_blank">The Airbnb 2025 Summer Release | Airbnb</a></li>
        <li><a href="https://fonts.google.com/icons?ref=blog.twintype.co" target="_blank">Material Symbols and Icons - Google Fonts</a></li>
        <li><a href="https://fontawesome.com/?ref=blog.twintype.co" target="_blank">Kit | Font Awesome</a></li>
        <li><a href="https://learn.microsoft.com/en-us/globalization/encoding/pua?ref=blog.twintype.co" target="_blank">Private use area (PUA) characters and End-user-defined characters (EUDCs) - Globalization | Microsoft Learn</a></li>
        <li><a href="view-source:https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/opentype-font-features" target="_blank">OpenType Font Features - WPF | Microsoft Learn</a></li>
    </ol>
</div>
</div>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u><p>https://l.twinty.pe/Mgd3qQ</p></u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <p>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</p>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/Mgd3qQ";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>
<p></p>
<p></p>]]></content:encoded></item><item><title><![CDATA[缺字如何解決？]]></title><description><![CDATA[<p>上次我們講到了「為何缺字」，今天要來介紹遇到缺字時的幾個方式！今天分享幾個常見的解決方法！   第一招：換字體  三十六計，走為上策。這聽起來看似投降，但實則最為保險，例如：是要製作大量姓名、教學文件內文，有大量生僻字。強烈建議使用：蘋方...等系統內建字型，或是思源、花園明朝體等字符集相較完整之字體。  *使用時依舊需要注意授權，例如：Office軟體內建之微軟雅黑體不得商用！  這樣的做法在醫院系統、身分證件......等，長出現生僻字之場景十分常見，像是身分證上就採用了「教育部標準宋體」，一款「新細明體」的胞弟字體，雖說在美感上較於基礎，但收錄字數廣，共有 24,034 個字符，適合用於顯示姓名。   第二招：補字  在少數情況下，可透過補字將缺少的字符，重新封狀進入字體檔案，這樣的方式適合針對開源字體，非常實用，不過前提是，需要擁有字體編輯軟體，像是免費的：FontForge，或是Glyphs、FontCreator等。  補字時的技巧是，先觀察相似部件的字符、中宮，在從相似的部件複製，並加以修改。同時已可以參考相似風格的字「形」處理，包括筆畫、筆型風格......等。  此處</p>]]></description><link>https://blog.twintype.co/how-to-fix-missing-glyphs/</link><guid isPermaLink="false">68f31203ba70490001a27d14</guid><category><![CDATA[字型技術]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/how-to-fix-missing-glyphs.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Mon, 24 Nov 2025 15:40:54 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/10/251016000.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/10/251016000.jpg" alt="缺字如何解決？"><br><p>上次我們講到了「為何缺字」，今天要來介紹遇到缺字時的幾個方式！今天分享幾個常見的解決方法！</p>
<h2 id="%E7%AC%AC%E4%B8%80%E6%8B%9B%EF%BC%9A%E6%8F%9B%E5%AD%97%E9%AB%94">第一招：換字體</h2>
<p>三十六計，走為上策。這聽起來看似投降，但實則最為保險，例如：是要製作大量姓名、教學文件內文，有大量生僻字。強烈建議使用：蘋方...等系統內建字型，或是思源、花園明朝體等字符集相較完整之字體。</p>
<p>*使用時依舊需要注意授權，例如：Office軟體內建之微軟雅黑體不得商用！</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/10/251016001.jpg" class="kg-image" alt="個字體對於生僻字顯示狀況示意，包括：蘋方體、華康粗黑體、翔鶴黑體、新細明體、筑紫明朝體、思源宋體、蘭陽明體" loading="lazy" width="2000" height="1125" srcset="https://blog.twintype.co/content/images/size/w600/2025/10/251016001.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/10/251016001.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/10/251016001.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/10/251016001.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">系統字型與其他字型對比</span></figcaption></figure>
<p>這樣的做法在醫院系統、身分證件......等，長出現生僻字之場景十分常見，像是身分證上就採用了「教育部標準宋體」，一款「新細明體」的胞弟字體，雖說在美感上較於基礎，但收錄字數廣，共有 24,034 個字符，適合用於顯示姓名。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/11/251016002.jpg" class="kg-image" alt="中華民國身分證使用字體示意圖" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2025/11/251016002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/11/251016002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/11/251016002.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/11/251016002.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">身分證示意圖。</span></figcaption></figure>
<h2 id="%E7%AC%AC%E4%BA%8C%E6%8B%9B%EF%BC%9A%E8%A3%9C%E5%AD%97">第二招：補字</h2>
<p>在少數情況下，可透過補字將缺少的字符，重新封狀進入字體檔案，這樣的方式適合針對開源字體，非常實用，不過前提是，需要擁有字體編輯軟體，像是免費的：FontForge，或是Glyphs、FontCreator等。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/11/251016003.jpg" class="kg-image" alt="以FontCreator為例進行補字畫面節圖" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2025/11/251016003.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/11/251016003.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/11/251016003.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/11/251016003.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">以FontCreator為例進行補字</span></figcaption></figure>
<p>補字時的技巧是，先觀察相似部件的字符、中宮，在從相似的部件複製，並加以修改。同時已可以參考相似風格的字「形」處理，包括筆畫、筆型風格......等。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/11/251016004-1.jpg" class="kg-image" alt="組字示意圖，使用Zen Maru Gothic中的「仁」+「祢」組出「你」" loading="lazy" width="2000" height="1125" srcset="https://blog.twintype.co/content/images/size/w600/2025/11/251016004-1.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/11/251016004-1.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/11/251016004-1.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/11/251016004-1.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">以Zen Maru Gothic為例進行補字</span></figcaption></figure>
<p>此處使用Zen Maru Gothic進行補字作業，因為該字體為日文字形，缺少「你」，因此抓取「祢」與「仁」拼湊後微調。</p>
<p>請注意，絕大多數商用字型，即使你已購買授權，也不允許逆向、重新編譯字體文件，即使免費字型也有可能存在此限制，在編輯字體文件前，請先確保授權條款相關說明，如有疑慮需要與原廠商聯繫。</p>
<h2 id="%E7%AC%AC%E4%B8%89%E6%8B%9B%EF%BC%9A%E6%97%A5%E6%96%87%E6%BC%A2%E5%AD%97">第三招：日文漢字</h2>
<p>此招適用於日文字型，首先我們能先使用「小心！鶗鴂（ほととぎす）身體上的蟎蟲，如果你接觸到，雙手請務必經過消毒。」測試，該字體缺字程度與相關資訊。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/11/251016005.jpg" class="kg-image" alt="測試語句可以檢測字體缺字情況" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2025/11/251016005.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/11/251016005.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/11/251016005.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/11/251016005.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">測試語句可以檢測字體缺字情況</span></figcaption></figure>
<p>接著我們能使用網路工具——柯志杰先生製作的「<a href="https://zi-hi.com/sp/jfont/?ref=blog.twintype.co">字嗨：日文字型缺字檢查工具</a>」，將文本輸入，並選擇對應字集，查看是否有可替代之可能。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/11/251016007.jpg" class="kg-image" alt="字嗨：日文字型缺字檢查工具畫面截圖" loading="lazy" width="2000" height="876" srcset="https://blog.twintype.co/content/images/size/w600/2025/11/251016007.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/11/251016007.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/11/251016007.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/11/251016007.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">字嗨：日文字型缺字檢查工具畫面截圖</span></figcaption></figure>
<p>例如使用「VDL ペンジェントル B」該Std標準之字體顯示「心愛的無緣的人」，其中「緣」存在替換字符。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/11/251016006.jpg" class="kg-image" alt="「緣」於日文字體中的替換字" loading="lazy" width="2000" height="1125" srcset="https://blog.twintype.co/content/images/size/w600/2025/11/251016006.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/11/251016006.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/11/251016006.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/11/251016006.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">「緣」於日文字體中的替換字</span></figcaption></figure>
<p>唯這樣的作法，通常是用於主視覺或其他等字數較少的情況下，長文本建議還是選用繁體中文字型，確保顯示效果、排版流暢性。</p>
<h2 id="%E6%89%80%E4%BB%A5%E8%A9%B2%E6%80%8E%E9%BA%BC%E5%81%9A%EF%BC%9F">所以該怎麼做？</h2>
<p>如果是開源字體，可以考慮自行補字，或是社區提供的衍生版本。如果是是日文字型存在替換字符的可能性。但如果是大量繁體中文字體缺少，簡易改換成字符集足夠、完整的字體以利後續作業！</p>
<div class="quoteBox">
<h3>相關連結</h3>
<a href="https://zi-hi.com/sp/jfont/?ref=blog.twintype.co" target="_blank">日文字型缺字檢查工具 - 字嗨！</a><br>

  
</div>
<style>
    .quoteBox{
        width: 100%;

        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 2em;
    }
  h3{
    margin-top: 0px;
    
}
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/CGRxED</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/CGRxED";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>
<p></p>
<p></p>]]></content:encoded></item><item><title><![CDATA[為何會缺字？？]]></title><description><![CDATA[<p>在日常生活中的海報、告示牌，偶而會發現某個字「怪怪」的，貌似是走錯棚，風格與其他文字大不相同，你可能遇上「缺字」了！  以〈淚體〉打出《陸渾山火和皇甫湜用其韻》可以看到「衁、釂、谽、膰」4字無法正常顯示。所以到底是為甚麼缺字？還有如何解決？   最最最常見的情況：沒有收錄  漢字繁多，而且可能因為地區、文化、語言差異，發展出許多異體字...等，要完全收入工作量龐大，這還涉及編碼、檔案格式兼容性問題。   誰能都收錄？  因為漢字實在太太太多了，因此沒有一套字體可以完整收錄所有漢字，這時候就會使用字符集來定要要收錄那些文字。   繁體中文界的老學長：Big5  繁體中文最知名的就是，由資策會主導推行的Big5，此字符集在2003年推出，後來又有陸續增訂。  但同樣可能因為地區、文化、用途...等不同，對於部分人群常用的字未收入，所以實務上各家字體廠商還會再進行微調。   包羅萬象的Unicode  全稱「萬國碼」。全世界的語言、文字系統時分龐雜，要讓文字能夠在所有人的設備、裝置都很好的顯示，就需要統一標準。  Unicode 組織正是處理此事的大掌櫃。截至2025年，Unicode編碼已</p>]]></description><link>https://blog.twintype.co/the-missing-font-mystery/</link><guid isPermaLink="false">68ec5741ba70490001a27c0b</guid><category><![CDATA[字型技術]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/tofu.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Wed, 15 Oct 2025 02:30:08 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/10/25100100.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/10/25100100.jpg" alt="為何會缺字？？"><br><p>在日常生活中的海報、告示牌，偶而會發現某個字「怪怪」的，貌似是走錯棚，風格與其他文字大不相同，你可能遇上「缺字」了！</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/10/00234-1.jpg" class="kg-image" alt="以〈淚體〉打出《陸渾山火和皇甫湜用其韻|TwinType" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2025/10/00234-1.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/10/00234-1.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/10/00234-1.jpg 1600w, https://blog.twintype.co/content/images/2025/10/00234-1.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">以〈淚體〉打出《陸渾山火和皇甫湜用其韻》</span></figcaption></figure>
<p>以〈淚體〉打出《陸渾山火和皇甫湜用其韻》可以看到「衁、釂、谽、膰」4字無法正常顯示。所以到底是為甚麼缺字？還有如何解決？</p>
<h2 id="%E6%9C%80%E6%9C%80%E6%9C%80%E5%B8%B8%E8%A6%8B%E7%9A%84%E6%83%85%E6%B3%81%EF%BC%9A%E6%B2%92%E6%9C%89%E6%94%B6%E9%8C%84">最最最常見的情況：沒有收錄</h2>
<p>漢字繁多，而且可能因為地區、文化、語言差異，發展出許多異體字...等，要完全收入工作量龐大，這還涉及編碼、檔案格式兼容性問題。</p>
<h2 id="%E8%AA%B0%E8%83%BD%E9%83%BD%E6%94%B6%E9%8C%84%EF%BC%9F">誰能都收錄？</h2>
<p>因為漢字實在太太太多了，因此沒有一套字體可以完整收錄所有漢字，這時候就會使用字符集來定要要收錄那些文字。</p>
<h2 id="%E7%B9%81%E9%AB%94%E4%B8%AD%E6%96%87%E7%95%8C%E7%9A%84%E8%80%81%E5%AD%B8%E9%95%B7%EF%BC%9Abig5">繁體中文界的老學長：Big5</h2>
<p>繁體中文最知名的就是，由資策會主導推行的<a href="https://idv.sinica.edu.tw/bear/charcodes/Section09.htm?ref=blog.twintype.co">Big5</a>，此字符集在2003年推出，後來又有陸續增訂。</p>
<p>但同樣可能因為地區、文化、用途...等不同，對於部分人群常用的字未收入，所以實務上各家字體廠商還會再進行微調。</p>
<h2 id="%E5%8C%85%E7%BE%85%E8%90%AC%E8%B1%A1%E7%9A%84unicode">包羅萬象的Unicode</h2>
<p>全稱「萬國碼」。全世界的語言、文字系統時分龐雜，要讓文字能夠在所有人的設備、裝置都很好的顯示，就需要統一標準。</p>
<p>Unicode 組織正是處理此事的大掌櫃。截至2025年，Unicode編碼已經收錄盡159,000餘字。</p>
<p>也因此，很少人會以Unicode作為開發使用的字符集，因為實在太多，難以負荷，加上一個OpenType字型最多也只能收65,536錄字符。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/10/25100102.jpg" class="kg-image" alt="各字符集涵蓋範圍關係圖|TwinType" loading="lazy" width="1815" height="1022" srcset="https://blog.twintype.co/content/images/size/w600/2025/10/25100102.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/10/25100102.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/10/25100102.jpg 1600w, https://blog.twintype.co/content/images/2025/10/25100102.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">各字符集涵蓋範圍關係圖</span></figcaption></figure>
<h2 id="%E6%9B%B4local%E7%9A%84%E9%81%B8%E6%93%87%EF%BC%9Ajf-7000">更local的選擇：jf 7000</h2>
<p>該字符集由justfont公司主導推行，聽其名即可知涵蓋範圍約7,000字，官方也與社群一同製作其它擴展包，例如：昆蟲、韓星...等多元領域的擴充包。因其字符數量較精簡，對於獨立設計師踏入字型設計領域十分友好。</p>
<p>隨然數量只有接近Big5的一半，但因為是挑選使用頻率較高的字符，所以日常使用基本不用擔心。正所謂「收得多，不如收得巧」—自己講 xD。</p>
<h2 id="%E7%BC%BA%E5%AD%97%E7%9A%84%E5%8E%9F%E5%9B%A02%EF%BC%9A%E7%89%B9%E6%AE%8A%E5%B0%88%E7%94%A8%E5%AD%97%E7%AC%A6">缺字的原因2：特殊專用字符</h2>
<p>剛剛提到「字符集」，其中「Unicode」是主流流通用的編碼字串處理基礎。而Big5、jf 7000更像是篩選後的小範圍。</p>
<p>打個比方「Unicode」是一家連鎖超市總公司，每項產品是一個字符，而Big5、jf 7000就好比是每家分店自己的分類方式，你可以將酪梨分到水果區，也可以將它分到蔬菜區，這完全取決於各家分店！</p>
<p>不過如果今天這家連鎖超市（Unicode）總公司沒有販售「枲」，但是某分店私下販賣，就算缺貨也調不到，因為總公司根本沒有收錄這項商品，其他分店也不會有庫存。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/10/s-------------1--------3ss.jpg" class="kg-image" alt="Unicode與Big5、jf 7000...等其他字符集之間關係是意圖|TwinType" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2025/10/s-------------1--------3ss.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/10/s-------------1--------3ss.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/10/s-------------1--------3ss.jpg 1600w, https://blog.twintype.co/content/images/2025/10/s-------------1--------3ss.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Unicode與Big5、jf 7000...等其他字符集之間關係是意圖</span></figcaption></figure>
<p>Unicode也保留部分私有字段，供設計師們載入特殊符號...等。例如：justfont公司的〈柑仔蜜〉就有替換字符。透過輸入特定字符串後，可以調用，但是該符號在其它字體中就無法顯示！</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://imagehub.twinty.pe/images/25100103.gif" class="kg-image" alt="特殊字符調用示意|TwinType" loading="lazy" width="908" height="427" srcset="https://imagehub.twinty.pe/images/25100103.gif 600w, https://imagehub.twinty.pe/images/25100103.gif 908w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">特殊字符調用示意</span></figcaption></figure>
<h2 id="%E7%BC%BA%E5%AD%97%EF%BC%8C%E9%80%99%E9%A1%8C%E6%9C%89%E8%A7%A3%E5%97%8E%EF%BC%9F">缺字，這題有解嗎？</h2>
<p>今天先不談論，如果遇上缺字有甚麼替代方案。在使用任何字體前，除了視覺美感上，我們不妨先思考使用場景？是一句標題還是需要大量內文？</p>
<p>透過清晰了解自身需求後，可至各家字體廠商網頁查詢規格，亦或是試打，大部分廠商都提供了字型測試（僅供測試）確認符合需求後再購買！</p>
<div class="quoteBox">
<h3>相關連結</h3>
<a href="https://github.com/justfont/jf7000?ref=blog.twintype.co" target="_blank">jf 7000 Character Set</a><br>

<a href="https://home.unicode.org/?ref=blog.twintype.co" rel="noreferrer" target="_blank">Unicode – The World Standard for Text and Emoji</a><br>

<a href="https://www.cns11643.gov.tw/wordCount.jsp?ID=0&#x26;SN=&#x26;lang=tw&#x26;ref=blog.twintype.co" rel="noreferrer" target="_blank">全字庫 CNS11643 (2024)</a><br>

<a href="https://googleprojectzero.github.io/0days-in-the-wild/0day-RCAs/2020/CVE-2020-0938.html?ref=blog.twintype.co" rel="noreferrer" target="_blank">CVE-2020-0938: Windows Font Driver Type 1 BlendDesignPositions stack corruption</a><br>

<a href="https://learn.microsoft.com/en-us/windows/apps/design/globalizing/use-utf8-code-page?ref=blog.twintype.co" rel="noreferrer" target="_blank">Use UTF-8 code pages in Windows apps - Windows apps | Microsoft Learn</a><br>

<a href="https://www.unicode.org/charts/PDF/U4E00.pdf?ref=blog.twintype.co" rel="noreferrer" target="_blank">CJK Unified Ideographs_U4E00</a><br>
</div>
<style>
    .quoteBox{
        width: 100%;

        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 2em;
    }
  h3{
    margin-top: 0px;
    
}
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/IDZNct</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/IDZNct";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>
<p></p>
<p></p>]]></content:encoded></item><item><title><![CDATA[以字之名： 藏於暗處的伏擊]]></title><description><![CDATA[<p>你知道字體業能作為駭客攻擊的武器嗎？這其實不難理解「駭客攻擊」本質上就是透過非正規手段，破壞、竊取資訊，而手段可以非常多元，今天的案例就是以字體文件為載體。   伏擊的載體：Multi-Master Type 1  在 2020 年，一個被編號為 CVE-2020-0938 的漏洞， 它藏在 Windows 的 Adobe Type Manager (ATM) 元件內裡，這是個用來解析 Adobe Type 1 字型的元件。  它處理的的並不是我們日常熟悉的 .ttf、.oft 而是一個更古老的技術：Multi-Master Type 1，該檔案被拆分成 .pfb、.pfm 兩部分，需要同時擁有才可正確顯示。  簡單介紹 Multi-Master，簡單來說就是「可變字型」的雛形，讓設計師能在細與粗、窄與寬之間插值，生成無限可能。然而超前部署（以當時帶來說）的技術，卻也為惡意者留下了縫隙。  目前該技術也要棄用，不過在 Windows 10 上還是有相關套件。   所以破口在哪？  漏洞的關鍵在於一個參數「num_master」。 它用來記錄字型中有多少個母版。當時設計人員預設，這個數字</p>]]></description><link>https://blog.twintype.co/font-exploit_cve-2020-0938/</link><guid isPermaLink="false">68a58c0a6a8a3a0001616a18</guid><category><![CDATA[字型技術]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/font-exploit_cve-2020-0938.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Wed, 20 Aug 2025 19:19:30 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/08/001.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/08/001.jpg" alt="以字之名： 藏於暗處的伏擊"><br><p>你知道字體業能作為駭客攻擊的武器嗎？這其實不難理解「駭客攻擊」本質上就是透過非正規手段，破壞、竊取資訊，而手段可以非常多元，今天的案例就是以字體文件為載體。</p>
<h2 id="%E4%BC%8F%E6%93%8A%E7%9A%84%E8%BC%89%E9%AB%94%EF%BC%9Amulti-master-type-1">伏擊的載體：Multi-Master Type 1</h2>
<p>在 2020 年，一個被編號為 CVE-2020-0938 的漏洞， 它藏在 Windows 的 Adobe Type Manager (ATM) 元件內裡，這是個用來解析 Adobe Type 1 字型的元件。</p>
<p>它處理的的並不是我們日常熟悉的 .ttf、.oft 而是一個更古老的技術：Multi-Master Type 1，該檔案被拆分成 .pfb、.pfm 兩部分，需要同時擁有才可正確顯示。</p>
<p>簡單介紹 Multi-Master，簡單來說就是「可變字型」的雛形，讓設計師能在細與粗、窄與寬之間插值，生成無限可能。然而超前部署（以當時帶來說）的技術，卻也為惡意者留下了縫隙。</p>
<p>目前該技術也要棄用，不過在 Windows 10 上還是有相關套件。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/09/003.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2025/09/003.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/09/003.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/09/003.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/09/003.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Myriad MM 可以說是第一款利用該技術問世的字體。</span></figcaption></figure>
<h2 id="%E6%89%80%E4%BB%A5%E7%A0%B4%E5%8F%A3%E5%9C%A8%E5%93%AA%EF%BC%9F">所以破口在哪？</h2>
<p>漏洞的關鍵在於一個參數「num_master」。 它用來記錄字型中有多少個母版。當時設計人員預設，這個數字應該在合理範圍內不超過 15 個，因此導致一旦超出就會出現錯誤，加上又沒有完善的錯誤處理機制。</p>
<p>ATM 開了一塊固定大小的記憶體陣列，預期 num_master ≤ 15，然而攻擊者可以在字型檔裡寫個 50、100，只要超過就會錯誤。</p>
<p>資料一筆筆寫進去，超出邊界，往上覆蓋堆疊上的其他數據，最後連 return address 也被覆寫。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2025/09/002.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2025/09/002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/09/002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/09/002.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/09/002.jpg 2400w" sizes="(min-width: 720px) 720px"></figure>
<p>當函式執行 return，程式流程就不再回到應有的位置，而是跳到攻擊者指定的地址，並執行惡意程式碼。</p>
<h2 id="%E6%94%BB%E6%93%8A%E5%A0%B4%E6%99%AF%EF%BC%9A%E4%BD%A0%E6%88%91%E7%9A%84%E6%97%A5%E5%B8%B8">攻擊場景：你我的日常</h2>
<p>該漏洞有個最危險的地方，因為該字型格式主要用於印刷場景，因此可以夾帶在 PDF、CorelDRAW......等常見排印軟體文件中。甚至 Windows Explorer 的預覽窗格，單純瀏覽資料夾，就可能觸發解析。</p>
<h2 id="%E5%A6%82%E4%BD%95%E9%98%B2%E7%A6%A6">如何防禦</h2>
<p><strong>系統軟體開發設計面</strong>：「靈芝的好壞在多醣體，程式的好壞在錯誤處理」，所有功能要預想到可能錯誤情況事先加以應對，以及做好記憶體管理，或直接使用較於安全 Rust（非戰鬥人員迅速撤離）...等程式語言，避免記憶體指針問題。</p>
<p><strong>使用者層面</strong>：首先不下載、開啟、使用來路不明的檔案、字體文件，這是最重要的。如果必要，要使用虛擬環境開啟，或是尋求 IT 部門人員協助。以及定期更新系統。</p>
<h2 id="%E6%BC%8F%E6%B4%9E%E7%8F%BE%E6%B3%81%E7%8F%BE%E6%B3%81">漏洞現況現況</h2>
<p>微軟在 2020 年 4 月的「Patch Tuesday」資安更新包，已提出修復方式。 在此之前，官方建議用戶暫時停用 ATMFD.DLL 相關套件。</p>
<p>不過根據網路上的資料，沒有查到有大規模攻擊事件。目前的 Windows 11 也已經移除相關套件，但是部分 win32 API 還是有顯示支援 .pfb、.pfm 文件，尚未確定在 windows 11 中會有何影響。</p>
<div class="quoteBox">
    <h3>相關連結</h3>
        <a href="https://nvd.nist.gov/vuln/detail/cve-2020-0938?ref=blog.twintype.co" rel="noreferrer" target="_blank">CVE-2020-0938 Detail</a><br>

  <a href="https://helpx.adobe.com/tw/fonts/kb/postscript-type-1-fonts-end-of-support.html?ref=blog.twintype.co" rel="noreferrer" target="_blank">終止支援 PostScript Type 1 字體</a><br>

  <a href="https://cs.uwaterloo.ca/~dberry/COURSES/electronic.pub/fishler/multiple.htm?ref=blog.twintype.co" rel="noreferrer" target="_blank">Multiple Master Type 1 Font Programs</a><br>

    <a href="https://googleprojectzero.github.io/0days-in-the-wild/0day-RCAs/2020/CVE-2020-0938.html?ref=blog.twintype.co" rel="noreferrer" target="_blank">CVE-2020-0938: Windows Font Driver Type 1 BlendDesignPositions stack corruption</a><br>

      <a href="https://msrc.microsoft.com/update-guide/en-US/advisory/CVE-2020-0938?ref=blog.twintype.co" rel="noreferrer" target="_blank">Security Update Guide - Microsoft Security Response Center</a><br>
</div>
<style>
    .quoteBox{
        width: 100%;

        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 3em;
    }
  h3{
    margin-top: 0px;
    
}
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/DSOV1b</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/DSOV1b";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>
<p></p>
<p></p>]]></content:encoded></item><item><title><![CDATA[字體界的翻譯年糕：標準字的本地化實驗]]></title><description><![CDATA[<p>考考大家「Now, You're talking」如何翻譯？如果只看原文直接翻譯會變成「現在，你正在說話」，但其實常看美劇的朋友都知道，這句話更應該像是「你終於說人話了」、「這才像話！」。  同樣的問題也發生在「標準字」上。當我們面對來自不同文化語境的標誌設計，如果只是「直譯」──簡單將文字內容換成中文，往往會失去原有的語氣、氛圍與設計張力；而若是「意譯」──重新理解其內涵，並在本地語境中轉換成符合觀眾閱讀習慣的形式，才能讓視覺語言真正「說人話」。  這正是「翻譯標準字」的核心：它並不只是語言的轉換，而是一種跨文化的詮釋與再創造。   如何「翻譯」標準字？  一般來說遇到此類外文標誌，可以分兩種處理方式。  第一類：保留原文標題與標誌，加以搭配中文副標題，此類處理手法，可能會選用較於「中性」風格較不強烈的字型，避免出現，兩種標題一樣搶眼的情況。  如《羅密歐與茱麗葉》，保留原文的書寫感，中文則簡單搭配明體（可能為思源宋體）。  第二類：使用本地化名稱為主要標題，此時就需要考驗設計如何將原版標誌轉譯成在地化文本之設計。  像是《鐵達尼號》音樂劇，如上圖，由左至右分別為：繁體、西區原版、簡</p>]]></description><link>https://blog.twintype.co/localizing-brand-logotypes-in-chinese/</link><guid isPermaLink="false">68a2cb3c6a8a3a00016168dc</guid><category><![CDATA[設計]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/localizing-brand-logotypes-in-chinese.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Mon, 18 Aug 2025 14:10:01 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/08/FI0.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/08/FI0.jpg" alt="字體界的翻譯年糕：標準字的本地化實驗"><br><p>考考大家「Now, You're talking」如何翻譯？如果只看原文直接翻譯會變成「現在，你正在說話」，但其實常看美劇的朋友都知道，這句話更應該像是「你終於說人話了」、「這才像話！」。</p>
<p>同樣的問題也發生在「標準字」上。當我們面對來自不同文化語境的標誌設計，如果只是「直譯」──簡單將文字內容換成中文，往往會失去原有的語氣、氛圍與設計張力；而若是「意譯」──重新理解其內涵，並在本地語境中轉換成符合觀眾閱讀習慣的形式，才能讓視覺語言真正「說人話」。</p>
<p>這正是「翻譯標準字」的核心：它並不只是語言的轉換，而是一種跨文化的詮釋與再創造。</p>
<h2 id="%E5%A6%82%E4%BD%95%E3%80%8C%E7%BF%BB%E8%AD%AF%E3%80%8D%E6%A8%99%E6%BA%96%E5%AD%97%EF%BC%9F">如何「翻譯」標準字？</h2>
<p>一般來說遇到此類外文標誌，可以分兩種處理方式。</p>
<p>第一類：保留原文標題與標誌，加以搭配中文副標題，此類處理手法，可能會選用較於「中性」風格較不強烈的字型，避免出現，兩種標題一樣搶眼的情況。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/20240904150837990-1.jpg" class="kg-image" alt="" loading="lazy" width="1360" height="457" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/20240904150837990-1.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/20240904150837990-1.jpg 1000w, https://blog.twintype.co/content/images/2025/08/20240904150837990-1.jpg 1360w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">《羅密歐與茱麗葉》音樂劇中文版海報。圖片來源：udn 售票網</span></figcaption></figure>
<p>如《羅密歐與茱麗葉》，保留原文的書寫感，中文則簡單搭配明體（可能為思源宋體）。</p>
<p>第二類：使用本地化名稱為主要標題，此時就需要考驗設計如何將原版標誌轉譯成在地化文本之設計。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/005.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="938" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/005.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/005.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/005.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/005.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">音樂劇《鐵達尼號》個語言版本海報。圖片來源（左至右）：udn 售票網、©Titanic the Musical、北京奧哲維文化傳播有限公司</span></figcaption></figure>
<p>像是《鐵達尼號》音樂劇，如上圖，由左至右分別為：繁體、西區原版、簡體，三種不同之版本，可以看到三者在文字肌理（材質）上皆有加入金屬與鉚釘效果，但是繁體中文字型，不論是長高比、粗細，在視覺上都與原本有很大不同，氣勢稍顯不足；而簡體版本，則採用蒙納超綱黑拉長，營造出磅礡之氣，雖說與原本不盡相同，但是在氣氛營造上，略勝於繁體版本。</p>
<h2 id="%E4%B8%80%E7%A8%AE%E6%83%B3%E5%83%8F%EF%BC%9A%E9%82%84%E6%B2%92%E5%BC%95%E5%85%A5%E7%9A%84%E7%B6%93%E5%85%B8%E4%BD%9C%E5%93%81%EF%BC%8C%E6%9C%AC%E5%9C%B0%E5%8C%96%E6%A8%99%E6%BA%96%E5%AD%97%E6%9C%83%E6%98%AF%E4%BB%80%E9%BA%BC%E6%A8%A3%E5%AD%90%EF%BC%9F">一種想像：還沒引入的經典作品，本地化標準字會是什麼樣子？</h2>
<p>如果先撇除中英同時搭配等問題，單純想像「如果百老匯音樂劇標誌，變成中文會長什麼樣子？」</p>
<h2 id="%E4%BE%86%E9%BB%9E%E4%B8%8D%E4%B8%80%E6%A8%A3%E7%9A%84">來點不一樣的</h2>
<p>過去《貓》、《歌劇魅影》、《獅子王》......等已多次來台。本次想以橫掃 11 座東尼獎的音樂劇--《漢彌爾頓》為嘗試。</p>
<p>該劇以美國開國元勳之一的 Alexander Hamilton 傳記為藍本進行的改編創作，當紅時期在百老匯部分票價高達 849 美金！</p>
<h2 id="%E5%8E%9F%E5%A7%8B%E5%9C%96%E6%A8%99%EF%BC%88logotype%EF%BC%89">原始圖標（Logotype）</h2>
<p>該劇的文字圖標示使用了「Trajan Pro」，並加大字元間距。該風格最早是刻劃在羅馬 Trajan 柱（圖拉真柱）底部的銘文，這樣字體（Typeface）樣態，藝術與書法學家 Edward Catich 認為最早是使用平筆刷繪製，最終使用雕刻方式，刻劃於石碑上。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/001A.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="750" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/001A.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/001A.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/001A.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/001A.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">音樂劇《Hamilton》標題圖標。</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/1599px-Trajan_inscription_duotone.jpg" class="kg-image" alt="" loading="lazy" width="1599" height="704" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/1599px-Trajan_inscription_duotone.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/1599px-Trajan_inscription_duotone.jpg 1000w, https://blog.twintype.co/content/images/2025/08/1599px-Trajan_inscription_duotone.jpg 1599w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">圖拉真柱底部銘文。</span></figcaption></figure>
<h2 id="%E7%99%BC%E6%83%B3%EF%BC%9F">發想？</h2>
<p>看到歐文襯線體，很自然的就想到中文的明、宋體，但同時間需要融合「雋刻感」，這令人立刻聯想到龍門石窟碑銘，以及早期上海模鉛字風格的仿宋與宋體。</p>
<p>有了方向，開始收集資料，包括《龍門二十品》拓本、上海字模廠鉛字樣張、清光緒刻本......等資料。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2025/08/006.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="938" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/006.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/006.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/006.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/006.jpg 2400w" sizes="(min-width: 720px) 720px"></figure>
<p>確立了，想加入石碑體中，標誌的鈎與右點的筆劃特徵，下一步就是繪製。此處的繪製，並非是最終效果，更多的是先將雛形訂下，在近一步從中修正。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/007.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="1126" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/007.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/007.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/007.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/007.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">初代手稿</span></figcaption></figure>
<p>繪製完手稿後，進入數位化環節，因字數較少，故使用 Illustrator 直接進行描繪，與細節微調。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/008-1.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="500" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/008-1.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/008-1.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/008-1.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/008-1.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">初次數位化後</span></figcaption></figure>
<p>在第一輪的數位化後，發現過於保守，與一般明體過於雷同，無法襯托原有字體的高雅與氣質。</p>
<p>因此進行第二次微調，將歐文原有豎筆畫末端的襯線加入，但同時有取捨，如果所有中文豎筆畫都加上襯線，會過於雜亂，因此最終只留下較明顯，且下半部無其他部件干擾的部分。另外將明體原有的右側三角縮小，營造視覺上的「優雅」與「細緻」。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2025/08/010.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="938" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/010.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/010.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/010.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/010.jpg 2400w" sizes="(min-width: 720px) 720px"></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/009.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="500" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/009.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/009.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/009.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/009.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">數位化，二次微調後</span></figcaption></figure>
<h2 id="%E6%9C%80%E7%B5%82%E6%88%90%E6%9E%9C">最終成果</h2>
<p>最終將該標準字細化與微調，再加上肌理效果：</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/001C.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="750" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/001C.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/001C.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/001C.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/001C.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">中文版標準字樣張</span></figcaption></figure>
<h2 id="%E5%90%8C%E5%A0%B4%E5%8A%A0%E6%98%A0">同場加映</h2>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/002.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="938" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/002.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/002.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">音樂劇《Cats》，左為試作版，又為原版</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/003.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="938" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/003.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/003.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/003.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/003.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">音樂劇《Les Miserables》，左為試作版，又為原版</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/004.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="938" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/004.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/004.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/004.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/08/004.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">音樂劇《Annie》，左為試作版，又為原版</span></figcaption></figure>
<h3 id="%E5%82%99%E8%A8%BB%EF%BC%9A">備註：</h3>
<p>以上圖片，與官方活動無關，僅為在標誌地化示例。</p>
<div class="quoteBox">
    <h3>相關連結</h3>
        <a href="https://youtu.be/_ulugwbWBUg?feature=shared&#x26;ref=blog.twintype.co" rel="noreferrer" target="_blank">Translating Logotypes &#x26; Cross-Cultural Branding | BITS10</a><br>
  <a href="https://fonts.adobe.com/fonts/trajan/details/%7B%7Bdesigner.behance_url%7D%7D?ref=blog.twintype.co" rel="noreferrer" target="_blank">Trajan | Adobe Fonts</a><br>
  <a href="https://www.books.com.tw/products/0010099938?srsltid=AfmBOoqTw4p5ERSxQl1-hkQhf0j0SMHjOPmk7pX9syix-dl4a_4dQKB-&#x26;ref=blog.twintype.co" rel="noreferrer" target="_blank">北魏龍門造像記</a><br>

  <a href="https://hamiltonmusical.com/new-york/?ref=blog.twintype.co" rel="noreferrer" target="_blank">Hamilton Musical</a><br>

<a href="https://penelope.uchicago.edu/~grout/encyclopaedia_romana/imperialfora/trajan/column.html?ref=blog.twintype.co" rel="noreferrer" target="_blank">Trajan's Column</a><br>
<a href="https://www.amazon.com/Origin-Serif-Brush-Writing-Letters/dp/B001QW0YWK?ref=blog.twintype.co" rel="noreferrer" target="_blank">The Origin of the Serif: Brush Writing and Roman Letters</a><br>
  
  <a href="https://commons.wikimedia.org/wiki/File:Tianyige-330000-1705-0001882_%E5%85%AD%E6%9C%9D%E4%BA%8B%E8%BF%B9%E7%B7%A8%E9%A1%9E%E5%8D%81%E5%9B%9B%E5%8D%B7_%E5%AE%8B%E5%BC%B5%E6%95%A6%E9%A0%A4%E8%AD%94_%E6%B8%85%E5%85%89%E7%B7%92%E5%88%BB%E6%9C%AC.pdf?ref=blog.twintype.co" rel="noreferrer" target="_blank">六朝事迹編類十四卷 宋張敦頤譔 清光緒刻本</a><br>
</div>
<style>
    .quoteBox{
        width: 100%;

        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 3em;
    }
  h3{
    margin-top: 0px;
    
}
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/NQ7kYp</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/NQ7kYp";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>
<p></p>
<p></p>]]></content:encoded></item><item><title><![CDATA[可變式字型 (Variable Fonts) 是什麼？]]></title><description><![CDATA[<p>傳統字形都是採用固定型號選擇，以粗細為例，可能會有：Light、Regular、Bold......等選項。由字型廠商提供設定好的參數供選擇。而「可變式字型」則可以提參數，由使用者自行調控。   淺窺可變式字型  以下是個簡單的二軸可變字體，支援字重與襯線可調整。  你好    字重: 0   襯線: 0      可變式字型與一般字型差在哪？  如果是一般字體，支援七種字重，就需要安裝7分檔案。如果字型家族還包括其他特效，如：斜體、圓角......等，以此類推，需要多個字型檔案安裝。  但如果是「可變式字型」則不同，可以透過單一字型檔案，透過程式呼叫出不同粗細、樣式等。  舉例來說，「LINE Seed」字重分別有 Thin、Regular、Bold 以及 ExtraBold，所以使用者就必須下載與安裝 4 份檔案。但像是「思源黑體」最新版支援可變式功能，僅需安裝一份檔案，使用者即可從 Thin 到 Black 字重一次擁有。因此容量占用可以做到大幅減少。   伸縮自如，組合無限  可變式字型以粗度功能來說，不再侷限於 Thin、Regular、Bold 等字重，而是在字型設定範圍內</p>]]></description><link>https://blog.twintype.co/variable_fonts_otvaroverview/</link><guid isPermaLink="false">68916d4e6a8a3a00016166b8</guid><category><![CDATA[字型技術]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/variable_fonts_otvaroverview.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Thu, 07 Aug 2025 04:28:11 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/08/0-------------1.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/08/0-------------1.jpg" alt="可變式字型 (Variable Fonts) 是什麼？"><br><p>傳統字形都是採用固定型號選擇，以粗細為例，可能會有：Light、Regular、Bold......等選項。由字型廠商提供設定好的參數供選擇。而「可變式字型」則可以提參數，由使用者自行調控。</p>
<h2 id="%E6%B7%BA%E7%AA%BA%E5%8F%AF%E8%AE%8A%E5%BC%8F%E5%AD%97%E5%9E%8B">淺窺可變式字型</h2>
<p>以下是個簡單的二軸可變字體，支援字重與襯線可調整。</p>
<div id="text">你好</div>
<style>
    @font-face {
        font-family: 'VariableFont';
          src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff');
format('truetype');
        font-display: swap;
    }

    #text {
        font-size: 140px;
        font-variation-settings: "wght"0, "slnt"0;
        text-align: center;
        margin-bottom: 40px;
        color: #333;
        font-feature-settings: normal;
        font-family: 'VariableFont', sans-serif;

    }

    .info {
        display: flex;
        gap: 30px;
        font-size: 16px;
        color: #666;
    }

    .axis-info {
        text-align: center;
    }
</style>

<div class="info">
    <div class="axis-info">
        <div>字重: <span id="wghtValue">0</span></div>
    </div>
    <div class="axis-info">
        <div>襯線: <span id="slntValue">0</span></div>
    </div>
</div>

<script>
    const text = document.getElementById('text');
    const wghtValue = document.getElementById('wghtValue');
    const slntValue = document.getElementById('slntValue');

    const wghtMin = 0;
    const wghtMax = 100;
    const slntMin = 0;
    const slntMax = 100;
    const duration = 2000;

    let phase = 0;
    let startTime = performance.now();

    function easeInOutSine(t) {
        return -(Math.cos(Math.PI * t) - 1) / 2;
    }

    function animate(now) {
        const elapsed = now - startTime;
        const t = Math.min(elapsed / duration, 1);
        const eased = easeInOutSine(t);

        let wght, slnt;

        switch (phase) {
            case 0:
                wght = wghtMin + eased * (wghtMax - wghtMin);
                slnt = slntMin;
                break;
            case 1:
                wght = wghtMax;
                slnt = slntMin + eased * (slntMax - slntMin);
                break;
            case 2:
                wght = wghtMax - eased * (wghtMax - wghtMin);
                slnt = slntMax;
                break;
            case 3:
                wght = wghtMin;
                slnt = slntMax - eased * (slntMax - slntMin);
                break;
        }
        const fontSettings = `"wght" ${wght}, "slnt" ${slnt}`;
        text.style.fontVariationSettings = fontSettings;

        wghtValue.textContent = Math.round(wght);
        slntValue.textContent = Math.round(slnt);

        if (t < 1) {
            requestAnimationFrame(animate);
        } else {
            phase = (phase + 1) % 4;
            startTime = performance.now();
            requestAnimationFrame(animate);
        }
    }

    requestAnimationFrame(animate);
</script>
<h2 id="%E5%8F%AF%E8%AE%8A%E5%BC%8F%E5%AD%97%E5%9E%8B%E8%88%87%E4%B8%80%E8%88%AC%E5%AD%97%E5%9E%8B%E5%B7%AE%E5%9C%A8%E5%93%AA%EF%BC%9F">可變式字型與一般字型差在哪？</h2>
<p>如果是一般字體，支援七種字重，就需要安裝7分檔案。如果字型家族還包括其他特效，如：斜體、圓角......等，以此類推，需要多個字型檔案安裝。</p>
<p>但如果是「可變式字型」則不同，可以透過單一字型檔案，透過程式呼叫出不同粗細、樣式等。</p>
<p>舉例來說，「LINE Seed」字重分別有 Thin、Regular、Bold 以及 ExtraBold，所以使用者就必須下載與安裝 4 份檔案。但像是「思源黑體」最新版支援可變式功能，僅需安裝一份檔案，使用者即可從 Thin 到 Black 字重一次擁有。因此容量占用可以做到大幅減少。</p>
<h2 id="%E4%BC%B8%E7%B8%AE%E8%87%AA%E5%A6%82%EF%BC%8C%E7%B5%84%E5%90%88%E7%84%A1%E9%99%90">伸縮自如，組合無限</h2>
<p>可變式字型以粗度功能來說，不再侷限於 Thin、Regular、Bold 等字重，而是在字型設定範圍內自由調整。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://imagehub.twinty.pe/images/b0012049701859124.gif" class="kg-image" alt="操作動態圖" loading="lazy" width="100%" srcset="https://imagehub.twinty.pe/images/b0012049701859124.gif 600w, https://imagehub.twinty.pe/images/b0012049701859124.gif 908w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">可變式字型粗細軸調整示範。思源宋體為例</span></figcaption></figure>
<h2 id="%E5%A4%9A%E8%BB%B8%E9%81%B8%E6%93%87%EF%BC%8C%E4%BB%BB%E4%BD%A0%E6%8C%91%E9%81%B8">多軸選擇，任你挑選</h2>
<p>OpenType 中預設註冊了五軸，分別為：wght(粗細)、wdth(寬度)、slnt(傾斜)、opsz(視覺尺寸)、ital(義大利斜體傾斜角度)。</p>
<p>當然也可自定義，且不侷限與五軸，例如：<a href="https://fonts.google.com/specimen/Roboto+Flex?ref=blog.twintype.co">Roboto Flex</a> 有多達 12 軸可調整，可以調到認不出來。跟主管的想法一樣多變（誤）。</p>
<p>還有友商 justfont 的「淚體」就支援筆畫交接處圓角功能調節功能，也是可變字型的應用。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/0-------------11--------6.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="852" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/0-------------11--------6.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/0-------------11--------6.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/0-------------11--------6.jpg 1600w, https://blog.twintype.co/content/images/2025/08/0-------------11--------6.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">以上是以 Roboto Flex 內建軸調整出之樣式</span></figcaption></figure>
<h2 id="%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86">工作原理</h2>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2025/08/0-------------11--------4.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="852" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/0-------------11--------4.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/0-------------11--------4.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/0-------------11--------4.jpg 1600w, https://blog.twintype.co/content/images/2025/08/0-------------11--------4.jpg 1815w" sizes="(min-width: 720px) 720px"></figure>
<p>簡單來說，就是製作兩種外框輪廓，透過算法，自動推算出兩個極值錨點的中間點位，類似 illustrator 中的「漸變工具」。這同時非常要求，兩個輪廓的節點需要保持數量一致，且要避免「極端」點位的出現，否則可能會出現運算出異常輪廓。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2025/08/0-------------11-------.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="852" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/0-------------11-------.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/0-------------11-------.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/0-------------11-------.jpg 1600w, https://blog.twintype.co/content/images/2025/08/0-------------11-------.jpg 1815w" sizes="(min-width: 720px) 720px"></figure>
<p>所以通常（99.9%，世界之大可能還是有例外）可變式字體的筆畫是分離的，因為這樣在設計過程，相要於直接控制外框較好調控。</p>
<h2 id="%E8%A8%AD%E8%A8%88%E7%AF%87">設計篇</h2>
<p>想要製作一軸，粗細可調節，只需要繪製最細與最粗之字重輪廓，稱為極值，但如果加入如：字元寬度......等其他參數，就至少需製作：窄細、窄粗、寬細、寬粗，四種值。簡單來說，最少要製作的值，就是設定幾個可調參數的平方。</p>
<p>例如思源之母 — 西塚涼子女士的新作品「百千鳥」，就支援寬度、粗細、斜體（僅歐文）。撇除斜體，在漢字部分，就至少要製作四種極值。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/08/0-------------11.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="852" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/0-------------11.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/0-------------11.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/0-------------11.jpg 1600w, https://blog.twintype.co/content/images/2025/08/0-------------11.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">百千鳥</span></figcaption></figure>
<h2 id="%E7%B9%81%E9%AB%94%E4%B8%AD%E6%96%87%E8%A8%AD%E8%A8%88%E9%9B%A3%E9%BB%9E">繁體中文設計難點</h2>
<p>上述，提到「製作極值數量，最少是透過你設定可調整參數的平方」，是因為繁體中文字形筆畫繁多，時常需要處理「視覺修正」，例如，在橫畫較多的粗體，需要壓縮橫筆畫，但該問題在 Thin 到 Regular 字重不存在，但如果只製作了極值，會導致中間筆畫也出現該情況。此狀況是需要設計者思考，使否需要在中間插入主板進行微調，但相對工作量就會大增加。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2025/08/0-------------11--------8--1--1.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="852" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/0-------------11--------8--1--1.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/0-------------11--------8--1--1.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/0-------------11--------8--1--1.jpg 1600w, https://blog.twintype.co/content/images/2025/08/0-------------11--------8--1--1.jpg 1815w" sizes="(min-width: 720px) 720px"></figure>
<p>還有像是明體中，通常是橫細豎粗的結構，如果今天針對招牌場景，加入豎筆畫家粗之參數。可能就會出現，橫粗豎細的情況不符合大多數使用場景。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2025/08/0-------------11--------5.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="852" srcset="https://blog.twintype.co/content/images/size/w600/2025/08/0-------------11--------5.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/08/0-------------11--------5.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/08/0-------------11--------5.jpg 1600w, https://blog.twintype.co/content/images/2025/08/0-------------11--------5.jpg 1815w" sizes="(min-width: 720px) 720px"></figure>
<h2 id="%E6%94%AF%E6%8F%B4%E5%BA%A6">支援度</h2>
<p>目前主流作業系統都已經支援該功能，如：iOS 在近期已經使用蘋方黑體的可變字型版本。illustrator等主流設計軟體以及現代瀏覽器也都相繼支援。唯文書軟體，如 Office 尚未支援，只能將常用型態抽取出獨立字體文件，再安裝。</p>
<h2 id="%E5%85%B6%E4%BB%96%E7%8E%A9%E6%B3%95">其他玩法</h2>
<p>人們是不會放棄每個造梗的機會。思考一下，透過主板演算出差值，就跟動畫中的關鍵幀原理類似，因此也能做出類動畫。百千鳥中的圖示就是如此，頗為療育。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://imagehub.twinty.pe/images/b0012049701859125.gif" class="kg-image" alt="操作動態圖" loading="lazy" width="100%" srcset="https://imagehub.twinty.pe/images/b0012049701859125.gif 600w, https://imagehub.twinty.pe/images/b0012049701859125.gif 908w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">百千鳥中的圖示動畫範例</span></figcaption></figure>
<p></p>
<div class="quoteBox">
    <h3>相關連結</h3>
        <a href="https://learn.microsoft.com/en-us/typography/opentype/spec/otvaroverview?ref=blog.twintype.co" rel="noreferrer" target="_blank">OpenType Font Variations overview (OpenType 1.9.1) - Typography | Microsoft Learn</a><br>
          <a href="https://www.youtube.com/watch?v=CY1ztyGF9fs&#x26;ab_channel=ATypI&#x26;ref=blog.twintype.co" rel="noreferrer" target="_blank">Variable Fonts in Google Fonts | Irin Kim, Nathan Williams | ATypI 2019 Tokyo
</a>
</div>
<style>
    .quoteBox{
        width: 100%;

        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 3em;
    }
  h3{
    margin-top: 0px;
    
}
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/9ijwKa</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/9ijwKa";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>
<p></p>
<p></p>]]></content:encoded></item><item><title><![CDATA[亞馬遜上沒有的 CSS 文字排版技巧-1：提高網頁易讀性]]></title><description><![CDATA[<p>「Good legibility and readability of texts ensure that information is transmitted to users efficiently and quickly.」—— (Kuzu &amp; Ceylan, 2010)  良好的易辨、易讀性，能有效且迅速地將資訊傳遞給使用者。在現在 Web 設盛行的時代，只要是網頁前端（還有像是 Electron...等框架產生的應用）幾乎都仰賴 CSS 進行樣式設定。今天介紹幾個 CSS 語法來提升網頁文字排版的易讀與易辨性。   CSS是甚麼？  CSS（Cascading Style Sheets，層疊樣式表）是用來描述 HTML 或 XML 文件的視覺樣式，包括字體、顏色、排版與動畫等。  CSS 標準由 W3C 維護。每一版的 CSS 都會定義新功能，並逐步被瀏覽器實作。這些要感謝熱心的開發者以及中文排版需求小組的積極提出不足之處，才能一步步邁向更棒的標準、技術。     行高：line-height  最後的疼愛是手放開；優秀的排版是適當的空間。有時預設字體的行高在密集文本顯示的情</p>]]></description><link>https://blog.twintype.co/css-text-autospace-tips/</link><guid isPermaLink="false">6878f0955380b60001b721b1</guid><category><![CDATA[網頁字型]]></category><category><![CDATA[排版]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/css-text-autospace-tips.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Wed, 16 Jul 2025 15:07:00 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/07/2025071700.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/07/2025071700.jpg" alt="亞馬遜上沒有的 CSS 文字排版技巧-1：提高網頁易讀性"><br><p>「Good legibility and readability of texts ensure that information is transmitted to users efficiently and quickly.」—— (Kuzu &#x26; Ceylan, 2010)</p>
<p>良好的易辨、易讀性，能有效且迅速地將資訊傳遞給使用者。在現在 Web 設盛行的時代，只要是網頁前端（還有像是 Electron...等框架產生的應用）幾乎都仰賴 CSS 進行樣式設定。今天介紹幾個 CSS 語法來提升網頁文字排版的易讀與易辨性。</p>
<h2 id="css%E6%98%AF%E7%94%9A%E9%BA%BC%EF%BC%9F">CSS是甚麼？</h2>
<p>CSS（Cascading Style Sheets，層疊樣式表）是用來描述 HTML 或 XML 文件的視覺樣式，包括字體、顏色、排版與動畫等。</p>
<p>CSS 標準由 W3C 維護。每一版的 CSS 都會定義新功能，並逐步被瀏覽器實作。這些要感謝熱心的開發者以及中文排版需求小組的積極提出不足之處，才能一步步邁向更棒的標準、技術。</p>
<p></p>
<h2 id="%E8%A1%8C%E9%AB%98%EF%BC%9Aline-height">行高：line-height</h2>
<p>最後的疼愛是手放開；優秀的排版是適當的空間。有時預設字體的行高在密集文本顯示的情況下，略顯壅擠，長篇閱讀容易造成視覺疲勞。適當增高行高可減緩此狀況。</p>
<script src="https://gist.github.com/2460124601/d73b7af6b51316894afa4945f78d2915.js"></script>
<table style="width: 100%;padding:10px; text-align: center; border-collapse: collapse;" border="1" cellpadding="8">
  <thead>
    <tr>
      <th style="width: 30%;">設定方式</th>
      <th>說明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>數字（無單位）</td>
      <td>比例，會乘上字體大小。推薦 <code>1.4 ~ 1.8</code></td>
    </tr>
    <tr>
      <td>長度單位</td>
      <td>像素、em，例如 <code>24px</code> 或 <code>1.5em</code></td>
    </tr>
    <tr>
      <td>百分比</td>
      <td>如 <code>150%</code>，代表字體大小的 1.5 倍</td>
    </tr>
  </tbody>
</table>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/07/2025071701.jpg" class="kg-image" alt="" loading="lazy" width="1668" height="850" srcset="https://blog.twintype.co/content/images/size/w600/2025/07/2025071701.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/07/2025071701.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/07/2025071701.jpg 1600w, https://blog.twintype.co/content/images/2025/07/2025071701.jpg 1668w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">預設與增加行高後對比圖</span></figcaption></figure>
<p></p>
<h2 id="%E5%BE%AE%E8%AA%BF%E5%AD%97%E8%B7%9D%E5%B0%B1%E6%98%AF%E5%9C%A8%E8%AC%9B%E7%A9%B6%EF%BC%9Aletter-spacing">微調字距就是在講究：letter-spacing</h2>
<p>有些字型預設字距太緊湊，會影響閱讀舒適度，尤其是中文。這時候，letter-spacing 是你的好朋友。可有效改善中英文混排時過於擁擠的問題，還能營造一點「呼吸感」，反之，想要營造「緊湊感」也能將間距收緊。</p>
<script src="https://gist.github.com/2460124601/d27194c50d04b31355d5e7487d9571c6.js"></script>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/07/2025071702.jpg" class="kg-image" alt="" loading="lazy" width="1654" height="762" srcset="https://blog.twintype.co/content/images/size/w600/2025/07/2025071702.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/07/2025071702.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/07/2025071702.jpg 1600w, https://blog.twintype.co/content/images/2025/07/2025071702.jpg 1654w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">預設間距與增加後對比圖</span></figcaption></figure>
<p></p>
<h2 id="%E6%96%87%E5%AD%97%E5%B0%8D%E5%88%87%E9%BD%8A%EF%BC%9Atext-align">文字對切齊：text-align</h2>
<p>text-align 是用來設定行內元素的水平對齊方式，常用於段落文字、標題等區塊的排版。當設定為 justify 時，會讓每一行文字兩端對齊，藉由調整字距讓左右邊緣對齊，看起來更整齊。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/07/2025071703.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="640" srcset="https://blog.twintype.co/content/images/size/w600/2025/07/2025071703.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/07/2025071703.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/07/2025071703.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/07/2025071703.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">預設靠左，右側可能出現許多空白</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/07/2025071704.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="629" srcset="https://blog.twintype.co/content/images/size/w600/2025/07/2025071704.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/07/2025071704.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/07/2025071704.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/07/2025071704.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">透過設定 text-align:justify;即可做到保持左側對齊，但右側切齊</span></figcaption></figure>
<script src="https://gist.github.com/2460124601/a23ed87ef379091f429dd5b6427f0df9.js"></script>
<table style="width: 100%;padding:10px; text-align: center; border-collapse: collapse;" border="1" cellpadding="8">
  <thead>
    <tr>
      <th style="width: 30%;">參數值</th>
      <th>說明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>left</td>
      <td>靠左對齊（預設值，文字從左邊開始）</td>
    </tr>
    <tr>
      <td>right</td>
      <td>靠右對齊，適用於 RTL 語言或特殊排版需求</td>
    </tr>
    <tr>
      <td>center</td>
      <td>置中對齊</td>
    </tr>
    <tr>
      <td>justify</td>
      <td>**左右對齊**，會調整字距讓段落左右邊緣齊平</td>
    </tr>
    <tr>
      <td>start</td>
      <td>根據語言方向決定起始對齊（左或右）</td>
    </tr>
    <tr>
      <td>end</td>
      <td>根據語言方向決定結尾對齊</td>
    </tr>
  </tbody>
</table>
<h2 id="%E5%BC%B7%E8%BF%AB%E7%97%87%E6%95%91%E6%98%9F%EF%BC%9Atext-autospace">強迫症救星：text-autospace</h2>
<p>專業排版中，在中西文之間，大多都會加上空格，而該屬性能夠自動在不同文種空格，過往需要手動加入空格，但未來可以直接透過 CSS 設定。為甚麼說未來呢？截至 2025.07 該屬性尚未正式支援各大瀏覽器。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/07/2025071705.jpg" class="kg-image" alt="" loading="lazy" width="2000" height="812" srcset="https://blog.twintype.co/content/images/size/w600/2025/07/2025071705.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/07/2025071705.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/07/2025071705.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/07/2025071705.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">中西文之間空格範例</span></figcaption></figure>
<p>不過目前已經確定在 8 月，Chrome 將支援，屆時再向大家更新（挖坑），敬啟期待。</p>
<h2 id="%E6%9B%B4%E6%96%B0-20250916%EF%BC%9Atext-autospace-%E6%AD%A3%E5%BC%8F%E6%94%AF%E6%8F%B4">更新 2025.09.16：text-autospace 正式支援</h2>
<p>目前該 CSS 語法已經正式支援，不過現階段各家瀏覽器還有程度不同的適配問題。但總歸是好得開始！完整說明請參閱「相關連結」部分閱讀 MDN 說明</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="box1">
  <div style="width:100%;text-align:center;line-height:2.8em;">
        <h5 style="font-weight: normal;font-size:28px;"><ins>是誰在Knock我窗</ins></h5>
    <p style="font-size: 14px;color:black;">請點選文字，啟用 text-autospace 功能</p>
    </div>
</div>
<style>
  #box1{
    color:rgb(4, 157, 109);
    width:100%;
    display:flex;
    justify-content: center;
    
  }
    .normal {
        text-autospace: normal;
                color:rgb(19, 56, 130);

    }
</style>
<script>
    $(document).ready(function () {
        $("#box1").click(function () {
            $(this).toggleClass("normal");
        });
    });
</script>
<h3 id="%E6%97%8F%E7%B9%81%E4%B8%8D%E5%8F%8A%E5%82%99%E8%BC%89">族繁不及備載</h3>
<p>有時寫在寫前端時，愈發覺得 CSS 是個玄學。實在太多屬性可以玩了。如果大家想了解更多相關知識，建議可以到 W3schools了解完整資訊。</p>
<p>另外推薦 CanIUse，可以查看瀏覽器是否支援該語法，避免自己寫得很開心，到用戶手中一團糟，特別式鑲嵌式瀏覽器、框架...等。</p>
<p></p>
<div class="quoteBox">
    <h3>相關連結</h3>
        <a href="https://www.w3schools.com/css/?ref=blog.twintype.co" rel="noreferrer" target="_blank">W3schools</a><br>
          <a href="https://caniuse.com/?ref=blog.twintype.co" rel="noreferrer" target="_blank">CanIUse</a>
  <br>
          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-autospace?ref=blog.twintype.co" rel="noreferrer" target="_blank">text-autospace - CSS | MDN</a>
</div>
<style>
    .quoteBox{
        width: 100%;
        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 3em;
    }
  h3{
    margin-top: calc(56px * var(--content-spacing-factor, 1));
}
  .gist > [id] {
    margin-top:0px;
}
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/4fZkLg</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/4fZkLg";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>]]></content:encoded></item><item><title><![CDATA[像彩虹般的字型：Color Font]]></title><description><![CDATA[<p>開始前先來介紹 Gilbert 這款字體，它是一款自帶多種色彩的字型，用戶輸入後即會顯示繽紛的色彩，無須而外在修改。  該字體是具有象徵意義，是為了紀念 LGBTQ+ 彩虹旗的創作者 Gilbert Baker 對於社群貢獻而生，其中「色彩」是不可或缺的顏色，傳遞驕傲、多元和包容的精神。   電腦會選土豆，字體也能是彩色  其實彩色字型並不罕見，你我常用的 emoji 就是最佳實踐之一，讓我們來看看如何做到的吧！   第一步：標準化  要讓大家能正確的看到五顏六色的字體，就需要由具有一致且大部分人認同的標準與規範。  通常這幾些事會由行業內的領頭公司、組織進行，這次參戰的分別有：Microsoft、Apple、Adobe、Google，以及 Mozilla。  前面幾間相信大家都耳熟能詳，最後一間也是對網際網路有著重要影響的元老級組織，其前身為網景公司。   簡單直接：SBIX 、CBDT/CBLC  要彩色物件？沒問題，用最簡單粗暴的方法，直接塞入一張點陣圖片。Apple的SBIX （Standard Bitmap Graphics）與 Google 的 CBDT/CBLC（Colo</p>]]></description><link>https://blog.twintype.co/color-font/</link><guid isPermaLink="false">684297fe8667c4000104317b</guid><category><![CDATA[字型技術]]></category><category><![CDATA[工具下載]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/color-font.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Tue, 10 Jun 2025 18:23:33 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/06/2025060600.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/06/2025060600.jpg" alt="像彩虹般的字型：Color Font"><br><p>開始前先來介紹 Gilbert 這款字體，它是一款自帶多種色彩的字型，用戶輸入後即會顯示繽紛的色彩，無須而外在修改。</p>
<p>該字體是具有象徵意義，是為了紀念 LGBTQ+ 彩虹旗的創作者 Gilbert Baker 對於社群貢獻而生，其中「色彩」是不可或缺的顏色，傳遞驕傲、多元和包容的精神。</p>
<h2 id="%E9%9B%BB%E8%85%A6%E6%9C%83%E9%81%B8%E5%9C%9F%E8%B1%86%EF%BC%8C%E5%AD%97%E9%AB%94%E4%B9%9F%E8%83%BD%E6%98%AF%E5%BD%A9%E8%89%B2">電腦會選土豆，字體也能是彩色</h2>
<p>其實彩色字型並不罕見，你我常用的 emoji 就是最佳實踐之一，讓我們來看看如何做到的吧！</p>
<h2 id="%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%9A%E6%A8%99%E6%BA%96%E5%8C%96">第一步：標準化</h2>
<p>要讓大家能正確的看到五顏六色的字體，就需要由具有一致且大部分人認同的標準與規範。</p>
<p>通常這幾些事會由行業內的領頭公司、組織進行，這次參戰的分別有：Microsoft、Apple、Adobe、Google，以及 Mozilla。</p>
<p>前面幾間相信大家都耳熟能詳，最後一間也是對網際網路有著重要影響的元老級組織，其前身為網景公司。</p>
<h2 id="%E7%B0%A1%E5%96%AE%E7%9B%B4%E6%8E%A5%EF%BC%9Asbix-%E3%80%81cbdtcblc">簡單直接：SBIX 、CBDT/CBLC</h2>
<p>要彩色物件？沒問題，用最簡單粗暴的方法，直接塞入一張點陣圖片。Apple的SBIX （Standard Bitmap Graphics）與 Google 的 CBDT/CBLC（Color Bitmap Data / Color Bitmap Location）之方法就是如此。</p>
<p>看名稱就知道，是直接將一張點陣圖放入編碼中。這種做法可以讓物件保有真實世界的質感，但也因為是點陣圖，因此放大存在失真的可能（會有鋸齒邊），且因為是圖片，加總起來檔案容量也不小。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/2025060601.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/2025060601.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/2025060601.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/2025060601.jpg 1600w, https://blog.twintype.co/content/images/2025/06/2025060601.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">SBIX 彩色文字方法放大後會出現鋸齒（以美洲大蠊 emoji 為例）</span></figcaption></figure>
<h2 id="%E9%80%B2%E9%9A%8E%EF%BC%9Aopentype-svg">進階：OpenType-SVG</h2>
<p>聰明的你一定知道，如果點陣圖會失真，那就放向量圖啊！Adobe 與 Mozilla 也是這麼想的，他們希望在字形中鑲嵌 SVG 格式的圖檔。這讓彩色字型可以無限放大，但是無法單獨改顏色，如果想要製作出非裔、華裔...等，膚色較多元的同個表情符號，就需要一個一個單獨建立，且以 Chromium 為核心的瀏覽器都不支援，會直接顯示黑色。</p>
<p>以 Adobe EmojiOne 為例，同樣的「比讚」符號，有六種膚色，就需要單獨繪製 6 張 SVG 圖檔，並一一嵌入。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/2025060602.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="681" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/2025060602.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/2025060602.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/2025060602.jpg 1600w, https://blog.twintype.co/content/images/2025/06/2025060602.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Adobe EmojiOne 不同膚色「比讚」符號示意圖</span></figcaption></figure>
<h2 id="%E6%9B%B4%E4%B8%8A%E4%B8%80%E5%B1%A4%E6%A8%93%EF%BC%9A-colrcpal">更上一層樓： COLR/CPAL</h2>
<p>計算機領域中，哪能缺少我們 M大 – Microsoft。他們提出的方案一樣是向量圖形，但是同個圖形中，拆分多個圖層，並記錄圖層、色彩等資訊。</p>
<p>同樣以「比讚」符號為例，如果用 COLR/CPAL 技術，只需要繪製 3 個字符框，透過改變不同圖層顏色，即可做到多種顏色效果。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/2025060603.jpg" class="kg-image" alt="" loading="lazy" width="1816" height="1022" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/2025060603.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/2025060603.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/2025060603.jpg 1600w, https://blog.twintype.co/content/images/2025/06/2025060603.jpg 1816w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">COLR/CPAL 字型組合原理</span></figcaption></figure>
<h2 id="%E6%99%AE%E7%BE%85%E9%BA%A5%E5%85%8B%E6%96%AF%EF%BC%9A-colrcpal-v1">普羅麥克斯： COLR/CPAL V1</h2>
<p>在此之後 Microsoft 又與 Google（對，他又來了）提出擴充，允許加入更多屬性，例如：Alpha 值，也就是允許透明度與漸層，甚至是混合模式。為 Color Font 帶來更多可能性。</p>
<p>2024 年在微軟更新了新版 Segoe UI Emoji 就是使用 COLR/CPAL V1 完成，在 Windows 11 中就是使用該字型，預設會出現 3D版本，如果軟體不支援，則會跳回2D版本。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/2025060605.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="682" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/2025060605.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/2025060605.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/2025060605.jpg 1600w, https://blog.twintype.co/content/images/2025/06/2025060605.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Segoe UI Emoji 3D 版本預覽圖</span></figcaption></figure>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/image.png" class="kg-image" alt="" loading="lazy" width="1116" height="655" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/image.png 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/image.png 1000w, https://blog.twintype.co/content/images/2025/06/image.png 1116w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">在 Windows powerShell 中不支援 3D 效果，會自動跳回 2D版本</span></figcaption></figure>
<h2 id="%E9%9A%A8%E5%A0%82%E6%B8%AC%E9%A9%97%EF%BC%9A">隨堂測驗：</h2>
<p>請問根據以下圖片 Gilbert Color 最有可能是使用何種技術呢？提示：該字體為向量外框</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/-------------------2025-06-11-020702.jpg" class="kg-image" alt="" loading="lazy" width="1882" height="1116" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/-------------------2025-06-11-020702.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/-------------------2025-06-11-020702.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/-------------------2025-06-11-020702.jpg 1600w, https://blog.twintype.co/content/images/2025/06/-------------------2025-06-11-020702.jpg 1882w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Gilbert Color 字符面板</span></figcaption></figure>
<div onmouseover="this.innerHTML=&#x27;OpenType-SVG&#x27;;" onmouseout="this.innerHTML=&#x27;點我看解答&#x27;;" style="
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 10px 15px;
    border: 1px solid #666;
    border-radius: 4px;
    width: fit-content;
    margin: 10px;
    cursor: pointer;
    position: relative; /* 為了定位底線 */
  ">
  點我看解答
  <div style="
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(to right, #007bff, #17a2b8, #28a745, #dc3545);
      background-size: 200% 100%;
      animation: gradientAnimation 2s infinite alternate;
    "></div>
</div>

<style>
@keyframes gradientAnimation {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}
</style>
<h3 id=""></h3>
<div class="quoteBox">
    <h3>Gilbert Color 官網</h3>
        <a href="https://www.typewithpride.com/?ref=blog.twintype.co" rel="noreferrer" target="_blank"></a>
            https://www.typewithpride.com/
    <p></p>
</div>
<style>
    .quoteBox{
        width: 100%;
        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 3em;
    }
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/09Z2MI</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/09Z2MI";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>]]></content:encoded></item><item><title><![CDATA[字體觀察報告：CAD 中的單線體]]></title><description><![CDATA[<p>工程與建築領域的扛霸子 – AutoCAD 中有套令人又愛用恨的「單線體」，這套字型沒有準確的名字，卻在大大小小的施工圖中出現，有著不可比擬的重量。今天來聊聊這套「未命名」字體吧！   這套字型的不同之處  先說說最值觀的外觀吧！看到第一眼，就令人印象深刻。自己獨樹一個的筆畫造型。特別是「水」字邊，有明顯模仿明體的造型，但在其他偏旁，又更接近手寫的風格，例如：「辶」字邊。 還有會出現即使是同偏旁，但是筆畫不一致情況發生。   優缺點  優點來說，因為是單線體，因此調整現行粗細時可以快速與圖面設定響應，且在雷切小型物件時，比起轉外框的文字更不容易燒焦，或是應用於機械彫刻場景。  缺點也顯而易見，因為文字歪斜，因此不利於長文本閱讀，以及容易缺字，例如：土木術語中的「夯實」的「夯」就會缺字，還有標點並非繁體中文常見位置。   事出反常必有因  會有這樣的曲線品質，其實與早期技術有很大關係。將時間回推到 1963 年當時在麻省理工大學攻讀博士學位的 Ivan Sutherland 在論文中提及「Sketchpad」概念，這是由一隻觸控筆與螢幕組成的系統，可以讓使用者在螢幕上繪製線條，這位後來 </p>]]></description><link>https://blog.twintype.co/auto-cad-shx-font/</link><guid isPermaLink="false">683fb46a222ff10001c8856d</guid><category><![CDATA[字型技術]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/auto-cad-shx-font.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Wed, 04 Jun 2025 17:25:55 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/06/-------------1--------82x-100.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/06/-------------1--------82x-100.jpg" alt="字體觀察報告：CAD 中的單線體"><br><p>工程與建築領域的扛霸子 – AutoCAD 中有套令人又愛用恨的「單線體」，這套字型沒有準確的名字，卻在大大小小的施工圖中出現，有著不可比擬的重量。今天來聊聊這套「未命名」字體吧！</p>
<h2 id="%E9%80%99%E5%A5%97%E5%AD%97%E5%9E%8B%E7%9A%84%E4%B8%8D%E5%90%8C%E4%B9%8B%E8%99%95">這套字型的不同之處</h2>
<p>先說說最值觀的外觀吧！看到第一眼，就令人印象深刻。自己獨樹一個的筆畫造型。特別是「水」字邊，有明顯模仿明體的造型，但在其他偏旁，又更接近手寫的風格，例如：「辶」字邊。​還有會出現即使是同偏旁，但是筆畫不一致情況發生。</p>
<figure class="kg-card kg-image-card"><img src="https://blog.twintype.co/content/images/2025/06/20250604003.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/20250604003.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/20250604003.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/20250604003.jpg 1600w, https://blog.twintype.co/content/images/2025/06/20250604003.jpg 1815w" sizes="(min-width: 720px) 720px"></figure>
<h2 id="%E5%84%AA%E7%BC%BA%E9%BB%9E">優缺點</h2>
<p>優點來說，因為是單線體，因此調整現行粗細時可以快速與圖面設定響應，且在雷切小型物件時，比起轉外框的文字更不容易燒焦，或是應用於機械彫刻場景。</p>
<p>缺點也顯而易見，因為文字歪斜，因此不利於長文本閱讀，以及容易缺字，例如：土木術語中的「夯實」的「夯」就會缺字，還有標點並非繁體中文常見位置。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/20250604002.jpg" class="kg-image" alt="用 AutoCAD 單線體輸出的文本。以悲慘世界尚萬強的臨終告解為例：珂賽特，現在我該把你母親的名字告訴你了。她叫芳汀。記住這個名字：芳汀。當你提到她的名字時，你應當跪下。她吃過很多苦。她非常愛你，她的痛苦正和你的幸福成對比。這是上帝的安排。他在天上，他看見我們大家，他在他的星宿中知道他做的一切。我就要去了，孩子們，你們永遠相愛吧。世上除了相愛之外幾乎沒有別的了。Twintype" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/20250604002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/20250604002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/20250604002.jpg 1600w, https://blog.twintype.co/content/images/2025/06/20250604002.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">用 AutoCAD 單線體輸出的文本。以悲慘世界尚萬強的臨終告解為例</span></figcaption></figure>
<h2 id="%E4%BA%8B%E5%87%BA%E5%8F%8D%E5%B8%B8%E5%BF%85%E6%9C%89%E5%9B%A0">事出反常必有因</h2>
<p>會有這樣的曲線品質，其實與早期技術有很大關係。將時間回推到 1963 年當時在麻省理工大學攻讀博士學位的 Ivan Sutherland 在論文中提及「Sketchpad」概念，這是由一隻觸控筆與螢幕組成的系統，可以讓使用者在螢幕上繪製線條，這位後來 CAD 產業奠定了基礎。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/20250604001.jpg" class="kg-image" alt="" loading="lazy" width="1815" height="1021" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/20250604001.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/20250604001.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/20250604001.jpg 1600w, https://blog.twintype.co/content/images/2025/06/20250604001.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Sketchpad 使用示意圖</span></figcaption></figure>
<p>經過了二十至三十年，當時的 Autodesk 公司已經製作出相對成熟的 CAD 產品，業已經準備進軍東亞市場，這又不得不提到令人又愛又恨的 CJK 字型。推測是因為 CJK 字型龐大的字符數量，加上當時 Autodesk 公司本身對於中文字型涉略較少，因此該任務就被外包給某間台灣公司。根據我們解析數位檔案上的簽名寫著「Top One Technology Inc., Taipei., Taiwan.」目前已無法找尋到具體相關資料。</p>
<p>在當時1990年左右，電腦圖形技術還相對不成熟，當時所使用的圖形算法並非是現今設計圈常見的貝茲曲線，而是一種更接近 DDA 的曲線描述方式。畫過 CAD 的朋友就知道，如果要用單純的圓弧與裁剪工具繪製出流暢的曲線是很難的。我們推測這就是曲線品質有很大優化空間的原因。</p>
<h2 id="%E5%8F%AF%E4%BB%A5%E5%9C%A8-autocad%E4%BB%A5%E5%A4%96%E7%9A%84%E7%92%B0%E5%A2%83%E4%BD%BF%E7%94%A8%E5%97%8E%EF%BC%9F">可以在 AutoCAD以外的環境使用嗎？</h2>
<p>很遺憾無法，首先該字型版權屬於 AutoCAD，而其未授權在其他地方使用。另外是該字型是使用一種名為 .shx 的格式。該格式是一種加密的曲線描述文件。如果想要類似極細的黑體，可以考慮友商文鼎的⟨文鼎晶熙黑體⟩或是蒙娜的⟨翔鶴黑體⟩。</p>
<p>如果是想要歪斜效果，可以參考「世界最美字型網」--金梅字型的⟨金梅細黑鋼筆國際碼⟩，筆畫與 AutoCAD 單線體「高度相似（超越致敬的那種...）」。</p>
<p>如果有其他關於該字體的資訊，歡迎透過郵件交流（目前還沒有打算開發留言版功能 xD）。</p>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>https://l.twinty.pe/Tjpa3T</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "https://l.twinty.pe/Tjpa3T";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>]]></content:encoded></item><item><title><![CDATA[常見商用字型授權模式]]></title><description><![CDATA[<p>無論你是設計師、社群小編、創作者，在使用字型都需要了解授權模式，今天將分享三種常見授權模式，讓你輕鬆上手商用字型，避免觸法。   模式 1：買斷  這很好理解。透過一次性付費取得字體的終身授權。目前繁體中文字型中，支援該種方式的廠商包括：justfont、cjkFonts、金梅（全球最漂亮字型網） 以及部分獨立設計師，例如：空氣明朝體。  優點顯而易見，付費一次終身擁有（不知道可否當遺產繼承 xD）；當然費用會較高（畢竟只付一次）。  一般來說印刷物與數位媒材都支援（華康珍藏除外），但不得將字體文件上傳至伺服器或鑲嵌入設備中，以及不得註冊商標與作為圖庫出售。     justfont cjkFonts 華康珍藏   印刷物 可 可 可   數位媒介 可 可 否   安裝數 2 2 1   商標申請 否 否 否   嵌入式 否 否 否   備註   報紙需另洽    模式 2：租賃  在 Netflix、Spotify、Adobe 等串流平台、軟體盛行的年代，大家對「租賃制」一定不陌生。截至 2025 年，目前知名的字型租賃服務方包括：文鼎（森澤）、華康、蒙納以及韓國的Sandoll。 </p>]]></description><link>https://blog.twintype.co/font-licensing-models/</link><guid isPermaLink="false">683c5a076fc4e90001997f81</guid><category><![CDATA[版權資訊]]></category><category><![CDATA[icon:https://imagehub.twinty.pe/images/font-licensing-models.jpg]]></category><dc:creator><![CDATA[Willy]]></dc:creator><pubDate>Mon, 02 Jun 2025 05:09:18 GMT</pubDate><media:content url="https://blog.twintype.co/content/images/2025/06/20250601_001_FM.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.twintype.co/content/images/2025/06/20250601_001_FM.jpg" alt="常見商用字型授權模式"><br><p>無論你是設計師、社群小編、創作者，在使用字型都需要了解授權模式，今天將分享三種常見授權模式，讓你輕鬆上手商用字型，避免觸法。</p>
<h2 id="%E6%A8%A1%E5%BC%8F-1%EF%BC%9A%E8%B2%B7%E6%96%B7">模式 1：買斷</h2>
<p>這很好理解。透過一次性付費取得字體的終身授權。目前繁體中文字型中，支援該種方式的廠商包括：justfont、cjkFonts、金梅（全球最漂亮字型網） 以及部分獨立設計師，例如：空氣明朝體。</p>
<p>優點顯而易見，付費一次終身擁有（不知道可否當遺產繼承 xD）；當然費用會較高（畢竟只付一次）。</p>
<p>一般來說印刷物與數位媒材都支援（華康珍藏除外），但不得將字體文件上傳至伺服器或鑲嵌入設備中，以及不得註冊商標與作為圖庫出售。</p>
<table style="width: 100%; text-align: center;">
  <tbody><tr>
    <th></th>
    <th>justfont</th>
    <th>cjkFonts</th>
    <th>華康珍藏</th>
  </tr>
  <tr>
    <td>印刷物</td>
    <td>可</td>
    <td>可</td>
    <td>可</td>
  </tr>
  <tr>
    <td>數位媒介</td>
    <td>可</td>
    <td>可</td>
    <td>否</td>
  </tr>
  <tr>
    <td>安裝數</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
  </tr>
  <tr>
    <td>商標申請</td>
    <td>否</td>
    <td>否</td>
    <td>否</td>
  </tr>
  <tr>
    <td>嵌入式</td>
    <td>否</td>
    <td>否</td>
    <td>否</td>
  </tr>
  <tr>
    <td>備註</td>
    <td></td>
    <td></td>
    <td>報紙需另洽</td>
  </tr>
</tbody></table>
<h2 id="%E6%A8%A1%E5%BC%8F-2%EF%BC%9A%E7%A7%9F%E8%B3%83">模式 2：租賃</h2>
<p>在 Netflix、Spotify、Adobe 等串流平台、軟體盛行的年代，大家對「租賃制」一定不陌生。截至 2025 年，目前知名的字型租賃服務方包括：文鼎（森澤）、華康、蒙納以及韓國的Sandoll。</p>
<p>租賃制的單次成本會相對較低（新手設計人友好），且通常是一個大綑綁包，風格與總類都很多元。</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/20250601_002.jpg" class="kg-image" alt="Sandoll Cloud 操作畫面截圖" loading="lazy" width="1815" height="852" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/20250601_002.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/20250601_002.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/20250601_002.jpg 1600w, https://blog.twintype.co/content/images/2025/06/20250601_002.jpg 1815w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Sandoll Cloud 操作畫面截圖</span></figcaption></figure>
<h2 id="%E6%A8%A1%E5%BC%8F-3%EF%BC%9A%E5%B0%88%E7%94%A8%E8%BB%9F%E9%AB%94%E3%80%81%E7%92%B0%E5%A2%83%E7%B6%81%E5%AE%9A">模式 3：專用軟體、環境綁定</h2>
<p>這是針對裝置、軟體在購買與訂閱時一同包含的。其實 Windows 作業系統中的微軟正黑體就是一個例子，另外像是 Canva 中配套的「可畫」系列字體（可畫是 Canva 在中文市場圈的正式譯名。算是信達雅？），還有森澤為 Wix 提供的字型，也屬於此類授權。此類字型分為兩種情況，需多加留意。</p>
<h2 id="%E7%8B%80%E6%B3%81%E4%B8%80%EF%BC%9A%E6%8E%88%E6%AC%8A%E5%95%86%E7%94%A8">狀況一：授權商用</h2>
<p>該狀況代表，在訂閱或是擁有該軟體正版授權時，其所提供之字型可以商業使用（具體授權還是要參照官方說明）。</p>
<h2 id="%E7%8B%80%E6%B3%81%E4%BA%8C%EF%BC%9A%E5%83%85%E4%BE%9B%E9%81%B8%E6%93%87%EF%BC%8C%E7%89%88%E6%AC%8A%E5%B1%AC%E6%96%BC%E5%AD%97%E5%9E%8B%E5%BB%A0%E5%95%86">狀況二：僅供選擇，版權屬於字型廠商</h2>
<p>此情況時常出現在中國軟體中，例如：CapCut。在軟體中有許多字型可供選擇，但請注意，這些字型不一定可以商用，甚至是個人使用也需付費。麻煩之處，在於這些字型來自不同廠商，所以需要逐條查看。但有個原則可以遵守：不知道或是不清楚，先向官方詢問，否則一律不要使用！</p>
<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.twintype.co/content/images/2025/06/20250601_001.jpg" class="kg-image" alt="Canva 中自帶⟨可畫⟩系列字型，為軟體綁定之字型案例" loading="lazy" width="2000" height="1009" srcset="https://blog.twintype.co/content/images/size/w600/2025/06/20250601_001.jpg 600w, https://blog.twintype.co/content/images/size/w1000/2025/06/20250601_001.jpg 1000w, https://blog.twintype.co/content/images/size/w1600/2025/06/20250601_001.jpg 1600w, https://blog.twintype.co/content/images/size/w2400/2025/06/20250601_001.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption><span style="white-space: pre-wrap;">Canva 中自帶⟨可畫⟩系列字型，為軟體綁定之字型案例</span></figcaption></figure>
<h2 id="%E7%95%B6%E5%BF%83%EF%BC%9A%E6%8E%88%E6%AC%8A%E6%98%AF%E6%9C%83%E8%AA%BF%E6%95%B4%E7%9A%84%EF%BC%81">當心：授權是會調整的！</h2>
<p>各大廠商的授權條款是會與時俱進的。像是過往，廠商可能不會特別提到「是否禁止機器學習、神經網路訓練...等」。因此需要時常留意字型廠商的授權條款是否有更新，確保不會誤觸法。</p>
<p>且在查詢授權時，務必到所屬字型廠商的「官網」查詢，才可保證資訊正確性，千萬不要去XX下載站。</p>
<hr>
<div class="quoteBox">
    <h3>各家授權連結</h3>
    <p>justfont：
        <a href="https://store.justfont.com/universal-contract?ref=blog.twintype.co" rel="noreferrer" target="_blank">
            https://store.justfont.com/universal-contract
        </a>
    </p>
    <p>文鼎 iFontCloud：
        <a href="https://ifontcloud.com/index/eula.jsp?ref=blog.twintype.co" rel="noreferrer" target="_blank">
            https://ifontcloud.com/index/eula.jsp
        </a>
    </p>
    <p>華康：
        <a href="https://www.dynacw.com.tw/business/licensing_usage.aspx?ref=blog.twintype.co" rel="noreferrer" target="_blank">
            https://www.dynacw.com.tw/business/licensing_usage.aspx
        </a>
    </p>
    <p>cjkfonts：
        <a href="https://cjkfonts.io/?ref=blog.twintype.co" rel="noreferrer" target="_blank">
            https://cjkfonts.io/
        </a>
    </p>
    <p>金梅（全球最漂亮字型網）：
        <a href="https://www.gs1.com.tw/?ref=blog.twintype.co" rel="noreferrer" target="_blank">
            https://www.gs1.com.tw/
        </a>
    </p>
</div>
<style>
    .quoteBox{
        width: 100%;

        color: #222222;
        padding:10px;
        font-size:16px;
        line-height: 3em;
    }
</style>
<div style="width:100%;display:flex;justify-content: left;font-family: &#x27;IPST-Regular&#x27;,sans-serif;">
    <div class="copy-container" onclick="copyLink()" style="width:100%;">
        <div style="width: 100%;" class="containerSubBox">
            <span class="link-text"><u>http://l.twinty.pe/UausId</u></span>
            <span class="copy-text" id="copyStatus">分享文章</span>
        </div>
        <div style="width: 100%;border-top:1px solid black ;margin-top: 5px;display: flex;gap: 10px;padding: 10px;">
            <div style="min-width: 80px;">
                <img src="https://imagehub.twinty.pe/icons/by-nc-sa.svg" alt="" style="width: 100%;">
            </div>
            <div style="font-size: 8px;">
                <span>CC BY-NC 4.0</span><br>
                <span>此授權條款要求再使用者必須對創作者進行署名。它允許再使用者以任何媒介或格式，出於非商業目的，分享、重混、改編及依原作品進行創作。唯重製後之作</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLink() {
        const link = "http://l.twinty.pe/UausId";
        navigator.clipboard.writeText(link).then(() => {
            const status = document.getElementById("copyStatus");
            status.textContent = "已複製";
            setTimeout(() => {
                status.textContent = "分享文章";
            }, 3000);
        });
    }
</script>
<style>
    .copy-container,
    .containerSubBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .copy-container {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ecf4f9;
        border-radius: 0px;
        padding: 10px 18px;
        background-color: #f1f6fd;
        cursor: pointer;
        user-select: none;
        font-family: sans-serif;
    }
</style>]]></content:encoded></item></channel></rss>