CSS

常用 Props（上）

🙆🏻 你一定會用到的CSS屬性 - 文字篇

來複習一下，前面我們提到CSS語法是由選擇器、屬性和屬性值所構成，在介紹各種 CSS 常用屬性之前，我們先來對屬性值做個簡單的介紹。

大部分常見的CSS屬性值為：整數與實數、長度單位、百分比、URL、顏色、文字名稱。

font-family

設定字型的類別，常見的做法會一次指定多種字型，瀏覽器會依順序去套用使用者電腦內擁有的字型，有的話就套用、沒有的話則往下一個找。

/* 依序設定 字型: 思源黑體, 微軟正黑體, 蘋方體, 黑體, sans-serif, serif */

*{
    font-family: "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif;
}

  • 當字型名稱中出現空格時，要在外側加上雙引號

  • 為了避免編碼問題或設定出錯，建議使用英文字型名稱

  • 檢查您的字體在不同瀏覽器和設備上的顯示方式

想要在網頁上有其他特別的字型，推薦使用免費的網路字型如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

<!-- 將 googlefonts 引入 codepan HTML的方式 -->

<!-- 方法1 -->
<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=Babylonica&display=swap" rel="stylesheet">

<!-- 方法2 -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Babylonica&display=swap');
</style>
/* CSS */
font-family: 'Babylonica', cursive;

@import也可以放入CSS，將前後的<style> </style>拿掉即可

完成以上步驟就可以在網頁上呈現自己想要的字體囉！

color

設定文字的顏色，常見有以下四種的方式。

16 進位碼（HEX)

color: #0099FF;

顏色名稱

color: red;
color: skyblue;

RGB碼 與 RGBA 碼

RGB碼是將光的三原色 紅(Red) 綠(Green) 藍(Blue)數字化

RGBA 是在 RGB 顏色值的格式最後再加上一個 alpha 值，alpha 值可以指定顏色的透明度，值的範圍為0.0（完全透明）至1.0（不透明），也可以使用百分比 0%至100%呈現。

/* RGB碼 */
color: rgb(255,0,0);
/* RGBA碼 */
color: rgba(255,0,0,0.3);

HSL 碼 與 HSLA 碼

HSL即 色相、飽和度、亮度（Hue, Saturation, Lightness）

/* HSL碼 */
color: hsl(219,42%,50%);
/* HSLA碼 */
color: hsla(219,42%,50%,0.6);

從CSS 2.1開始，提供有RGB的十進位顏色代碼。

從CSS 3開始，網頁顏色開始支持RGBA和HSLA顏色表示法，提供透明色的可能性。

font-size

設定文字的大小，常見的設定方式分為以下三大類，入門最推薦使用px來做網頁設計的單位，精確度高也不需換算容易入門。

  • 關鍵字：small、medium、large

  • 絕對單位：最常使用的px(像素pixel)

  • 相對單位：em、rem、％

font-size: medium;
font-size: 20px;
font-size: 1rem;

font-weight

設定文字的字重，為方便理解可以想成文字的粗細。

  • normal：預設字體厚度，不用寫出來。

  • bold：常用的粗體字。

  • bolder：比粗體更粗一點。

  • lighter：比預設一般字體更細。

  • 100-900：數字越大越粗。

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: 700;

letter-spacing

增加字與字之間的間距

/* 關鍵字 */
letter-spacing: normal;

/* 長度＋單位 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.5px;

text-align

文字的對齊

  • left：對齊左側

  • right：對齊右側

  • center：對齊中間

  • justify：左右對齊

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

line-height

設定文字的行高，推薦使用相對數值

例如：文字字級設定10px，行高設定300%或3em或3，這樣行高就會自己換算出30px，與px像素最大的不同在於只要字級改變行高就會跟著等比例改變。

line-height: 10px;
line-height: 300%;
line-height: 3em;
line-height: 3;

複習

小結

善用這些常用屬性可以讓網站內容變得更豐富有層次，請多多練習各種屬性與其呈現方式。

作業

作業一：使用上述所學的常用文字屬性在codepen上做出一篇部落格文章樣式，需有 文章標題、日期、文章內容。

進階作業：試著在codepen中引入google icon，可以參考google官方文件

參考來源

PreviousResetNext常用 Props（下）

Last updated