3、CSS 字型

不善表演發表於2020-11-13
CSS

CSS 字型屬性定義文字的字型系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。

所有CSS字型屬性:

font在一個宣告中設定所有的字型屬性
font-family指定文字的字型系列
font-size指定文字的字型大小
font-style指定文字的字型樣式
font-variant以小型大寫字型或者正常字型顯示文字。
font-weight指定字型的粗細。

1、CSS 字型系列

在 CSS 中，有兩種不同型別的字型系列名稱：

  • 通用字型系列 - 擁有相似外觀的字型系統組合（比如 “Serif” 或 “Monospace”）
  • 特定字型系列 - 具體的字型系列（比如 “Times” 或 “Courier”）

除了各種特定的字型系列外，CSS 定義了 5 種通用字型系列：

  • Serif 字型
  • Sans-serif 字型
  • Monospace 字型
  • Cursive 字型
  • Fantasy 字型

2、指定字型系列 font-family

使用 font-family 屬性 定義文字的字型系列。

  • 使用通用字型系列

如果你希望文件使用一種 sans-serif 字型，但是你並不關心是哪一種字型，以下就是一個合適的宣告：

body {font-family: sans-serif;}
  • 指定字型系列

除了使用通用的字型系列，您還可以通過 font-family 屬性設定更具體的字型。

下面的例子為所有 h1 元素設定了 Georgia 字型：

h1 {font-family: Georgia;}

<html>
<head>
<style type="text/css">
h1 {font-family:Georgia;}
</style>
</head>

<body>
<h1>This is heading 1</h1>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>...</p>
</body>
</html>

在這裡插入圖片描述
這樣的規則同時會產生另外一個問題，如果使用者代理上沒有安裝 Georgia 字型，就只能使用使用者代理的預設字型來顯示 h1 元素。

我們可以通過結合特定字型名和通用字型系列來解決這個問題：

h1 {font-family: Georgia, serif;}
  • 使用引號

只有當字型名中有一個或多個空格（比如 New York），或者如果字型名包括 # 或 $ 之類的符號，才需要在 font-family 宣告中加引號。

單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

3、字型風格font-style

font-style 屬性最常用於規定斜體文字。

該屬性有三個值：

  • normal - 文字正常顯示
  • italic - 文字斜體顯示
  • oblique - 文字傾斜顯示

例項

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

在這裡插入圖片描述

italic 和 oblique 的區別
font-style 非常簡單：用於在 normal 文字、italic 文字和 oblique 文字之間選擇。唯一有點複雜的是明確 italic 文字和 oblique 文字之間的差別。

斜體（italic）是一種簡單的字型風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文字則是正常豎直文字的一個傾斜版本。

通常情況下，italic 和 oblique 文字在 web 瀏覽器中看上去完全一樣。

4、字型變形font-variant

font-variant 屬性可以設定小型大寫字母。

小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母採用不同大小的大寫字母。

例項

p {font-variant:small-caps;}

<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>

<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>

</html>

在這裡插入圖片描述

5、字型加粗font-weight

font-weight 屬性設定文字的粗細。

使用 bold 關鍵字可以將文字設定為粗體。

關鍵字 100 ~ 900 為字型指定了 9 級加粗度。如果一個字型內建了這些加粗級別，那麼這些數字就直接對映到預定義的級別，
100 對應最細的字型變形，
900 對應最粗的字型變形。
數字 400 等價於 normal，
而 700 等價於 bold。

如果將元素的加粗設定為 bolder，瀏覽器會設定比所繼承值更粗的一個字型加粗。

與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。

例項

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>

<body>
<p class="normal">This is a paragraph</p>

<p class="thick">This is a paragraph</p>

<p class="thicker">This is a paragraph</p>
</body>

</html>

在這裡插入圖片描述

6、字型大小font-size

font-size 屬性設定文字的大小。

請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來標記標題，使用 <p> 來標記段落。

font-size 值可以是絕對或相對值。

絕對值：

  1. 將文字設定為指定的大小
  2. 不允許使用者在所有瀏覽器中改變文字大小（不利於可用性）
  3. 絕對大小在確定了輸出的物理尺寸時很有用

相對大小：

  1. 相對於周圍的元素來設定大小
  2. 允許使用者在瀏覽器改變文字大小

注意：如果您沒有規定字型大小，普通文字（比如段落）的預設大小是 16 畫素 (16px=1em)。

  • 使用畫素來設定字型大小

通過畫素設定文字大小，可以對文字大小進行完全控制：

例項

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
  • 使用 em 來設定字型大小

如果要避免在 Internet Explorer 中無法調整文字的問題，許多開發者使用 em 單位代替 pixels。

推薦使用 em 尺寸單位。

1em 等於當前的字型尺寸。如果一個元素的 font-size 為 16 畫素，那麼對於該元素，1em 就等於 16 畫素。在設定字型大小時，em 的值會相對於父元素的字型大小改變。

瀏覽器中預設的文字大小是 16 畫素。因此 1em 的預設尺寸是 16 畫素。

可以使用下面這個公式將畫素轉換為 em：pixels/16=em

（注：16 等於父元素的預設字型大小，假設父元素的 font-size 為 20px，那麼公式需改為：pixels/20=em）

例項

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
  • 結合使用百分比和 EM

在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設定預設的 font-size 值：

例項

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

<html>
<head>
<style type="text/css">
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

在這裡插入圖片描述

相關文章