Font Dragr:一個強大的即時測試字型網站


在這個競爭激烈的世界裡,網站網頁設計師都希望自己的網站能夠脫穎而出,而字型樣式也是網站的重要組成部分之一。然而,選擇合適的字型樣式往往需要花費網頁設計師大量時間,這是一種時間的浪費。

在網頁上應用自定義字型是一項非常困難的任務,需要多個步驟。首先,網頁設計師必須選擇要設定樣式的文字;其次,選擇字型並將其轉換為Web相容格式;最後,將其新增到樣式規則中。如果有人一直在做這件事,那將是一項非常枯燥且耗時的任務。“Font Dragr”這一替代方案則以其出色的字型樣式解決了上述所有問題。

“Font Dragr”是由Ryan Seddon開發的,它提供了一種創新且簡便的測試瀏覽器字型樣式的方法。只需將字型從控制面板下的字型集合拖放到“Font Dragr”頁面上的“字型下拉”框中(此處已選擇“拖放”選項),頁面上的字型就會自動更改為所選字型(如圖2所示)。

它支援多種字型檔案型別:Web開放字型格式 (WOFF)、TrueType (TTF)、可縮放向量圖形 (SVG) 和OpenType (OTF)。

Font Dragr是一個開源網站,它可以透過簡單的“拖放”操作方便地更改任何網站上的字型。使用者可以透過兩種方式檢查字型樣式:

  • 使用編輯器和相簿標籤頁
  • 使用書籤小程式

使用編輯器和相簿標籤頁

在FontDragr中,拖放過程完成後,訪問兩個標籤頁:編輯器和相簿標籤頁。

要在Font Dragr上測試字型,使用者可以將字型從計算機拖放到編輯器頁面(為此,使用者需要支援HTML5功能的現代瀏覽器)或從相簿中選擇字型(適用於所有瀏覽器)。然後,使用者可以看到所選字型在不同大小和顏色下的效果。

編輯器標籤頁有助於使用以下選項進行字型樣式檢查:正文大小比較、灰度、字型大小、文字樣本和字元。這是一個很棒的工具,可以輕鬆測試免費軟體和開源字型,無需費力建立webfont包。

在編輯器標籤頁中,使用者可以使用任何字型樣式檢查任何文字。它完全可編輯。

在相簿頁面中,使用者可以試驗9種列出的字型樣式。只需選擇其中一種並開始操作即可。

使用書籤小程式

或者,還有一個使用字型的選項——書籤小程式。為此,只需將書籤小程式拖到書籤欄,然後開啟使用者要測試的任何站點,點選書籤欄上的書籤小程式,它將開啟一個小書籤小程式視窗來測試網站字型。

圖5顯示了書籤欄上的“Font dragr”書籤小程式。轉到使用者想要檢查字型的網站,點選書籤小程式,將顯示一個標題。在選擇器文字框中,使用者可以指定要更改字型樣式的HTML元素。預設選擇器是p標籤,但使用者可以測試body、h1、h2等(如圖6所示)。

開啟要更改字型的網站後,開啟控制面板->字型集合,選擇要更改字型的文字,然後將字型拖放到FontDragr標題中。受影響的文字將自動更改以反映使用者選擇測試的字型(如圖6所示)。

結論

還有其他網站提供與Font Dragr類似的功能,例如:Web Fonts Preview、FontFonter、FontFriend或FontPrep(僅適用於Mac),但這些網站不如Font Dragr好用,使用者可能會發現Font Dragr是更改字型樣式最全面、最易於使用的工具。

更新於:2020年1月16日

瀏覽量:110

開啟你的職業生涯

完成課程獲得認證

開始
廣告
© . All rights reserved.