先前介紹過 Google Fonts ,當然其他軟體廠商也有提供相同的服務。今天要介紹的是 Adobe 推出的免費網頁字型服務,Adobe 推出的網頁字型質量也不輸 Google Fonts,接著來看看如何使用。
Adobe Edge Web Fonts
Adobe Edge Web Fonts :http://edgewebfonts.adobe.com/fonts
進入 Adobe Edge Web Fonts 可以看到它利用右側基本的字型圖案來分類你可以選擇的字體 ( 如 :有無襯線的字體、手寫體等等),因此雖然不懂字的設計概念也可以透過圖案的差異來選擇。
當然它也可以設定字型大小、字體寬度等選項。它還提供了兩種狀況下的推薦字型,分別為:標題 ( Headings )、段落 ( Paragraphs ),所以你可以針對你要使用的情況來選擇。更方便的是你可以直接輸入你想要使用的字,它會即時呈現字型效果。操作畫面如下:
選擇自己想要的字型後,可以看到下方列出所選擇的字型清單以及 Adobe 自動產生的 Javascript 連結,如下圖:
Adobe Edge Web Fonts 引入字型的方式就是在網頁 <head> 區域內加入 Adobe 提供的 Javascript 檔案。方式如下:
引入字型後,別忘了仍然要在 CSS 檔案使用該字型。如下圖:
透過 Adobe Edge Web Fonts 網頁設計者就可以輕鬆的使用漂亮的網頁字型。
熱門文章
-
Launchd 是設計用來管理系統中的 Process、Application 及 Script,它包含了與 Cron 相同的服務。本文章將要介紹如何透過 Launchd 管理並執行例行性任務於 Mac OS X 上。( 其他 Mac 相關教學可以參考 本篇整理 。If you...
-
之前的文章主要探討的都是一個訊息由一個 Consumer 處理,但若我們需要的是一個訊息同時傳送至所有的 Consumer 的話,我們則需要應用 Publish 與 Subscribe 模式,本篇將討論如何使用這個模式。( 其他 RabbitMQ 相關教學可以參考 本篇整理 )...
-
Jekyll 是一個很方便的網站、部落格產生器,它的功能夠簡潔就是專注在產生一個靜態網站。但也因為這樣,有一些需要動態產生的東西無法透過 Jekyll 直接實現。例如:每當使用者進入頁面,讓網頁產生隨機文章連結。所以,本篇將介紹如何利用 Jekyll 實現隨機文章的功能。( If...
-
本篇針對資料存取採用 Hibernate 與 Spring MVC 達到 CRUD ( 新增、讀取、修改、刪除)功能,DB 方面使用 H2 Data Base。閱讀本篇文章可先參考前一篇 H2 Data Base 設定應該會更有幫助。此外因為資料存取部份複雜,所以會拆成數個部份一...
-
開發 React 應用程式時,比較常遇到的問題就是 bundle.js 或其他檔案太大,導致頁面載入時間過長。但透過 Webpack 與一些優化技巧可以大幅減少整個應用程式大小。因此,本篇將介紹如何利用 Webpack 減少 React 應用程式大小。( If you want ...



