我們先來看一個簡寫屬性 font
,使用這個屬性可以很方便的指定其他的字體屬性。比如:
示例
p {font: italic 75%/125% "Comic Sans MS", cursive;}這條規則定義了字體的幾個屬性,使整個段落文本都變成斜體。
字體大小設置為每個段落父元素字體大小的3/4,行高設置為125%(比常規的間隔稍大一些)。
文本字體設置為 Comic Sans MS,假如該字體不被瀏覽器支持則使用默認字體:cursive。
這條規則還把bold和small-caps這些效果給去掉了(設置它們的值為normal)。
你無法預料到用戶是否可以訪問樣式表里定義的字體。所以在設置字體時,在屬性后指定一個替代的字體列表是個不錯的主意。
在這個字體列表的最后加上系統字體中的一個,如:serif,sans-serif,cursive,fantasy或monospace。
如果字體不支持樣式表里設置的字體特征,瀏覽器會使用另一種字體。比如,樣式表中包含字體不支持的特殊字符,如果瀏覽器發現另一種字體支持這些特殊字符,那瀏覽器就會選擇使用這種字體。
使用 font-family
屬性指定文本的字體。
簡體中文的字體示例:
Windows:font-family:微軟雅黑;
Mac OS:font-family:”Songti SC”;
瀏覽器用戶瀏覽頁面時,可以覆蓋頁面默認的文號大小,也可以改變頁面的字號大小。所以說盡可能的使用相對的字號大小對你來說是有意義的。
你可使用系統內置的值來設置字號,比如small,medium和large。你也可以使用相對父元素字號大小的值來設置,比如:smaller,larger,150%或1.5em。1“em”等于1個字母“m”的寬度(相對于父元素字號大?。?因此1.5em就是1.5倍的父元素字號大小。
如果有必要你也可以指定一個實際的大小,比如14px(14像素)應用于顯示設備或14pt(14點)應用于打印設備。但是實際大小不能應用于視力受損用戶的設備上,因為這些設備不支持指定實際的值。一個比較容易實現的策略是給頂級的文檔元素指定一個系統內置的值如medium,然后再給它的子元素設置個相對值。
使用font-size
屬性指定字體的大小。
行高用來指定行與行之間的距離。如果你的文檔中有一個很長的段落由很多行組成,而且這個段落的字號還比較小,這時給它指定一個稍大的間距,這樣閱讀起來會更方便。
使用 line-height
屬性指定文本的行間距。
單獨的 text-decoration
就可以為文本指定其他風格,比如underline或line-through。你也可以把值設置成none,把這些風格取消掉。
使用[font-style]: italic;
指定文本為斜體;
使用font-weight: bold;
指定文本加粗;
使用 font-variant: small-caps;
指定文本為小型大寫字母;
如果我們想單獨設置某個效果失效,我們可以把其相應的屬性設置為normal或inherit.
詳細資料
我們也可以采用其他方式指定文本樣式。
比如,這里提到的幾個屬性的其他值。
在一個復雜的樣式表中,應該避免使用font屬性,因為它的副作用(重置其他個體屬性)。
字體相關的全部細節,可以在CSS規范里查看Fonts 。文本修飾相關可以查看 Text 。
如果我們不想使用系統上的默認字體庫,我們可以使用{ { cssxref(@font-face)} }指定一個在線字體。然而,這要求用戶的瀏覽器支持該字體。
對于一個簡單的頁面,我們可以設置 body
元素的字體,然后頁面中的其他元素繼承這個設置。
編輯我們的樣式表。
添加以下規則到你的樣式表中。推薦這個規則放在css文件的開頭:
body {font: 16px "Comic Sans MS", cursive;}添加一個該規則的注釋,可以添加空格匹配你的整體樣式布局。
保存文件并刷新瀏覽器查看效果。如果你的系統有Comic Sans MS或cursive字體,這兩種字體都不支持斜體。你的瀏覽器會自動選擇另一種字體實現斜體,效果如第一行。
**C**ascading **S**tyle **S**heets |
---|
**C**ascading **S**tyle **S**heets |
5. 從瀏覽器的菜單欄中選擇 視圖 > 字體大小 > 放大(或視圖 > 縮放 > 放大)。即使你在樣式里指定了字體為16px。用戶瀏覽網頁時,還是可以改變字體字號的大小。
新聞熱點
疑難解答