iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 17
1

我們知道了怎麼在CSS裡表示color屬性值、單位與數值,這篇,我們要來認識常用到的文字樣式。

font-size

字的大小,我們在前一篇有示範過,字體的大小可以用不同單位來設定。可前往Day16 CSS基本樣式-單位與數值看看。

font-weight

字體的粗細,它的屬性值可以用數值表示,也可以用粗細名稱表示。(表格來源為MDN:font-weight)

.thin {
    font-weight: 100;
}

.light {
	  font-weight: 300;
}

.normal {
	  font-weight: normal;
}

.bold {
    font-weight: 700;
}

並不是每種字體都能適應不同的font-weight值,有些字型甚至只有normal(regular)的粗度可以設定,要看每個字體的特性。

font-family

字型,在CSS裡聲明字型通常會設定多個字型(字型與字型間用,隔開),因為可能會遇到瀏覽器無法解析字型的狀況,所以聲明一個以上的字型是比較保險的,如果第一個字型瀏覽器無法解析,那還有接下來的字型可以選擇。如果都無法解析,那就會用系統預設字體來顯示。

  • 通常會有預設的字型可以選擇:Mac和Windows通用的英文字體(資料來源為oxxoStudio)。

    字型名稱若有空格,用引號包起來,在語法上才不會被當作是兩個獨立的名稱,而導致瀏覽器無法分辨字型名稱。

    h1 {
        font-family: Georgia, 'Courier New', Arial;
    }
    
  • 預設的字型選擇有限,可以從網路資源引入,或下載字型後,用本地端的檔案路徑來套用。

    • 雲端資源引入(以google font為例)

      選擇喜歡的字型,點+號按鈕

      複製引入html文檔的聲明列,貼在html檔的<head>元素內。

      • html:引入<head>元素內
      <head>
          <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap" rel="stylesheet">
      </head>
      
      • css:接著就可以聲明該字型了
      h1 {
          font-family: 'Noto Sans TC';
      }
      

      或是用@import的宣告列引入css檔也可以,貼在css檔的最頂部。

      • css:寫在css檔的頂部,接著就可以聲明該字型了。
      @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
      
      h1 {
          font-family: 'Noto Sans TC';
      }
      
    • 下載字型,用@font-face宣告列引入。也是寫在css檔最頂部。語法如下:

      @font-face {
          font-family: TaipeiSansTC;
          src: url(./TaipeiSansTC.ttf);
      }
      
      h1 {
          font-family: TaipeiSansTCBeta-Bold;
      }
      

text-decoration

字的襯線樣式,它有下列屬性值:

  • text-decoration-line 定義襯線的位置

    • underline

    • overline

    • line-through

  • text-decoration-style 定義襯線的造型

    • solid

    • dotted

  • text-decoration-color 定義襯線的顏色。

    h1 {
      text-decoration: underline;
      text-decoration-color: #ff00ff;
    }
    

  • 上列的屬性值可以在同一行內聲明,中間用空格區別:

    h1 {
        text-decoration: underline dotted #ff0000;
    }
    

text-align

文字的水平對齊。

  • left
  • center
  • right
p {
    width: 300px;
    background-color: #ddd;
}
    
.left {
    text-align: left;
}
    
.center {
    text-align: center;
}
    
.right {
    text-align: right;
}

letter-spacing

字元間距,元素內的字元間距預設值為normal,它的單位可以用px、em、rem等字元常用的單位來表示。

.crowded {
    letter-spacing: -0.3em;
}

.comfort {
  letter-spacing: normal;
}

.loose {
  letter-spacing: 1vw;
}

最後一行是設定相對單位,變換視口的寬度,它的字元間距會跟著伸縮,可以去拉拉看。Try it on codepen.

line-height

行高。可以用單位來表示,也可以只輸入數值而沒有單位,純數值就會以該行文字自己的高度倍數為行高。

.crowded {
  line-height: 1em;
}

.comfort {
  line-height: normal;
}

.loose {
  line-height: 2;
}

.variable {
  line-height: 10vh;
}

最後一段的行高是設定相對單位,它可以隨著視口高度伸縮行高,可以去拉拉看。Try it on codepen.

文字樣式的屬性非常多,此篇僅介紹幾個常用到的文字樣式屬性。還有像是文字的陰影、文字的縮排、文字的動畫等,若要認識更多可以看MDN。那麼明天見囉~/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day16 CSS基本樣式-單位與數值
下一篇
Day18 CSS基本樣式-Background(上)
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言