Font Comparer - Google Web 字型線上預覽服務

Font Comparer - Google Web 字型線上預覽服務

製作網頁時,若想使用一些較特殊的字型,往往需要以圖片的方式來呈現,這是因為來瀏覽網頁者的電腦裡未必裝有該字型,若不使用圖片來呈現,有可能會出現亂碼或是以別的字型來取代,造成排版不易,Google Web Fonts 便有提供該困擾的解決方案,便是將字型以 CSS 的方式做連結,這樣製作網頁與瀏覽網頁的雙方便可以以 Google Web Fonts 為中心來取得該字型,解決此一困擾,目前 Google 提供的字型不少,要如何才能快速找到適合自己網頁裡可以使用的字型呢?可以來試試 Font Comparer 這個免費的 Google Web Fonts 進階應用線上服務,只要輸入要預覽的字體,便會一次列出目前 Google 有提供字型的預覽,並提供 CSS 的使用語法,相當方便。

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

如何使用 Font Comparer?

1.使用瀏覽器進入 Font Comparer 網站後,輸入要預覽的英文字體,邊輸入便可即時預覽,可調整文字的顏色、背景色或使用文字陰影,在網頁的最下方處,可選擇 Google Fonts 。

Font Comparer - Google Web 字型線上預覽服務

2.遇到適合網頁裡的字型時,將滑鼠移到字型名稱處,其後方便會出現[Get Font]。

Font Comparer - Google Web 字型線上預覽服務

3.點擊[Get Font]便會出現該字型所需要的 CSS 語法便會顯示在畫面下方,複製這些語法加入到 HTML - head 標籤內和 CSS 檔案內就可以使用。

Font Comparer - Google Web 字型線上預覽服務

4.若你想下載這些字型,也可以將字型名稱記下後到 Google Web Fonts 來下載。

Font Comparer - Google Web 字型線上預覽服務

5.使用 Search 找到所要字型後,點擊[Add to Collection] > [Download your Collection]。

Font Comparer - Google Web 字型線上預覽服務

若想檢視 Google Chrome 瀏覽器所下載的檔案時,可以開啟「下載」頁面來檢視所有以下載的項目,不過這個「下載」按鈕無法直接顯示在瀏覽器的功能表列上,每次要開啟「下載」頁面就需要點擊板手圖示按鈕,再來點選「下載」功能才能開啟,有點麻煩,若想加快開啟的速度時,可以試試加裝 Chrome 的 Downloads 擴充功能,安裝後,直接在功能表上就可以開啟「下載」頁面,快速檢視下載項目。

有時會為了將檔案做更好的管理,會使用資料夾的方式來做分類,若是想使用檔案名稱來建立資料夾時,可以來試試這套免費又免安裝的 Files 2 Folder 免費工具,使用方式很簡單,只需使用滑鼠右鍵點擊 Files 2 Folder 便能以檔案名稱建立一新資料夾,並將原檔案移到該新資料夾中;若是一次圈選多個檔案時,則會彈出輸入框來輸入新資料夾的名稱,建立後,同樣會將已圈選的檔案全部移到該資料夾中。