1 1字體和字體的組合 2 1.1字體組合 3 字體組合一般是由很多種字體組成,字體之間使用逗號隔開,客戶端按照排列的先後順序選擇一種用來 4 呈現文字字體.如:p{font-family:verdana,arial,sans-serif;} 5 客戶端首先在字體庫中尋找verdana字體,如果沒有找到就找arial字體,還沒找到就在sans-serif字體 6 組合中選擇一個字體來顯示. 7 8 1.2字體名組合 9 字體名組合就是由多個字體名放在一起構成的字體組合.列如,前面的示例中,verdana和arial都是字體 10 名,它們共同構成一種字體組合. 11 在使用字體名組合時,應該注意以下事項: 12 (1)字體名中如果有空白,那麼應該用引號括上,如"Times New Roman" 13 (2)字體名中如果包含保留關鍵字,那麼應該首先進行轉義.如雙引號,單引號,逗號等 14 (3)字體名中如果與關鍵字initial,inherit,default,serif,sans-serif,monospance,fantansy, 15 cursive相同,那麼也必須使用引號括住 16 (4)在中英文字體混用組合時,應儘量將中文字體名放在最前面,這樣只有在找不到中文字體時才 17 會找英文字體 18 19 1.3同用字體組合 20 客戶端瀏覽器千差萬別,有一種最壞的情況,就是所有的字體名都不可用時,可以使用通用字體組合. 21 通用字體組合是一個備用機制,當所有指定字體都不可用時,就使用通用字體組合.通用字體組合是關鍵字 22 不能使用引號包括 23 通用字體組合由5種類型的組合而成: 24 (1)serif(帶襯線的字體,如大寫的I頂部與頂部的橫線) 25 (2)sans-serif(不帶襯線的字體,英文前綴sans即是"非"的意思) 26 (3)cursive(草書字體) 27 (4)monospace(等寬字體,特點就是每一個字符的寬度相同) 28 29 2字體設置 30 還有一些屬性用於設置字體樣式,粗細,大小等 31 2.1字體樣式 32 font-style屬性用於設置字體樣式,包括常規,斜體和傾斜字體. 33 normal用於定義常規字體\italic用於斜體\oblique用於傾斜字體. 34 如: p{font-style:italic} 35 p em{font-style:normal;} 36 在這裏p元素的常規文本以斜體顯示,但是在p元素內部em標籤強調文本卻以常規字體顯示. 37 38 2.2字體變體 39 使用font-variant屬性可以設置字體的變體,該屬性有兩個值可以選用:normal和small-caps. 40 normal用於指定一個未標記爲small-caps的字體,small-caps(小體大寫,指的是將字母小寫的轉換與大寫的相同,但 41 尺寸不盡相同) 42 43 2.3字體粗細 44 font-weight屬性指定了字體的粗細.屬性值可以是數字,也可以使關鍵字,並且客戶端瀏覽器會將粗細關鍵字與數值關 45 聯起來,並將關鍵字影射爲粗細數值,也就是是說,數值纔是該屬性的計算值 46 屬性及屬性值描述如下: 47 (1)100--900:這些值構成了一個有序系列,每一個數值表示一個粗細值,它表示的粗細至少和它的父元素相同 48 (2)normal:等於400 49 (3)bold:等於700 50 (4)bolder:指定比父元素更粗的字體.如父元素字體粗細爲400,那麼bolder表示將字體設置爲500,除了父元素 51 字體爲900,那麼此時當前字體也爲900了 52 (5)lighter:指定比父元素字體更細的字體.除非父元素字體粗細爲100,那麼此前的字體粗細也是100 53 54 2.4字體大小 55 font-size屬性用於設置字體大小,其取值方式有4種 56 p{font-size:normal;} p{font-size:larger;} p{font-size:12px;} p{font-size:20%;} 57 (1)絕對大小 58 絕對大小指的是使用關鍵字來設置字體大小,font-size屬性默認值爲medium關鍵字 59 (2)相對大小 60 相對大小也是使用關鍵字來設置字體大小,有兩個關鍵字可用:larger/smaller 61 這兩個關鍵字被解釋爲相對於字體大小索引表中的字體大小和父元素的字體大小 62 (3)長度值 63 長度值指定了一個絕對的字體大小,不允許爲負數 64 (4)百分比值 65 一個百分比值指定了一個相對於父元素字體大小的絕對字體大小,可以使用百分比值或者以em,ex單位表示的值 66 67 2.5快捷方式屬性 68 font屬性是上述屬性font-style,font-variant,font-weight,font-size,line-height,font-family的快捷方式屬性 69 雖然有點快捷,貌似不利於基礎一般的人看懂 70 71 2.6字體變形拉伸 72 font-stretch屬性可以對正常的字體進行拉伸,改變字體的正常寬度,或者增寬,或變窄. 73 相關屬性值如下: 74 (1)wider:把變形拉伸設置爲更進一步的較寬值 75 (2)narrower:把變形拉伸設置爲更進一步的較窄值 76 77 2.6字體大小的調整 78 對於任何給定的字體大小,不同字體的客觀尺寸和文本的易讀性各不相同,爲了區分,字體的小寫字母x的高度(稱爲x-height) 79 與font-size高度之間的比率稱爲一個字體的aspect值,當字體擁有高的aspect值時,那麼當此字體設置爲很小的時候更易閱讀. 80 81 使用font-size-adjust屬性爲某個元素規定一個aspect值,這樣可以保持字體的x-height的值,即強制使用同一大小的x-height 82 該屬性的值可以使關鍵字none,或者是一個長度數字.關鍵字none表示允許字體組合中的每一個字體遵循自己的x-height值.長度 83 數字則是爲字體組合中所有字體強迫使用同一x-height值 84 85 3使用@font-face規則來定義字體 86 @font-face規則也可用於定義字體,並且它有一個增強的功能:可實現字體鏈接,即樣式表可以引用遠程計算機的特定字體,供瀏覽器下載 87 和使用. 88 3.1引用字體 89 src描述符用於指定字體文件的位置,可以使相對路徑或者是絕對路徑 90 如:引用遠程字體 91 @font-face{font-family:MyFontFamily;src:url() format(truetype);} 92 93 字體類型(format參數):truetype(TrueType .ttf),opentype(OpenType字體 .ttf,.otf),truetype-aat(帶有allple advance 94 typography擴展的true-type字體 .ttf),embedded(嵌入式OpenType .eot),svg(svg字體 .svg,svgz) 95 96 引用本地安裝字體 97 <font-face-name>表示的是字體的全名,並且作爲local()函數的參數引用.由於它可能包含任意字符,包含空格與標點, 98 因此全名最好包含在引號中,但不是必須的 99 @font-face{font-family:MyfontFamily;src:local("BT Century ");} 100 101 3.2定義字體功能 102 font-family描述符定義一個字體組合名 103 font-style描述符定義字體樣式 104 font-weight描述符定義字體粗細 105 font-stetch描述符定義字體變形拉伸 106 107 3.3定義字符範圍 108 uniconde-range描述符可以給指定字體支持的unicode字符的範圍.範圍指定以"U+"開頭,而後緊挨着的是"起始Unicode代碼點", 109 緊挨着"短劃線",而後緊挨着"結束Unicode代碼點" 110 如:@font-size{font-family:Myfont;src();unicode-range:U+0-7F;} 111 "短劃線"和結束"Unicode"代碼點可以省去,這時表示單個字符,如U+416.也可以使用問號"?"作爲通配符,表示任意數字,如:U+4?? 112 113