CSS學習3(字型)

2021-07-13 08:27:39 字數 1623 閱讀 7191

這是最亂的地方,幾乎所有的字型都有多種名字。同種字型的不同風格(斜體,加粗等等)也有不同的名字,為了解決這個問題,css使用font-family表示乙個系列的字型,包括這種字型的各個風格。

設定時,你可以指定字型系列,也可以指定特定的字型。字型可以設定多個,使用者**會依次查詢,直到找到第乙個可用的為止。

font-family

:"s","monaco","times",sans-serif;

如果真的找不到,那使用者**就會使用自己的預設字型了。

這裡特定字型需要加引號,字型系列則不能加引號。

b

加粗的值有這些:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

實際上,這些數字本身並沒有固有的加粗度。css規範只是指出,每個數對應乙個加粗度,它至少與前乙個數指定的加粗度相同。因此,100、

200、300和400可能都對映到同樣的較細變形,500和600可能對應到同樣的較粗字型變形,而700、800和900 可能都生成同樣的很粗的字型變

形。只要乙個關鍵字對應的變形不會比前乙個關鍵字所對應變形更細,就都是允許的。

一般地,這些數都被定義為與某個常用變形名等價(先不考慮font-weight的其他值)。 400定義為等價於normal, 700對應於bold。其他數不

對應font-weight的任何其他值,不過它們可能對應於常用變形名。如果有乙個字型變形標為normal、regular、roman或book,就會為之指定

400,而標為medium的變形會指定為500。不過,如果乙個標為medium的變形是唯一可用的變形,它不會指定為500而會是400。

在你想讓字型相比于父元素更粗或更細的時候,可以使用bolder和lighter。

實際上,font-size屬性與你看到的實際字型大小之間的具體關係由字型的設計者來確定。這種關係設定為字型本身中的乙個em方框(有人也稱之

為em框)。這個em方框(以及相應的字型大小)不一定指示字型中字元建立的任何邊界。相反,它指示如果沒有額外行間距(css中的line-

height)設定字型時基線間的距離。某種字型的字元可能比預設的基線間距離要高,這是完全有可能的。出於這種原因,定義字型時可能要求

所有字元都小於其em方框,很多字型就是這樣做的。因此,font-size的作用是為給定字型的em框提供乙個大小,而不能保證實際顯示的字元就是這種大小。

有這些可能的值:font-size

xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | (length) | (percentage)

| inherit

其中smaller,larger, percentage是相對父元素而言的。

font-style:italic | oblique | normal | inherit

font-variant:small-caps | normal | inherit

small-caps會把小寫字母變成小的大寫字母。

CSS3 字型樣式

lang en charset utf 8 css3的其他屬性title type text css font face 宣告使用伺服器端字型 伺服器端字型對otf和ttf這兩種字型格式支援良好 font face p box sizing 設定width和height屬性值包含的內容。div di...

css3字型樣式

一 font family的使用 font family屬性可以設定html文字的字型樣式,eg.注意 當字型名稱中包括空格 之類的符號,則使用 font family 可以把多個字型名稱作為乙個 回退 系統來儲存。如果瀏覽器不支援第乙個字型,則會嘗試下乙個。也就是說,font family 屬性的...

css入門3 字型樣式

1字型樣式簡介 字型樣式屬性 屬性說明 font family 字型型別 font size 字型大小 font style 字型風格 color 字型顏色 除了字型顏色,其它字型屬性都是以font字首開頭的,其中font是字型的意思 1.1字型型別 font family 在css中,可以使用fo...