字型這一詞在開發中有不小的占比和使用場景，如在 VIM 這類的編輯器中，我們會使用諸如 nerd-fonts[1] 這類字型增強顯示，比如 icon 等。
在視覺傳達的角度來考慮，發展到一定企業或團隊、組織機關等會開發和設計自己的字型。甚至是一些大型的活動，也會定制屬于自己的一款自己，比如最近的北京 2022 年冬奧會，就定制了其專屬字型。
每年。這些有錢的大公司或精緻的小公司，都在字型這方面下了很多功夫且耗資巨大。
在大陸，有方正字庫這種大型的字型設計公司，幾乎我們每台搭載 Windows 系統的機器都會使用方正字庫設計的微軟雅黑字型。
如果你不幸在設計中使用了微軟雅黑，那麼方正字庫就會控告你侵權，進而擷取高額的賠償。但微軟雅黑本身就是作為微軟且周邊生态的預設字型。
不止微軟雅黑，你能看到的大陸一些知名企業。如 360、京東、淘寶、美團、抖音、喜茶、少林寺、vivo、阿裡健康體、HONOR Sans、IQOO、攜程、美的、中國美術學院的進道體、小米蘭亭、甚至是冬奧會、可口可樂、新華社的新聞體，都是方正字庫所進行設計和開發的。
但也有像是思源黑體、思源宋體、站酷酷黑體、昭明黑體、原石黑體等一系列開源的字型。您可以在 中文開源字型集[2] 中看到這些偉大的項目。
大陸也有很多關于字型的諺語。如：“見字如面”、“字如其人”、“一字千秋”。甚至是：“八字沒一撇”。你可能不知道宋徽宗，但你一定知道徽宗手下的 “瘦金體”。即使不知道宋徽宗，那你肯定也知道王羲之、顔真卿這種書法大家。
比如在小時候我們寫字的時候，因為我比較喜歡寫連筆字（還醜），也會被老師和父母冠以 “龍飛鳳舞” 的成語陰陽我幾句。
有趣的是，Windows 的開機時下面的加載動畫，也是通過字型進行封裝而設計的。這種操作其實大量運用在 Icon 中（因為友善且快那麼一點點）。
那我們普通人，如何擁有自己的一款字型呢？本文借着為江雪設計的一款「清文」字型而進行延伸。
字型是如何設計的呢？
首先要了解字型如何設計，必不可少的就是設計理念。也就是你為什麼要設計一款字型，且你的需求是什麼？最起碼是看起來是什麼樣的？
先确定好了需求，接下來就是設計角度和方法。本文以等襯體為例。
在上圖中，我們可以發現，每個字型都是由 9x9 的方塊演變而來，并且限制了高度和寬度，也就是 91 的寬度 61 的高度。
通過這樣的設計，我們得到了一個看似很科幻的字型設計稿。但這僅僅是字型設計的第一步。
注意，在字型設計中，無論你使用 Adobe Photoshop 還是 Adobe Illustrator，甚至是 Figma、Adobe XD、Sketch 這些設計軟體，都可以完成 SVG 的設計。
退一步說假設你是一個有着嚴重開源潔癖的人，那沒問題！我們也可以使用 GIMP、Krita、Inkscape。
無論你使用什麼，隻要能導出 SVG 就可以進入下一步。
字型有了設計理念和規格，下一步？？
在第二步中，我們需要将字型的設計稿，轉換為字型，也就是通過字型設計軟體，将 svg 複制到對應字型的 Unicode point 中。
在這個過程中，我們需要使用 birdfont[3] 完成這一最終步驟。
慶幸的是，這樣一款優秀的字型設計軟體，它是通過 GNU GPL v3 協定開源的，你可以 點此檢視它的倉庫[4]。
可惜的是它經曆了 3000 多次送出，但隻有 400 star。這是因為作者将大量的時間投入到了 code 中，而沒有過多的時間營運社群。
在打開軟體時，它會提示您想要建立一款商業字型還是根據 SIL Open Font 許可證的字型？
需要注意的是，著名的 Google Fonts[5] 字型，也是通過 SIL Open Font 許可證進行分發的，這意味着您可以免費使用（包括在商業項目中使用，而不追究版權）。限制時您不可以出售使用 SIL Open Font 字型許可的字型。
，時長00:29
其實這個步驟超級簡單，您隻需要将設計好的 svg （最好在 svg 中包含間距）複制到 birdfont 中，然後進行調整即可。
最後，當您為必要的字元設計好時，比如 25 個字母和 0～9 的數字，以及一些特殊符号。這時您可以在 birdfont 中設定字型的名稱和描述，導出為 ttf 即可。
具體的您可以參考 Tsing-font[6] 字型，它不僅将字型通過 SIL Open Font 免費分發，還公開了其 Figma 的設計檔案[7]
甚至是 birdfont 設計源檔案[8] 也在其倉庫中。
該字型提供了一個簡單的網站來進行展示其字型的樣式。我想您可以通過 Tsing font 這款字型，來了解字型設計的流程和從設計到可以應用到這一階段。
如何使用字型？
如果您到了最後一步，也就是導出了 ttf 檔案，那麼您需要做的就是安裝。有趣的是每個系統都會有自己的一段字型預覽描述。
比如 Ubuntu 的字型測試内容就是 “I can eat glass, it doesn't hurt me（我可以吃玻璃，它不會傷害我）”，而 Windows 上有的機器顯示的是：“中國制造，彙集全球 Made in China……）”
我很期待你的系統字型測試内容是什麼？或許你可以在評論區中分享下。
安裝好了字型就是使用，我們展現下在 Figma 看看我們自己做的字型是什麼樣的？
非常棒！我們的字型可以使用，并且我們還可以通過為字型加入描邊的方式，讓其變得粗一點，視覺效果看起來更棒！
，時長00:08
作為一個前端領域專注于 CSS 的公衆号，雖然我們的字型不支援可變（也就是粗細可變）但。我們可以通過 CSS 特有的特性 -webkit-text-stroke 實作為字型加粗！
-webkit-text-stroke 的支援性非常好，以至于目前所有的浏覽器都支援它的顯示，是以這也可以讓我們的字型在前端呈現時，是可以保證字型的粗細可變的。
字型的顯示問題
在寫 CSS 的時候，最害怕的一定是 CSS 元素在各個浏覽器的适配性。上述我們生成了 TTF 檔案，可能我們在本地環境中的 Chrome、Firefox、Safari 等浏覽器都是可以正常顯示的。
但放到生産環境，Firefox、Safari 可能顯示不了我們的 TTF 字型，需要通過一些工具進行轉換，比如 Convertio 這樣的線上工具，同時在 @font-face 中添加它們：
@font-face {
font-family: "Tsing";
src: url("Tsing.woff2") format("woff2"),
url("Tsing.woff") format("woff"),
url("Tsing.ttf") format("truetype");
}
至此字型制作的流程就到以尾聲。但真實的情況是，在字型設計完後還需要有很長的一段時間根據該字型設計一些海報和字型演變的視訊，結合到其該品牌的視覺系統中。但由于我們是做個字型自己用，是以就可以減少一些視覺傳達和營銷層面上的設計包裝。
最後
本文到此結束，希望對你有幫助 :)
如果還有什麼疑問或者建議，可以多多交流，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
參考資料
[1]
nerd-fonts: https://github.com/ryanoasis/nerd-fonts
[2]
中文開源字型集: https://font.gentleflow.tech/
[3]
birdfont: https://birdfont.org/
[4]
點此檢視它的倉庫: https://github.com/johanmattssonm/birdfont?tab=readme-ov-file#readme
[5]
Google Fonts: https://fonts.google.com/
[6]
Tsing-font: https://github.com/iepn/tsing-font
[7]
Figma 的設計檔案: https://www.figma.com/community/file/1369266571672278927/tsing-font
[8]
birdfont 設計源檔案: https://github.com/iepn/tsing-font
作者:iepn
來源-微信公衆号:iCSS前端趣聞
出處:https://mp.weixin.qq.com/s/0a_Yz6S8lUTDICY2E6GiZg