移至主內容

CSS的數值單位與字型

CSS的數值單位與字型

Written by Wanding on 25 August 2020

前言

這篇文要介紹的是一切能在css裡完成事情的基礎:影響許多屬性顏色、距離與尺寸的單位,以及用來定義數值的單位。 缺少單位就無法宣告圖片周圍必須留下10像素的空白空間,或是標題文字必須有特定的大小。 而字型與文字屬性又是樣式表中最常使用的功能,不可諱言,文字的樣式與設定是使用者閱讀網頁時的感受依據,可以說是網頁的靈魂!

1. 數值與單位

數字與百分比

  • 整數(integer value):15、36、128、10000
  • 數字(number value):2.7183、3.1416、-5.749
  • 百分比(percentage value):50%、33%、25%
  • Fraction數值(fraction value or flex value):由數字加上fr標記組成,一個等分單位記為1fr

距離

許多CSS的屬性都需要透過長度才能夠是當的表示頁面上的各種元素,所以CSS裡有許多表示長度的單位。 接下來,就讓我們來認識CSS的長度單位。

絕對長度單位

  1. 英吋(in):美國常用,一英吋等於2.54公分
  2. 公分(cm):世界通用的公分單位
  3. 公釐(mm):一公分等於10公釐
  4. 四分之一公釐(q):一公釐等於4q
  5. 點(pt):點是印表機與活字排版的標準字型測量標準,72點等於一英吋,12點大約六分之一英吋
  6. Pica(pc):印刷領域使用,一個pica等於12點
  7. 像素(px):像素是螢幕上的小格點,但CSS的定義比較抽象,96像素等於一英吋;不過一般都直接採用螢幕上的像素大小

相對長度單位

<style type=text/css>                            
h1 {font-size:24px;}
p {font-size:12px;}
h1,p {margin-left:1em}
</style>
  1. em:定義為指定型的font-size,如果元素的font-size設為14像素,那麼1em就等於14px,em會隨著元素的不同而改變。 下方的設定將會讓h1標籤內容左邊界空出24px,p標籤內容左邊界空出12px,所以em在h1和p的大小是不同的。
  2. rem:依據本身套用的元素的字型為基準,rem是以固定根元素為基準,如果宣告根元素font-size:14px, 那麼1rem就等於14px,而且是固定不會變動。
  3. ch:CSS3加入了ch這個單位,廣義來說就是『一個字元』,相當於用來呈現的字體裡『0』這個字形的步進度量 (advance measure)
  4. viewport:視埠就是瀏覽器視窗、可列印區域、行動裝置顯示範圍的大小為依據
    • 視埠寬度單位(vw,viewport width unit):如果視埠寬是1024px,那麼1vw就是1024px除於100,就等於10.24px
    • 視埠高度單位(vh,viewport height unit):如果視埠高是768px,那麼1vh就是768px除於100,就等於7.68px
    • 視埠最小單位(vmin,viewport minimum unit):vw和vh取較小值,所以1vmin等於7.68px
    • 視埠最大單位(vmax,viewport maximum unit):vw和vh取較大值,所以1vmax等於10.24px

2. 顏色

網頁的顏色該如何設定呢?在HTML裡有兩種作法,可以使用red或green等預先定義好的顏色名稱,或是使用十六進位編碼表示。而在CSS裡,除了這兩種之外,還支援更多的方法。

有名稱的顏色

  
顏色名稱
aqua gray navy silver
black green olive teal
blue lime purple white
fuchsia maroon red yellow

 

RGB和RGBa顏色

RGB分別代表紅色、綠色、藍色三個基本色。標示法為RGB(R數值,G數值,B數值),例如 rgb(255,255,255)或是rgb(0,0,0,)。

RGBa代表在RGB三色之後加入alpha透明度數值,如rgba(255,255,255,0.5),0.5代表透明度50%。

十六進位RGB色彩

將三個範圍在00到FF之間的十六進位字串連結在一起,就能夠設定顏色,一般的語法表示為#RRGGBB,如#ffffff、#f9a4ca、#62b2c6。

十六進位RGBa色彩

加入了alpha通道值的第四個十六位元值,如#f9a4ca33、#f9a4ca66、#f9a4ca99。

角度

  • deg(角度degree):一個圓有360度
  • grad(梯度gradians):將一個圓切成400等份,為一個梯度,也稱為grade或gon!
  • rad(弧度radian):一個圓等於2*3.1416
  • turn(轉turn):轉一個圓就是一轉,所以動畫10圈,就是10turn(turn不能加s)

3. 字型

一般提到字型,人們總會想到粗體字、斜體字等樣貌。比如我們熟悉的Times包含了TimesRegular、TimesBold、TimesItalic、TimesBoldItalic等變體的組合, 各種不同的Times字型變體是fontface,而我們一般所謂的Times則是這些各種字貌的組合。

為了涵蓋所有的範圍,CSS定義了五種通用字型:

  1. Serif:是指每個筆畫開頭或結束的裝飾。如大寫A底下的橫線。
  2. Sans-serif:無襯線的比例自型,如Helvetic、Geneva、Verdana、Arial。
  3. Monospace:等寬字型不是比例字型,通常用來顯示程式碼或是表格資料,每個字元都佔據相同的水平寬度,可能有襯線、也可能無襯線,但都為等寬字型。如Courier、Courier New、Consolas、Andale Mono。
  4. Cursive:草書字型模仿手寫字,通常包含大量的曲線或比襯線字型更多的筆劃裝飾。如Zapf Chancery、Author與Comic Sans。
  5. Fantasy:花俏字型並沒有任何獨特的特性,不屬於前四類的字型都歸類為花俏字型。如Western、Wooblock與Klingon。

使用通用字型

使用font-family屬性使用任何可用的字型。如下所示:

<style type=text/css>
body {font-family: serif;}
h1,h2,h3,h4 {font-family: sans-serif;}
code,pre,tt,kbd {font-family: monospace;}
p.signature {font-family: cursive;}
</style>

指定字型

網頁作者可以更明確的指定文件或元素顯示時所使用的字型。比如想讓所有h1元素都使用Georgia字型,可以宣告以下規則:

h1 {font-family:Georgia;}

使用引號

h2 {font-family:Times,'Times New Roman',serif;}

字體粗細(font-weight)

font-weight的數值有:
  • normal | bold | bolder | lighter
  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

通常Regular為400、Lighter為400以下、Medium為500、Bold為600和700、Extra Bold為800和900。

<style type=text/css>
p {font-weight:normal;}
p span {font-weight:400;}
strong {font-weight:bolder;}
strong b {font-weight:bolder;}
</style>

字型大小尺寸

一般常用的尺寸對照表

大小名稱 xx-small x-small small
數值 10px 12px 14px
medium large x-large xx-large
16px 19px 24px 32px

字型尺寸與繼承

下列語法中,strong元素繼承的是12px,這個數值再經由宣告的135%作用之後達到16.2px。

<style type=text/css>
p {font-size: 12px;}
em {font-size: 120%}
strong {font-size:135%}
</style>

使用長度單位

font-size可以使用所有的長度數值,以下所有的font-size宣告有相同的效果:

<style type=text/css>
p.one {font-size:36pt}
p.two {font-size:3pc;}
p.three {font-size:0.5in;}
p.four {font-size:1.27cm;}
P.five {font-size:12.7mm;}
</style>

小結

CSS的數值、單位、與字型的熟悉與運用,是網頁設計師或前端工程師所必須具備的技巧。 CSS的快速成長,允許對網頁顏色或字型做更精密的控制,控制的範圍也更加廣泛。 透過不斷的調校與嘗試,才能做出更美觀更好的網頁!

回目錄頁