CSS 文本樣式[上]

1. 字型總彙
2. 字型設定
3. Web字型

通過文本樣式的設定，更改字型的大小、樣式以及文本的方位。

一、字型總彙

CSS文本樣式表如下：

屬性名	說明	CSS版本
font-size	設定字型的大小	1
font-variant	設定英文字型是否轉換為小型大寫	1
font-style	設定字型是否傾斜	1
font-weight	設定字型是否加粗	1
font-family	設定font字型	1
font	設定字型樣式複合寫法	1~2
@font-face	設定Web字型	3

二、字型設定

我們可以通過CSS文本樣式來修改字型的大小、樣式以及形态。

1、font-size

解釋：設定文本的大小。屬性值如下表：

值	說明
xx-small	設定大小。每個值從小到大的固定值
x-small
small
medium
large
x-large
xx-large
smaller	設定字型相對于父元素字型的大小
larger
數字+px	使用CSS像素長度設定字型大小
數字+%	使用相對于父元素字型的百分比大小

①、數字+px

p {
    font-size: px;
}
           

②、相對于父元素設定字型

body {
    font-size: px
}
p {
    font-size: smaller;
}
           

2、font-variant

解釋：設定字型是否以小型大寫字母顯示。

值	說明
normal	表示如果以小型大寫狀态，讓它恢複小寫狀态
small-caps	讓小寫字母以小型大寫字母顯示。

//先讓父元素設定小型大寫
body {
    font-variant: small-caps;
}
//讓子元素設定恢複小寫
p {
    font-size: px;
    font-variant: normal;
}
           

3、font-style

p {
    font-style: italic;
}
           

解釋：設定字型是否傾斜。

值	說明
normal	表示讓傾斜狀态恢複到正常狀态
italic	表示使用斜體
oblique	表示讓文字傾斜。差別在沒有斜體時使用。

4、font-weight

p { font-weight: bold; }

解釋：設定字型是否能加粗。

值	說明
normal	表示讓加粗的字型恢複正常。
bold	粗體
bolder	更粗的字型
lighter	更細的字型
100~999之間的數字	600及之後時加粗，之前不加粗

在目前計算機和浏覽器顯示中，隻有bold加粗，其他更粗更細，目前展現不出來。

5、font-family

p {
    font-family: 微軟雅黑;
}
           

解釋：使用指定字型名稱。這裡使用的字型時浏覽者系統的字型。有時為了相容很多浏覽者系統的字型，可以做幾個後備字型。

//備用字型
p {
    font-family: 楷體,微軟雅黑,宋體;
}
           

6、font

p {
    font: px 楷體;
}
p {
    font: italic bold small-caps px 楷體;
}
           

解釋：字型設定簡寫組合方式。格式如下：[是否傾斜|是否加粗|是否轉小型大寫] 字型大小 字型名稱

三、Web字型

//服務端提供字型
@font-face {
    font-family: abc;
    src: url('BruchScriptStd.otf');
}
p {
    font-size: px;
    font-family: abc;
}