iT邦幫忙

2022 iThome 鐵人賽

DAY 28
0

https://ithelp.ithome.com.tw/upload/images/20221013/201480822vuBEfxh6e.jpg

Google Font


Google Font

有關於字型 (font-family),有時候看到別人的網頁總會出現漂亮的字型,但我只知道微軟正黑體怎麼辦,這時候就要介紹到fcc任務中也有出現的外部引入字體 - Google Font。

關於字體更多:Font-family - 金魚都能懂的CSS必學屬性 by CSScoke

  1. 選定字體
    不知道要用啥字體欸,那就用首頁的( Noto Sans Traditional Chinese )試試看,當然想用別的也行。
    往下就會看到他不同粗細的樣式,這裡就選個 Medium 500 。

https://ithelp.ithome.com.tw/upload/images/20221013/20148082qoLwTg7RRR.jpg

https://ithelp.ithome.com.tw/upload/images/20221013/20148082YQuGtwci48.jpg


  1. 加入設定
    這時候按右上方的icon,就可以看到所選擇的字體,將底下的link複製貼在html的<head>之中,css複製到想套用的字句上,就可以看到自己的字體啦。

html:

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500&display=swap" rel="stylesheet">
</head>

css:

p {
    font-family: 'Noto Sans TC', sans-serif;
}

https://ithelp.ithome.com.tw/upload/images/20221013/20148082bY8U6JNYlK.jpg
https://ithelp.ithome.com.tw/upload/images/20221014/20148082IXfecJtOKu.jpg


當然這個例子是繁體中文,英文所擁有的字體更多更花俏,都試試看吧!
下篇:更多(FontAwesome)

引用與資源:
Google Font_getting_started


上一篇
Day27 - 作品集
下一篇
Day29 - 更多 (Font Awesome)
系列文
30天讓你爺爺取得 FreeCodeCamp 響應式網頁設計證書30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言