選擇字型- Google Web Designer說明
文章推薦指數: 80 %
文字工具提供了字型選擇器,可讓您在常用字型清單中選取需要的字型。
此外,您也可以新增Google Fonts 所提供的網路字型。
選取工具列中的「文字工具」圖示 ,或 ...
跳至主內容選擇字型文字工具提供了字型選擇器,可讓您在常用字型清單中選取需要的字型。
此外,您也可以新增GoogleFonts所提供的網路字型。
選取工具列中的「文字工具」圖示,或開啟「文字」面板。
按一下工具選項列或「文字」面板中的字型名稱,字型選單隨即開啟。
選擇字型。
您可以先選擇字型再新增文字,或是選取現有文字後,再變更為所需字型。
新增GoogleFonts提供的字型
除了GoogleWebDesigner內建的常用字型外,您還可以免費使用GoogleFonts提供的數百種開放原始碼字型。
如何新增GoogleFonts目錄中的字型:
選取工具列中的「文字工具」圖示,或開啟「文字」面板。
按一下工具選項列或「文字」面板中的字型名稱,字型選單隨即開啟。
按一下字型選單底部的[更多字型…],即可載入GoogleFonts目錄。
如要載入更多字型,請捲動至清單底部。
在搜尋欄位中輸入字型名稱,然後按下Enter鍵;或使用篩選器縮小選項範圍。
選取所需字型。
選取的字型將出現在右側的「已新增的字型」清單中。
完成後按一下[確定],您新增的字型隨即會列在這份文件的字型選單中。
使用其他字型
GoogleAds和GoogleAdMob僅支援Google網路字型。
目前,您只能將GoogleFonts字型新增到字型下拉式清單中;不過,如果您有字型檔案,也可以使用自訂字型。
在電腦檔案系統中找到專案所在的資料夾,將字型檔案加入專案的assets子資料夾。
如果您使用的是Studio,可以改成將自訂字型上傳至Studio素材資源庫。
為了提升瀏覽器相容性,請加入多種字型格式。
前往程式碼檢視畫面,在結束標記的前面加入下列CSS程式碼,註明您的字型詳細資料:
@font-face{
font-family:"MyFontName";
src:url("assets/myfontname.ttf")format("truetype");
}
設定文字格式時,如要使用特定字型,請在[字型名稱]欄位中輸入字型名稱(即font-family一行中的名稱)在。
在CSS樣式規則中使用自訂字型時,至少要列出一個確認可以在網路上使用的備用字型。
以日文文件來說,您可以使用下列清單:
font-family:"ヒラギノ角ゴProW3","HiraginoKakuGothicPro","メイリオ","MSPGothic",Verdana,Helvetica,sans-serif;
這對您有幫助嗎?我們應如何改進呢?是否送出true文字工具新增文字及設定文字格式選擇字型讓容器內的文字合框搜尋清除搜尋內容關閉搜尋Google應用程式主選單搜尋說明中心true5050422false
延伸文章資訊
- 1選擇字型- Google Web Designer說明
文字工具提供了字型選擇器,可讓您在常用字型清單中選取需要的字型。此外,您也可以新增Google Fonts 所提供的網路字型。 選取工具列中的「文字工具」圖示 ,或 ...
- 2【心得】Google Fonts使用 - iT 邦幫忙- iThome
【心得】Google Fonts使用. 前進切版之路! CSS微體驗系列第5 篇. 豹告. 9 個月前‧ 754 瀏覽. 0. 練習刻板面時常常會遇到形形色色的字體但若不是電腦本身有下載該字體 ...
- 3FONT Google Fonts 網路中文/英文字型應用
開啟Google Fonts: Early Access 頁面,找到Noto Sans TC(Chinese Traditional),就能看到網站提供的程式碼,使用方法很簡單,只要把Googl...
- 4google webfonts helper
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!
- 5Google Font API - 替你的網站加入豐富字體
而Google Font API的出現便是替廣大網頁設計師、開發者們解決這個問題! ... 網路趨勢發展,Google I/O,font (google-font-api-add-various...