iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

從零開始前端學習筆記(HTML、CSS、JavaScript)系列 第 7

Day 07 CSS <字體屬性>

CSS Fonts(字體) 屬性
用於定義字體系列、大小、粗細 和文字樣式(ex:斜體)

1.字體系列
font-family 屬性定義文本的字體系列

<style>
    body{
        font-family: Georgia, 'Times New Roman', Times, serif;
        }
</style>

備註 :

  • 各種字體之間必須使用逗號隔開
  • 一般情況下 如果有空格隔開多個單詞組成的字體,加上"單引號"
  • 盡量使用系統自帶默認字體
  • 最常見的幾個字體: body{font-family:'Microsoft YaHei' ,tahoma , arial;}
  • 一般直接修改body標籤,若有多字體將會照順序去選取

2.字體大小
font-size屬性定義字體大小

p{
font-size: 20px;
}

備註 :

  • px(像素)大小是我們網頁的最常用單位
  • google chrome 默認文字大小為16px
  • 不同瀏覽器默認大小不一,盡量給明確大小
  • 可以給body指定整個頁面大小
  • 標題標籤較特殊 需要單獨指定文字大小

3.字體粗細
font-weight屬性定義字體粗細

p{
font-weight: bold;
}

備註 :

  • 可讓粗標籤(比如h&stong等)不加粗,或者其他標籤加粗
  • 實際開發時,更常用數字表示粗細
  • normal為默認值 bold粗體為700,用數字表示400=normal 700等同於bold

4.文字樣式
font-style 屬性設置文字風格

p{
font-style: normal;
}

備註 :

  • normal為默認值
  • ltalic為斜體
  • 平時反而很少給文字加斜體,反而較常把斜體標籤(em , i)改為不傾斜

5.font複合屬性

body{
/* font: font-style font-weight font-size- font-family */
font: italic 700 16px Impact;
}
  • 使用font屬性時,必須按照語法格式的順序書寫,不能更換順序,並且每個屬性間用空格隔開
  • 不需要設置的屬性可以省略(將取默認值),但必須保留font-size和font-family屬性,否則font屬性將不起作用

字體屬性範例


上一篇
Day 06 CSS <複合選擇器>
下一篇
Day 08 CSS <文本屬性>
系列文
從零開始前端學習筆記(HTML、CSS、JavaScript)10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言