#谷歌字體庫內容豐富,涵蓋上千種多語言支持的字體,學習導入谷歌字體庫來增加網站的閱讀性,是必不可少的一項技能#
1,前往谷歌字體網站
要會魔法,裸連很卡
2, 尋找心儀字體
Googles Fonts下面的filters可以篩選文字,字體庫同族字體會支持不同的語言,如果不確定是否支持自己想要的多語言,可以在篩選欄中打入多國語言,對照右側字體是否正常顯示即可。無法顯示的字體會呈現問號。這里拿Noto Sans教學
3,進去后 點擊右上角的Get font按鈕
4,點擊會進入自己的字體庫
這里會存在所有你點擊來過的字體,后續的引用也會全部引入,如果不想引入,需在此刪除。點擊右側的使用方法 Get embed code獲取代碼
5, 選擇<link>引入
- 復制’Embed code in the <head> of your html‘的代碼 直接塞到index.html中就行了
- 第二個’Noto Sans SC: CSS class for a variable style‘是自定義字體的相關css案例,基本用不到
- 如果想方便可以在左側選擇One Value,只會導入一種粗細的字體
6,然后在你的主css中定義全局字體族即可
// main.css
*{font-family: "Noto Sans SC", sans-serif;
}