套用Adobe云端字型.PDF

運用雲端字型編排以文章為主的網頁 05 套用 Adobe 雲端字型 了解雲端字型的功能後, 就來套用看看吧！請開啟範例檔案 ex05-01.html, 範例中已設計好表頭 (header 區塊), 但標題文字尚未設定字型, 下面就一起 透過 Adobe 的 Typekit 功能, 將它套用成具獨特風格的手寫字體。 step01 請選取 header 區塊中的 FLAG PUBLISHING 這段標題文字, 如圖在屬 性面板拉下字體列示窗來設定： 1 選取這段文字 2 切換到 CSS 頁次 4 點選此項目 3 按下此處開啟字體列示窗 5-15 PART 02 主題學習館 目前在此頁次 step02 接著會開啟如圖的管理字體 面板, 分成 3 個頁次, 在 Adobe Edge Web Fonts 這個 頁次就可以選擇多種 Adobe 2 點選想套用的字型 (點選後, 右上 角會出現藍色勾選記號)，此字型 提供的雲端字型。 名稱為 Fredericka the Great 1 請先在左列點選想要 的字體風格, 本例選此 類 (裝飾字體清單) 3 按此鈕完成 step03 選好字型後回到編輯畫面, 再重新套用新增的字型即可。 1 選取這段文字 2 按此開啟列示窗 3 會顯示新增的字體, 點選即可套用 5-16 運用雲端字型編排以文章為主的網頁 05 step04 套用後回到畫面, 標題文字看起來卻沒有改變, 這是因為雲端字型必須在即時 檢視模式中或實際上傳到網路後才能看到效果。請如圖轉換到即時檢視模式 (完成檔可參考 ch05-01.html)。 會出現此訊息, 提醒你網頁字體只有在實際上傳後才 1 請按此切換到即時檢視模式 可以看到效果, 若有需要, 可再調整字體的粗細等屬性 已套用雲端字型 這裡顯示網頁中已載入雲端 字型檔所需的程式碼 2 標題套用了手寫風格字體 你可能會發現這些雲端字型中並沒有中文字型, 對此 Adobe 已公開表示會陸續推 TIP 出, 在此之前, 我們可以先選擇其他雲端字型提供者的免費中文字型。在 5-3 節就 會為你示範使用 Google Fonts 雲端字型來製作中文標題字。 5-17