文章目錄
字體樣式屬性大全
字體樣式(font style)
font屬性
是一個簡寫屬性,把針對字體的屬性設置在一個屬性中,包括了:
- font-style
- font-variant
- font-weight
- font-size / line-height
- font-family
這5個屬性必須按照順序排列,可以不設置其中的某些值,但至少要指定字體大小(font-size)和字體系列(font-family)
.text1{
font: italic arial, sans=serif
}
.text2{
font: italic bold 12px/30px arial,sans-serif
}
font-style
用於定義字體的風格
值 | 描述 |
---|---|
normal | 默認值,瀏覽器顯示一個標準的字體樣式 |
italic | 瀏覽器會顯示一個斜體的字體樣式 |
oblique | 瀏覽器會顯示一個傾斜的 字體樣式 |
inherit | 規定應該從父元素繼承字體樣式 |
.text1{font-style:normal}
.text2{font-style:italic}
.text3{font-style:oblique}
font-variant
font-variant 屬性設置小型大寫字母的字體顯示文本,這意味着所有的小寫字母均會被轉換爲大寫,但是所有使用小型大寫字體的字母與其餘文本相比,其字體尺寸更小
值 | 描述 |
---|---|
normal | 默認值,瀏覽器會顯示一個標準的字體 |
small-caps | 瀏覽器會顯示小型大寫字母的字體 |
inherit | 規定應該從父元素繼承 font-variant 屬性的值 |
.text{
font-variant: small-caps; //小寫字母將會轉變成大寫字母
}
font-weight
用於設置文本的字體粗細
數字值 400 相當於 關鍵字 normal,700 等價於 bold。每個數字值對應的字體加粗必須至少與下一個最小數字一樣細,而且至少與下一個最大數字一樣粗
值 | 描述 |
---|---|
normal | 默認值,標準字符 |
bold | 定義粗體字符 |
bolder | 定義更粗的字符 |
lighter | 定義更細的字符 |
100~900 | 定義由粗到細的字符。400等同於normal,700等同於bold |
inherit | 規定應該從父元素繼承字體的粗細 |
.text1{
font-weight: normal;
}
.text2{
font-weight:bold;
}
.text3{
font-weight: 600;
}
font-size / line-height
設置字體的尺寸/字體大小
實際上它設置的是字體中字符框的高度;實際的字符字形可能比這些框高或矮(通常會矮)。
各關鍵字對應的字體必須比一個最小關鍵字相應字體要高,並且要小於下一個最大關鍵字對應的字體
還可以設置爲數值,單位有px、em、%、pt、cm等
值 | 描述 |
---|---|
xx-small/x-small/small/medium/large/x-large/xx-large | medium爲默認值 |
smaller | 把font-size設置爲比父元素更小的尺寸 |
larger | 把font-size設置爲比父元素更大的尺寸 |
length(一個數值) | 把font-size設置爲一個固定的值 |
% | 把font-size設置爲基於父元素的一個百分比值 |
inherit | 規定應該從父元素繼承字體尺寸 |
font-family
用於規定元素的字體
可以設置多個值,如果一個不符合就嘗試下一個值,每個值之間用逗號分隔
有兩種類型的字體系列名稱:
- 指定的系列名稱:具體的名稱,如’times’、‘courier’、‘arial’
- 通常字體系列名稱:如’serif’、‘sans-serif’、‘cursive’、‘fantasy’、’ monospace ’
還有一種特殊的屬性值就是inherit,表示從父元素繼承字體樣式
.text1{
font-family: 'Times New Roman', Georgia, Serif;
}
.text2{
font-family:Arial, Verdana, Sans-serif;
}
使用技巧
- 儘量使用偶數的數字字號
- 儘量使用系統默認字體
- 常用的中文字體有微軟雅黑和宋體,英文字體又Arial
- 字體中包含空格、/、#、$等符號時,需要用單引號或雙引號
CSS Unicode字體樣式—可用Unicode編碼來替換字體樣式,避免錯誤
字體名稱 | 英文名稱 | Unicode編碼 |
---|---|---|
宋體 | SimSun | \5B8B\4F53 |
新宋體 | NSimSun | \65B0\5B8B\4F53 |
黑體 | SimHei | \9ED1\4F53 |
微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隸書 | LiSu | \96B6\4E66 |
幼圓 | YouYuan | \5E7C\5706 |
華文細黑 | STXiHei | \534E\6587\7EC6\9ED1 |
細明體 | MingLiU | \7EC6\660E\4F53 |
新細明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
.text{
font-family: '\5B8B\4F53'
}
還有一種特殊的屬性值就是inherit,表示從父元素繼承字體樣式
color
用於定義字體顏色
取值方式有三種:
- 預定義的顏色,如red、green、blue等
- 十六進制,如#ff0000
- RGB代碼,如rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,0,0,0.5)
.text1{
color: red;
}
.text2{
color: #f40;
}
.text3{
color: rgb(255,0,0);
}
文本樣式
text-indent—文本對齊方式
縮進文本:文本內容第一行縮進
值 | 描述 |
---|---|
5em | 縮進5em個單位,值可以是負值,變成懸掛縮進 |
20% | 縮進父元素的百分比個寬度 |
inherit | 繼承父元素的屬性 |
.text1{
text-indent: -5em;
}
### word-spacing—字體間隔
設置字體間隔,默認爲0
值 | 描述 |
---|---|
normal | 默認值 |
length(一個數值) | 定義字體間隔 |
inherit | 從父元素繼承的屬性 |
.text1{
word-spacing: 5em; //5px等
}
text-transform—文本大小寫
處理文本的大小寫,共有四個值:none、uppercase、lowercase、capitalize
值 | 描述 |
---|---|
none | 默認值 |
capitalize | 文本中的每個單詞以大寫字母開頭 |
uppercase | 文本中字母全部爲大寫 |
lowercase | 文本中字母全部爲小寫 |
inherit | 繼承父元素的屬性值 |
.text1{
text-transform: uppercase;
}
.text2{
text-transform: lowercase;
}
text-decoration—文本裝飾
對文本設置某種效果,如加下劃線。如果後代元素沒有自己的裝飾,父元素元素上設置的裝飾會“延伸”到後代元素中
值 | 描述 |
---|---|
none | 默認值 |
underline | 定義文本下劃線 |
overline | 文本上劃線 |
line-through | 文本中劃線(相當於刪除線) |
blink | 文本閃爍 |
inherit | 繼承父元素的屬性值 |
.text1{
text-decoration: underline;
}
.text2{
text-decoration: blink;
}
.text3{
text-decoration: overline underline;
}
white-space
定義如何處理文本中的空白符
值 | 描述 | 空白符 | 換行符 | 自動換行 |
---|---|---|---|---|
pre-line | 合併空白符序列,但是保留換行符 | 合併 | 保留 | 允許 |
normal | 默認,空格會被瀏覽器忽略 | 合併 | 忽略 | 允許 |
norwrap | 文本不會換行,文本會在在同一行上繼續,直到遇到 標籤爲止 |
合併 | 忽略 | 不允許 |
pre | 空白會被瀏覽器保留 | 保留 | 保留 | 不允許 |
pre-wrap | 保留空白符序列,但是正常地進行換行 | 保留 | 保留 | 允許 |
inherit | 繼承父元素的屬性值 |
.text1{
white-space: norwrap;
}
text-align—文本對齊方式(水平對齊)
text-align 屬性規定元素中的文本的水平對齊方式
值 | 描述 |
---|---|
left | 文本左對齊。默認值:由瀏覽器決定 |
right | 文本右對齊 |
center | 文本居中對齊 |
justify | 文本兩端對齊 |
inherit | 繼承父元素的屬性值 |
.text{
text-align: center;
}
vertical-align—文本垂直對齊
規定文本的垂直對齊方式,值包括:
inherit | top | bottom | text-top | text-bottom | baseline | middle | sub | super
.text{
vertical-align: bottom;
}
text-overflow—文本溢出屬性
該屬性用於定義當文本溢出時元素髮生的操作,默認值爲clip
值 | 描述 |
---|---|
clip | 修剪文本,超出則被裁剪 |
ellipsis | 用省略號來代替被裁剪的文本 |
string | 使用給定字符串來代替被裁剪的文本(Firefox有效) |
.text1 {
text-overflow: ellipsis;
}