CSS 教學 – 基本文字設定 : font-size 與 line-height

各位同學好~

年假跟元宵節都過完了,大家應該都有好好的休息跟玩樂吧~現在,歡迎大家跟著久違的飛肯的教學分享文,一起收收心、練練功~

(其實是小編自己很需要重新鍛鍊啊… XD)

今天要來跟大家分享 CSS 語法中,文字部分很基本卻也很重要的「字型大小(font-size)」以及「行高(line-height)」的寫法:

CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p7_1

 

有學過的同學可以跟我們一起重新溫習一下,如果沒有學過 CSS 語法的新同學也不用害怕,跟著底下的步驟做就對了喔!


【步驟一】新建一個HTML頁面

請大家先開一個 HTML 的新頁面,

在<body>中依序打上 <h1>、<h2>、跟<p>標籤,

文字內容可以自己設計也可以依照底下圖示喔。

CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p1


(完成之後的網頁如下 )
CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p2

*小提醒:一般來說,一個網頁只需要設一個<h1>就好,並且放入較重要的關鍵字,<h2>則是可以設兩~三個都沒關係。


【步驟二】新建一個新的CSS樣式表

開啟一個 CSS樣式表的新檔案,

先命名為「flycan.css」,(如第一張圖示)

並附加到我們剛剛打好的 HTML 頁面上。

(如第二張圖示,如果有多出這一行連結,就表示附加樣式表成功了喔!)

CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p3

CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p4


【步驟三】font-size 的寫法

在剛剛新建的 CSS 樣式表中,我們開始來練習3種不同卻又較為常用的 font-size 寫法吧~

首先在 <body> 設定文字大小為 20px,<h1>是用百分比來做設定,而<h2>則是用「em」這個單位。

假如沒有特別定義文字大小的話,所有網頁的文字大小都會依照 W3C 所制定的原始規範;

但是因為我們已經先定義整個<body>都要套用 20px 的 font-size,所以<h1>的「350%」跟<h2>的「em」就會繼承<body>中的設定值為基準囉。

CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p5


(寫好之後,文字的大小呈現就會如下方一樣)

CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p6

*小提醒:

  1. 原始的1「em」 = 16px;
  2. 「font-family」是用來設定文字使用的字體,優先順序為先英文,再中文,然後最後一項可以設為”非襯體字(sans-serif)”,假如電腦沒有找到前面兩項指定的字體時,就會自動搜尋其他”非襯體字”來使用。

【步驟四】line-height 的寫法

當沒有特別指定時,line-height (行高)在瀏覽器的原始預設值為 1.0 ~ 1.2 倍,但如果想要讓瀏覽者在閱讀文字上面感到更舒適的話,會建議大家至少要設定為 1.5 倍以上,通常比較多人會設定在 1.5 ~ 1.8 倍之間。

舉例來說,飛肯的官網網頁,文字設定的行高就大多是使用 1.6 倍,既方便同學輕鬆閱讀,又能清楚獲取最新的開課資訊。接下來的範例,我們就用 1.6 倍行高來做語法練習吧。

當行高的值只單用一個數字,後面沒有加任何單位時,就表示”倍數”的意思,而這個倍數則是依據文字的 font-size 而來;因此,如下方圖示說明,當行高設為 1.6 倍 * 20px = 32 px ,覺得還要換算太麻煩或者怕算錯,會建議大家只用倍數來表示就可以了。

CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p7_1

 

*小提醒:

  1.  line-height 可以用帶單位的數值、倍數,或是百分比表示;假如想要用「em」或「百分比」來表示行高時,請記得要注意子、父層之間的「繼承」關係。
  2. (同場加映) 文字置中的寫法為「text-align:center」,這個語法也很常用,請大家一定要學會喔。

(範例完成後,如下圖)

CSS 教學 - 網頁排版  - CSS 教學 - 基本文字設定 : font-size 與 line-height - p8_2

以上就是這次跟大家分享的 CSS 教學,很入門的文字設定但也是重要的基本功,希望大家都能學習愉快喔! ^_^

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

posted in CSS 教學 - 網頁排版 and tagged , , , , .

留言功能已關閉。