font-family
- 使用逗號分隔的字體族名稱
- 初始值由瀏覽器設置決定，可繼承
- 英文字體總是放在中文字體前面
- 最后總是添加通用字體族
body {
font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}
.receipt {
font-family: Courier, "Lucida Console", monospace;
}
瀏覽器如何渲染字體——字體匹配算法：
1.瀏覽器先獲取一個系統(tǒng)字體列表
2.對于元素中的每一個字符，使用font-family屬性及其他屬性進行匹配，如果能匹配就暫定該字體
3.如果步驟2沒有匹配上，選擇下一個可選的font-family進行步驟2
4.如果匹配到一個字體，但是字體中沒有該字符，繼續(xù)對下一個可選的font-family執(zhí)行步驟2
5.如果沒有匹配到該字體，使用瀏覽器默認字體
font-size
- 定義文字的大小，可以使用px，百分比，em等做單位
- 取值
- 絕對值 xx-small | x-small | small | medium | large | x-large| xx-large
- 相對值 large | smaller -> 相對于父級計算
- 長度
- 百分數，相對于父級元素計算
- 初始值為medium(由瀏覽器設置決定，一般為16px)，可繼承
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.6em; /* 1.6em = 16px */
}
長度單位em
- 一般是相對于元素font-size的計算值
- 用在font-size屬性上時，是相對于父元素的font-size計算值
font-style
- 定義文字以斜體還是正常方式顯示
- 取值：normal | italic | oblique (偽斜體)
- 初始值為normal，可繼承
font-weight
- 定義文字的粗細程度
- 取值：normal | bold | bolder | lighter | 100 | 200 | ... | 900
- 初始值為normal
line-height
- 元素所屬的line-box 所占高度
- 初始值為normal(具體由瀏覽器決定)，可繼承
- 取值：<長度> | <數字> | <百分比>
- 段落文字一般取值 1.4~1.8
字體樣式不僅可以單獨寫，還可以寫在一起
font縮寫
p { font: bold 12px/14px sans-serif }
Web Fonts
@font-face {
[ font-family: <family-name>; ] ||
[ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
[ unicode-range: <urange>#; ] ||
[ font-variant: <font-variant>; ] ||
[ font-feature-settings: normal | <feature-tag-value>#; ] ||
[ font-variation-settings: normal | [ <string> <number>] # ||
[ font-stretch: <font-stretch>; ] ||
[ font-weight: <weight>; ] ||
[ font-style: <style>; ]
}
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
一些字體來源
text-align
- 定義文本在容器內的對齊方式
- 取值 ： left | right | center | justify
- 初始值由HTML的dir屬性決定，可繼承
letter-spacing
- 指定字符之間的間距
- 取值： normal | <length>
- 初始值為normal,可繼承
word-spacing
- 指定單詞之間的間距
- 取值： normal | <length>
- 初始值為normal,可繼承
text-indent
- 指定文本縮進
- 取值： normal | <length> | <precentage>
- 初始值為0，可繼承
text-decoration
- 定義了文本的一些裝飾效果,比如下劃，刪除線等
- 初始值為none，可繼承
- 其他值： underline | line-through | overline
white-space
- 指定空白符如何處理
- 取值：normal | nowrap | pre
word-break
- 指定是否允許在單詞中間換行
- 取值： normal | break-all | break-word
