Skip to main content

Command Palette

Search for a command to run...

網路字型的好幫手 FontForge

Updated
1 min read
網路字型的好幫手 FontForge

FontForge 是一套免費(歡迎抖內)的字型編輯軟體,提供了圖形化的操作介面,還支援直接用 script 操作。

它可以:

  1. 透過軟體介面編輯製作字型,想發明什麼字型都沒問題

  2. 從現有的免費字型中抽取所需的字圖輸出成新字型

  3. 匯入 svg 檔案組合成字型檔

  4. 字型間的轉檔 例如:ttf 檔 轉 woff

  5. 更多更多⋯⋯請看 官方說明文件

截圖 2022-05-23 下午3.11.10.png

更吸引人的是~ 它內建支援 python,只要你的電腦環境有安裝 python,安裝 fontforge 之後就能把它當成套件來使用~

巴特!光是下載軟體是不能在終端機用 Python 執行它的喔!

在 mac 環境,要直接在終端機執行,是要透過 homebrew 來安裝的

brew install --cask fontforge

安裝完成後可以試看看在 python 中 import 它:

import fontforge

如果安裝後,它沒有自動連結到 python 的話,執行時會發生 no module named fontforge 的錯誤, 這時候就是移除後再重新安裝,我之前發生過安裝時一直抓到 fontforge 舊版,後來更新 homebrew 才順利安裝完成。

另外它還有一個小 bug,似乎是在 mac 環境才有,就是「無法直接透過 python 產生 woff/woff2 格式的檔案」,輸出的檔案都是壞掉的,但是同事用 windows 是可以正常產生的。

遇到這種狀況,目前我是用它的軟體開啟 ttf 檔來產生 woff2 檔:

另存woff.png

雖然有些小小不便,但還是瑕不掩瑜。

另外,在找關於 woff/woff2 問題解法時,意外發現一篇文章寫的好淺顯易懂,推薦給大家~ 透過減少 ttf 字體檔案大小來增進網頁效能

Tip: 選擇 Encoding -> Compact 就能一次刪掉字體裡的所有空白字圖

fontforge 真的是一個很棒的軟體,有機會用它來做個小白體吧!

參考資料

More from this blog

CSS 製作友善列印(print friendly)

在一些以文字內容為主的網站,常常會看到「友善列印」(print friendly) 的功能, 這功能提供使用者可以方便列印文字內容,不想印出來的導覽列啦、選單啦,通通都給它變不見。 傳統的作法是用 javascript 把本文送去一個新的視窗,再來進行列印, 但現在透過 CSS 的 Media Queries 不需要任何一行程式碼,就能完成列印時的頁面設定喔! 只要在 CSS 裡面加上屬於 print 的設定: @media print { *{ backgrou...

May 23, 20221 min read
CSS 製作友善列印(print friendly)

用 CSS 取用 fontawesome 圖示

Font Awesome 是我蠻喜歡的圖示字型服務,因為它入手相當簡單,適合像我這種小白使用,圖示種類也蠻豐富可愛的。 最常見的用法是找到你要的圖示,比方說底下這個紅蘿蔔: https://fontawesome.com/v5/icons/carrot?s=solid 直接把它提供的 HTML 貼到想放的位置就可以了~ <i class="fas fa-carrot"></i> 一般像是按鈕或選單用到的圖示,只要貼上去就好啦! 巴特,又是那個巴特,如果今天想在每一個段落前都給它一個紅...

May 22, 20221 min read
用 CSS 取用 fontawesome 圖示

White Bunny's Notes

5 posts

Learn a little every day.