iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
6
Modern Web

金魚都能懂的CSS必學屬性系列 第 14

Font- 金魚都能懂的CSS必學屬性

Font 的規則

font 是一個文字相關屬性的縮寫屬性,也是目前金魚都能懂的CSS必學屬性中第一個遇到的CSS縮寫屬性,font 可同時設定了包括文字樣式、小型大寫字、文字粗體、尺寸、行高、字型...等多個屬性,用一行就能直接寫完了,可以說是超級方便且快速啊,其撰寫方式像是這樣

font: small-caps italic bold 66px/70px arial;

font可設定的值當中有一個我們尚未介紹過的屬性,那就是文字變體font-variant,由於不是重點,且不是必學屬性,那就讓我們直接略過,不用跟各位介紹它的作用是將英文字變成小寫字的高度,卻是大寫字的外觀這樣。

font 可同時設定的值詳細的說,包括了

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

上面屬性中需要特別注意的是 font-size 與 line-height,這兩個屬性在撰寫時需要使用一條斜線隔開,且這兩個屬性不能分開設定,要設定就一定要同時設定,在font屬性中可以說是「一組」設定。

font設定的重點

從前面的描述可以知道 font 屬性可以同時設定多個文字相關的屬性,但實際上多數人在撰寫CSS的時候,不會有設定很詳細的狀況,大都是需要甚麼屬性就寫甚麼,使用font來縮寫的反倒少見(至少Amos不常看到),不過其實font也可以不需要全部設定,只要注意哪些是必要的值就好了。

font設定時不可缺少的是font-size與font-family,而font-size必須放在font-family的左側,例如這樣設定CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700&display=swap');

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

效果畫面

https://ithelp.ithome.com.tw/upload/images/20200929/20112550fNNgrKIMvx.png

此例子中Amos先載入了Noto字型來套用,所以畫面會呈現Noto字型。

接著其他的屬性就是可選了,要不要順手設定就看各位自己決定了,對於設定預設值來說可說是非常方便,又或者是共用屬性的設定,這樣的方式真的很方便呢。如果我需要一次設定全部常用屬性的話,大概就會是像這樣

HTML

<p>
  font 是一個文字相關屬性的縮寫屬性,也是目前金魚都能懂的CSS必學屬性中第一個遇到的CSS縮寫屬性,font 可同時設定了包括文字樣式、小型大寫字、文字粗體、尺寸、行高、字型...等多個屬性,用一行就能直接寫完了,可以說是超級方便且快速啊
</p>

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700&display=swap');

p{
  font: italic bold 20px/1.6  'Noto Sans TC', sans-serif;
}

效果畫面

https://ithelp.ithome.com.tw/upload/images/20200929/20112550cn0SNOqMTj.png

是不是超快速又簡潔啊~


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Word-spacing - 金魚都能懂的CSS必學屬性
下一篇
Background-color - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言