Adobe Edge WebFonts 學習

這一節老師將帶領大家了解一個字體工具軟件， Adobe Edge Web Font，稱其為軟件是因為它所實現功能的作用形式與軟件一樣。從名字看，大家也能看出這個軟件和 Dreamweaver CC 2018 一樣，都是 Adobe 相關的產品。

那么在本節知識點中，我們將對 Adobe Edge Web Font 進行一定的介紹和科普，了解它的過去和現在。本節作為一個 Dreamweaver 生態圈學習的了解模塊，不需要大家掌握太多的知識點，而是了解這個軟件的基本功能和作用即可。接下來就讓我們一起來了解這個 Adobe Edge Web Font 軟件吧！

1.網頁字體的歷史與背景

自打我們開始學習網頁設計，我們可以發現，我們大多數設置字體的方式是通過網頁的現有的 font 標簽的屬性來設置?？赡苡械耐瑢W就會有疑問了，這些從一開始就可以輕松設置的字體來自于哪里？

在遵循 W3C 規范的標簽使用過程中，字體的解析都是由瀏覽器參與完成的。你可以理解為瀏覽器這個獨特的系統提前預設或者內置。

那么，既然是預設內置，就必然面臨被人們看膩，千篇一律，可組合性太低等缺點。那么如果作為一個個人網頁設計者，如何才能從瀏覽器預設內置的字體中跳出來，追求自己想要的字體，比如 Android 手機，或者 iPhone 手機中的各式各樣的字體？首先是能不能的問題，在這里老師可以明確告訴大家，能！然后是如何去使用這些外來的字體呢？我們一般分成兩種使用方式。

第一種：

在早期的一段時間內，有些網頁設計者采用的就是這種方式，也就是用部分文字圖片替代部分文字，以追求獨立于瀏覽器內置預設字體之外字體的效果。這里說的部分文字圖片是什么意思呢？就是圖像工作者，先用制圖軟件制作出一些不同樣式字體的文字，然后把它們作為類似活字印刷術的字塊做成字庫，這樣就可以在用到哪個字的時候，就用我們制作好的這個字的圖片去替換，從最終的顯示效果和結果上看根本沒有任何區別。

第二種：

第二種就是加載一些第三方的字體文件庫，比如早期常見的有 Goole 公司提供的 Goole Web Fonts。到后來，有我們今天要說的 Adobe Edge Web Fonts，作為網頁設計者和網頁用戶，這二者并不能看出太大的區別。而且我們今天講到的 Adobe Edge Web Fonts 加載字體速度很快，使用起來十分流暢。加上它與 Adobe Creative 的深度融合，如果你是一個 Dreaweaver CC 的使用者，那么 Adobe Edge Web Fonts 絕對是你更換網頁字體的不二選擇！

2. Adobe Edge Web Font

通過上一個知識點的層層引導，大家應該已經大致知道 Adobe Edge Web Fonts 是什么東西了。簡單說，它就是 Adobe 官方推出的一個字體庫。下面是從 Adobe Edge Web Fonts 的官網找來的一張他們官網的截圖。

從這個圖片中我們可以看到。Adobe Edge Web Fonts 提供了非常廣泛的字體樣式，并且有非常廣泛的應用場景，比如公交站牌，廣告板，仿佛世界上凡事應用到文字的地方都可以應用上 Adobe Edge Web Fonts 的字體庫。

那么，在本節的下一個知識點中，老師將為大家講述如何在 Dreamweaver CC 2018 中使用 Adobe Edge Web Fonts。

2. 在 Dreamweaver CC 2018 中使用 Adobe Edge Web Font的使用方法

在上面的知識點中大家了解了網頁中字體多樣化的意義以及主流的第三方字體庫。那么現在我們就來開始學習一下如何在Dreamweaver CC 2018 中使用并掌握 Adobe Edge Web Fonts 豐富自己網頁中的字體。

首先我們創建一個空白的 HTML 網頁。由于之前的章節都做了圖片展示，從這一節開始我們就不再為新建 HTML 網頁進行圖片說明了。

創建好一個空白文檔后，點擊菜單欄中的工具菜單，在彈出的下拉菜單中選擇管理字體。

點擊完管理字體之后的界面是下面這幅圖片這樣的，相信眼睛比較敏銳的同學已經看到了 Adobe Edge Web Fonts 的身影。

在這里其實也給大家介紹一下在 Dreamweaver CC 2018 中更廣義的字體設置。通過打開管理字體的窗口我們可以看到，這里第一項是 Adobe Edge Web Fonts ，并且下面方框中展示了非常多的字體可以選用。并且在本窗口的最上方，第二個選項則是選擇本地字體，這也就提醒我們，我們不僅僅可以通過 Adobe Edge Web Fonts 字體庫獲取字體，也可以把自己創作的字體庫，或者字體文件通過導入的方式進行使用。

當然，后者的使用方式適合一些設計團隊成熟的團隊或者工作室，在這里老師主要講解 Adobe Edge Web Fonts。對自定義部分就不做深入講解了。大家只需要知道它的操作入口在哪里就好。

既然我們都知道了如何管理字體，那么我新建這個空白的 HTML 頁面有什么用呢？我如何設置字體呢。這就和大家之前給一個新建的 DIV 中的文字設置字體一樣，在當前頁面內選擇在當前頁面中新建源，然后給新建的 HTML 元素的 ID 或者 CLASS 賦值，有了 ID 或者 CLASS 后，大家就可以給他們關聯 CSS 設計器，關聯完設計器后就可以在屬性面板選擇相應的屬性。

如下圖所描述的那樣，我們在屬性面板此時找到字體設置的相關屬性，比如 font ，就可以看到彈出了一個長長的列表（圖片中紅色框起來的部分）。最后，這個長長的列表最下面還有一個管理字體的入口。這就是方便你隨時往這個列表里加或者減少字體。

3. 小結

本節為大家介紹了 Adobe Edge Web Font 插件，關于這個插件的更詳細的功能介紹和使用方法，大家可以在相關的搜索引擎輸入相關詞語進行檢索?；ヂ摼W上目前已經存在了非常豐富的學習資料，供大家參考，今天在這里，老師只作為一個引路人，為大家引導使用一些這個插件的功能以及做一些簡單的核心的介紹。要理解，像這樣能夠擴展 Dreamweaver CC 2018 設計功能的插件還有很多，大家只要平時多多留意 Dreamweaver 的官網，關注相關的論壇，社區，就一定能夠了解到非常全面而充足的實用的工具。那么本節的知識點介紹就到此結束了。

本節知識點整體難度基本沒有，本節知識點的難點是：操作和使用 Adobe Edge Web Font 插件進行簡單的使用。

本節知識點的重點是：了解 Adobe Edge Web Font 在 Dreamweaver CC 2018 中的具體使用操作方法。
本節知識點的難點是：能夠在掌握 Adobe Edge Web Fonts 后，合理選用相關的字體豐富自己的網頁。