常用 Props（上）
🙆🏻 你一定會用到的CSS屬性 - 文字篇
來複習一下，前面我們提到CSS語法是由選擇器、屬性和屬性值所構成，在介紹各種 CSS 常用屬性之前，我們先來對屬性值做個簡單的介紹。
大部分常見的CSS屬性值為：整數與實數、長度單位、百分比、URL、顏色、文字名稱。
font-family
設定字型的類別，常見的做法會一次指定多種字型，瀏覽器會依順序去套用使用者電腦內擁有的字型，有的話就套用、沒有的話則往下一個找。
當字型名稱中出現空格時，要在外側加上雙引號
為了避免編碼問題或設定出錯，建議使用英文字型名稱
檢查您的字體在不同瀏覽器和設備上的顯示方式
想要在網頁上有其他特別的字型，推薦使用免費的網路字型如Google Fonts
中文網頁設計很常會使用Google 的開源字型：思源黑體Noto Sans TC、思源宋體Noto Serif TC，TC 指的是 Traditional Chinese，這兩種字型是由Adobe與Google聯手開發的開源字型，根據 Open Font License 獲得許可的字型，可以在您的產品和項目中使用它們——印刷或數字、商業或其他方式。
一般在缺字的時候會出現方框，因此缺字稱為「豆腐」，而思源體的字型家族英文名稱為Noto，即無豆腐之意，指創作者希望該字型不缺字，是最完善的字型。
付費字型，可以參考justfont新世代中文字型設計暨推廣團隊，致力於培育台灣下一世代的字型設計力量，追尋更美好的文字風景，知名作品包含金萱系列字型家族。
Goole Fonts使用教學
步驟一：先至Google Fonts選取想要的字體
步驟二：點選預覽右側的「+ select XXX 000」將想要的樣式加入清單 (可以複選喔)
步驟三：打開最右上的選單會出現能放進HTML的<link>和@import，擇一複製貼上到codepan中， 接著複製下面的CSS font-family屬性和值貼到codepen
@import也可以放入CSS，將前後的<style> </style>拿掉即可
完成以上步驟就可以在網頁上呈現自己想要的字體囉！
color
設定文字的顏色，常見有以下四種的方式。
16 進位碼（HEX)
顏色名稱
RGB碼 與 RGBA 碼
RGB碼是將光的三原色 紅(Red) 綠(Green) 藍(Blue)數字化
RGBA 是在 RGB 顏色值的格式最後再加上一個 alpha 值，alpha 值可以指定顏色的透明度，值的範圍為0.0（完全透明）至1.0（不透明），也可以使用百分比 0%至100%呈現。
HSL 碼 與 HSLA 碼
HSL即 色相、飽和度、亮度（Hue, Saturation, Lightness）
從CSS 2.1開始，提供有RGB的十進位顏色代碼。
從CSS 3開始，網頁顏色開始支持RGBA和HSLA顏色表示法，提供透明色的可能性。
font-size
設定文字的大小，常見的設定方式分為以下三大類，入門最推薦使用px來做網頁設計的單位，精確度高也不需換算容易入門。
關鍵字：small、medium、large
絕對單位：最常使用的px(像素pixel)
相對單位：em、rem、％
font-weight
設定文字的字重，為方便理解可以想成文字的粗細。
normal：預設字體厚度，不用寫出來。
bold：常用的粗體字。
bolder：比粗體更粗一點。
lighter：比預設一般字體更細。
100-900：數字越大越粗。
letter-spacing
增加字與字之間的間距
text-align
文字的對齊
left：對齊左側
right：對齊右側
center：對齊中間
justify：左右對齊
line-height
設定文字的行高，推薦使用相對數值
例如：文字字級設定10px，行高設定300%或3em或3，這樣行高就會自己換算出30px，與px像素最大的不同在於只要字級改變行高就會跟著等比例改變。
複習
小結
善用這些常用屬性可以讓網站內容變得更豐富有層次，請多多練習各種屬性與其呈現方式。
作業
作業一：使用上述所學的常用文字屬性在codepen上做出一篇部落格文章樣式，需有 文章標題、日期、文章內容。
進階作業：試著在codepen中引入google icon，可以參考google官方文件
參考來源
Last updated
Was this helpful?