Google font api
27
Google Font API
Transcript of Google font api
![Page 1: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/1.jpg)
Google Font API
![Page 2: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/2.jpg)
Google Font API
• Google Web字體的 API• 可以幫助你添加任何網頁的網頁字體。
![Page 3: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/3.jpg)
Web字體 API的優點
1. 可以選擇高品質的開放源碼的字體。
2. 作品在大多數瀏覽器。
3. 使用極為方便。
![Page 4: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/4.jpg)
在<head>中
![Page 5: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/5.jpg)
在 css樣式中叫出該字型
![Page 6: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/6.jpg)
或是直接引用
![Page 8: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/8.jpg)
Google Font API需要三個步驟
1. 選擇你需要使用的字體2. 預覽你選擇的字體3. 使用你選擇的字體
![Page 9: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/9.jpg)
選擇你需要的字體
![Page 10: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/10.jpg)
選擇需要的字體
![Page 11: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/11.jpg)
預覽選擇的字體
預覽效果
![Page 12: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/12.jpg)
預覽頁面查看選中的文字效果
![Page 13: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/13.jpg)
使用字體
使用
![Page 14: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/14.jpg)
使用頁面中有四步驟
1. 選擇你想要的風格2. 選擇你想要的字符3. 獲取字體代碼4. 運用到你的樣式中
![Page 15: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/15.jpg)
使用頁面 -步驟一
第一步:使用字體
![Page 16: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/16.jpg)
步驟二
選擇你需要的格式
![Page 17: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/17.jpg)
步驟三
取得代碼
![Page 18: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/18.jpg)
步驟四
運用到你的樣式
![Page 19: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/19.jpg)
取得字體代碼
一共有三種方法:
1. 標準代碼2. @import代碼3. javascript代碼
![Page 20: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/20.jpg)
標準代碼
![Page 21: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/21.jpg)
@import代碼
![Page 22: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/22.jpg)
js代碼
![Page 23: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/23.jpg)
example
![Page 24: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/24.jpg)
結果
![Page 25: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/25.jpg)
如何添加陰影風格
![Page 26: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/26.jpg)
text-shadow
![Page 27: Google font api](https://reader035.fdocuments.us/reader035/viewer/2022081422/558ca47dd8b42a21548b466a/html5/thumbnails/27.jpg)
End