如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

取得開源或可以商用的字體不見得會提供每種字體格式,例如我們想要將 TTF 的字型檔轉換成可以在網頁顯示的 WOFF 字型,這時候我們可透過 Font Converter 這個字型轉換免費網站來協助,其支援 bin、cff、dfont、eot、gsf、otb、otf、pfa、pfb、ps、pt3、sfd、svg、t42、tfm、ttc、ttf、woff 及 woff2 等各類字型檔案,轉換成 TTF、OTF、WOFF、WOFF2、EOT 及 SVG 這六種字型檔案格式,以 手寫硬筆書法「隨峰體」來說,轉成 WOFF 字型檔後,我們就可以透過 CSS 將該字型應用到網頁內,增加網頁設計時對字體能有更多的選擇。

§相關文章,還可以參閱:

如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

1.使用瀏覽器開啟 Font Converter網站,請先選定要轉換的字體檔案格式,再選擇上傳。

如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

2.每次可以上傳 20個字型檔,完成轉換後,可按[ DOWNLOAD ALL ]下載。

如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

3.以下是以 手寫硬筆書法「隨峰體」轉成 WOFF 字型檔後應用到網頁為範例。

如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

4.解壓縮已轉換的字型檔,將其複製到網站上,並記住其網址,接下來我們就可以在網頁使用 @font-face 這個 CSS 的 at-rule,其可讓網頁設計者在選擇字型時不需要考慮一般的電腦是否有安裝,凡是放在網路上的任何字型檔都可以使用,基本語法使用如下:

@font-face {     font-family: chtouch     src: url(http://example.com/fonts/chtouch.woff); } p {  font-family: chtouch,serif;  }

這裡我們指定了 chtouch 這個字型的字型檔案網址為 http://example.com/fonts/chtouch.woff,並設定讓所有網頁中的 <p> 都使用 chtouch 來顯示,而如果碰到不支援 @font-face 的瀏覽器,則會使用第二順位的 serif 這個字型來顯示。

5.為更符合實際應用時的情況,我們可以將 CSS 語法做如下變化:

@font-face {     font-family: keychtouch; /*使用者可自訂字型名稱*/     src: local(keychtouch),    /* 指定使用者電腦中的 keychtouch 字型 */     url(/sample/4872/ThePeakFontBeta_V0_101.woff);/* 如果使用者電腦中找不到,則從網路下載 */ } p {  font-family: keychtouch,serif;  }

如何轉換 TTF 成 WOFF 字型檔並應用到網頁?

使用瀏覽器開啟 開啟範例

一想到要將表格內的表頭固定在每頁的上方且又可以讓使用者對每個欄位進行排序,多數人可能就會想到用試算表來達成,其實,如果不牽扯到計算功能,使用「Google 文件」來製作表格,反而會更直覺且更簡單,在 Google 文件中使用表格,除了可以使用原有插入表格的功能來快速產生表格外,現在更加入多項更方便且具有試算表才有的簡單功能,例如前述所說的表頭固定、欄位排序及快速添加欄未獲資料列、防止資料因分隔符號造成溢出到下頁等,另外,也增加<a href="/4869/">不分頁</a>功能,可讓大表格完整的呈現到頁面上,讓閱讀者可以獲得更好的閱讀體驗。

在 TikTok 碰到想要下載保存的影片,有很多網站可以讓我們選擇,像是 <a href="/3656/">Snap Tik</a>、<a href="/3838/">Mobile TikTok &amp; Downloader</a> 及 <a href="/3851/">SaveTT.cc</a>都相當好用,而 VIDFROM 這個網站推出的 TikTok Downloader 免費服務,同樣可用來下載抖音內的影音,使用者只須貼上影片網址就可以下載,且全程無廣告干擾,另外該網站尚有 Facebook、Vimeo、Twitter、SoundCloud 及 VLive 等社群內的影片下載服務,有需要可來試試。