Adobe Edge WebFonts 學(xué)習(xí)

這一節(jié)老師將帶領(lǐng)大家了解一個(gè)字體工具軟件， Adobe Edge Web Font，稱(chēng)其為軟件是因?yàn)樗鶎?shí)現(xiàn)功能的作用形式與軟件一樣。從名字看，大家也能看出這個(gè)軟件和 Dreamweaver CC 2018 一樣，都是 Adobe 相關(guān)的產(chǎn)品。

那么在本節(jié)知識(shí)點(diǎn)中，我們將對(duì) Adobe Edge Web Font 進(jìn)行一定的介紹和科普，了解它的過(guò)去和現(xiàn)在。本節(jié)作為一個(gè) Dreamweaver 生態(tài)圈學(xué)習(xí)的了解模塊，不需要大家掌握太多的知識(shí)點(diǎn)，而是了解這個(gè)軟件的基本功能和作用即可。接下來(lái)就讓我們一起來(lái)了解這個(gè) Adobe Edge Web Font 軟件吧！

1.網(wǎng)頁(yè)字體的歷史與背景

自打我們開(kāi)始學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，我們可以發(fā)現(xiàn)，我們大多數(shù)設(shè)置字體的方式是通過(guò)網(wǎng)頁(yè)的現(xiàn)有的 font 標(biāo)簽的屬性來(lái)設(shè)置?？赡苡械耐瑢W(xué)就會(huì)有疑問(wèn)了，這些從一開(kāi)始就可以輕松設(shè)置的字體來(lái)自于哪里？

在遵循 W3C 規(guī)范的標(biāo)簽使用過(guò)程中，字體的解析都是由瀏覽器參與完成的。你可以理解為瀏覽器這個(gè)獨(dú)特的系統(tǒng)提前預(yù)設(shè)或者內(nèi)置。

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

第一種：

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

第二種：

第二種就是加載一些第三方的字體文件庫(kù)，比如早期常見(jiàn)的有 Goole 公司提供的 Goole Web Fonts。到后來(lái)，有我們今天要說(shuō)的 Adobe Edge Web Fonts，作為網(wǎng)頁(yè)設(shè)計(jì)者和網(wǎng)頁(yè)用戶(hù)，這二者并不能看出太大的區(qū)別。而且我們今天講到的 Adobe Edge Web Fonts 加載字體速度很快，使用起來(lái)十分流暢。加上它與 Adobe Creative 的深度融合，如果你是一個(gè) Dreaweaver CC 的使用者，那么 Adobe Edge Web Fonts 絕對(duì)是你更換網(wǎng)頁(yè)字體的不二選擇！

2. Adobe Edge Web Font

通過(guò)上一個(gè)知識(shí)點(diǎn)的層層引導(dǎo)，大家應(yīng)該已經(jīng)大致知道 Adobe Edge Web Fonts 是什么東西了。簡(jiǎn)單說(shuō)，它就是 Adobe 官方推出的一個(gè)字體庫(kù)。下面是從 Adobe Edge Web Fonts 的官網(wǎng)找來(lái)的一張他們官網(wǎng)的截圖。

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

那么，在本節(jié)的下一個(gè)知識(shí)點(diǎn)中，老師將為大家講述如何在 Dreamweaver CC 2018 中使用 Adobe Edge Web Fonts。

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

在上面的知識(shí)點(diǎn)中大家了解了網(wǎng)頁(yè)中字體多樣化的意義以及主流的第三方字體庫(kù)。那么現(xiàn)在我們就來(lái)開(kāi)始學(xué)習(xí)一下如何在Dreamweaver CC 2018 中使用并掌握 Adobe Edge Web Fonts 豐富自己網(wǎng)頁(yè)中的字體。

首先我們創(chuàng)建一個(gè)空白的 HTML 網(wǎng)頁(yè)。由于之前的章節(jié)都做了圖片展示，從這一節(jié)開(kāi)始我們就不再為新建 HTML 網(wǎng)頁(yè)進(jìn)行圖片說(shuō)明了。

創(chuàng)建好一個(gè)空白文檔后，點(diǎn)擊菜單欄中的工具菜單，在彈出的下拉菜單中選擇管理字體。

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

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

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

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

如下圖所描述的那樣，我們?cè)趯傩悦姘宕藭r(shí)找到字體設(shè)置的相關(guān)屬性，比如 font ，就可以看到彈出了一個(gè)長(zhǎng)長(zhǎng)的列表（圖片中紅色框起來(lái)的部分）。最后，這個(gè)長(zhǎng)長(zhǎng)的列表最下面還有一個(gè)管理字體的入口。這就是方便你隨時(shí)往這個(gè)列表里加或者減少字體。

3. 小結(jié)

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

本節(jié)知識(shí)點(diǎn)整體難度基本沒(méi)有，本節(jié)知識(shí)點(diǎn)的難點(diǎn)是：操作和使用 Adobe Edge Web Font 插件進(jìn)行簡(jiǎn)單的使用。

本節(jié)知識(shí)點(diǎn)的重點(diǎn)是：了解 Adobe Edge Web Font 在 Dreamweaver CC 2018 中的具體使用操作方法。
本節(jié)知識(shí)點(diǎn)的難點(diǎn)是：能夠在掌握 Adobe Edge Web Fonts 后，合理選用相關(guān)的字體豐富自己的網(wǎng)頁(yè)。