css字型的分類及樣式
阿新 • • 發佈：2018-12-28
一、分類
在網頁中將字型分成五大類：
serif（襯線字型）
sans-serif（非襯線字型）
monospace （等寬字型）
cursive （草書字型）
fantasy （虛幻字型）
可以將字型設定為這些大的分類，瀏覽器會自動選擇指定的字型，並應用樣式
一般會將字型的大分類，指定為font-family中的最後一個字型
<!DOCTYPE html> 二、樣式
1: font-style可以用來設定文字的斜體
- 可選值：
normal 預設值，文字正常顯示
italic 文字會以斜體顯示
oblique 文字會以傾斜的效果顯示 - 大部分瀏覽器都不會對傾斜和斜體做區分，也就是說我們設定italic和oblique效果是一樣的
- 一般我們只會使用italic
2: font-weight可以用來設定文字的加粗效果
- 可選值：
normal 預設值，文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個值
但是由於使用者的計算機往往沒有這麼多級別的字型，所以200有可能比100粗，但也有可能是一樣的
3: font-variant可以用來設定小型大寫字母
- 可選值：
normal 預設值，文字正常顯示
small-caps 文字以小型大寫字母顯示
小型大寫字母：
將所有的字母都以大寫形式顯示，但是小寫字母的小型大寫，要比大寫字母小一些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字型的其它樣式</title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: 微軟雅黑;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.p2{
/*設定一個文字大小*/
font-size: 50px;
/*設定一個字型*/
font-family: 華文彩雲;
/*設定文字斜體*/
font-style: italic;
/*設定文字加粗*/
font-weight: bold;
/*設定一個小型大寫字母*/
font-variant: small-caps;
}
.p3{
/*
在CSS中還為我們提供了一個樣式叫font，使用該樣式可以同時設定字型相關的所有樣式
可以將字型的樣式值統一寫在font樣式中，不同的值之間使用空格隔開
使用font設定字型樣式時，斜體 加粗 小大字母，沒有順序要求，甚至可寫可不寫，如果不寫則使用預設值
但是要求文字的大小和字型必須寫，而且字型必須是最後一個樣式，大小必須是倒數第二個樣式
實際上使用簡寫屬性也會有一個比較好的效能
*/
font: bold italic small-caps 60px "微軟雅黑";
}
</style>
</head>
<body>
<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>