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;
}

效果畫面

此例子中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;
}

效果畫面

是不是超快速又簡潔啊~

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

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

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

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

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