字體(Font)
css控制的字體屬性包括font-family, font-style, font-variant, font-weight, font-size.

1.font-family:

由字體名(family-names)和字組名(generic families)兩個部分組成.首先來看個實例,例:查看Jorux.com首頁的css文件,可以看到以下代碼:

body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}

藍色加亮部分就是font的屬性值, 這種寫法為簡寫, 可將其還原為:

font-weight: normal;
font-size: 12px;
line-height: 1.5;
font-family: Georgia, sans-serif;

行高(line-height)其實并不屬于font屬性, 但可以在簡寫時歸入font屬性值內. 現在我們先只看最后一行font-family的部分. “Georgia“即為字體名(有simhei, arial, verdana等), “sans-serif“即為字組名(包括襯線字體(Serif), 非襯線字體(Sans-Serif) 和等寬字體(MonoSpace)三種).新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。

由于Windows自帶的漢字字體極為有限. 但一般中文Windows系統都支持宋體(默認, SimSun)和黑體(SimHei)和楷體(kaiti_gb2312). 我們來看看這幾種漢字字體(要注意這幾種字體名, 楷體的英文字體名為kaiti_gb2312, Firefox對漢字字體支持不良):

宋體??????楷體??????黑體???? ?默認?

中國人看到西方字體名可能會比較迷惑, 但就如同學習英文時所遇到的英文名一樣, 一些常用的字體名的表現和拼寫必須要掌握, 對于中文學習者, 目前只推薦掌握以下幾種英文字體:

Arial??????Verdana???? ?Georgia???????Courier??

這幾種字體的一般用法如下:

Arial:?是目前最為流行的正文字體, 幾乎所有的web2.0站點(如Google, Flickr, Wikipedia等)都使用arial字體作為正文甚至是標題的字體. 特點是親和力比較強, 閱讀起來不易疲勞;

Verdana:?是1996年微軟邀請頂級字體設計師花了兩年時間出品的字體, 免費提供給windows用戶. 和arial用法比較相似, 是目前使用最為廣泛的字體, 幾乎能在任何地方看到;

Georgia:?這個后起之秀, 由于其花哨的襯線(后說明), 被很多網頁設計師所青睞, 逐漸取代了Times New Roman在serif字組中的核心地位. 本網站的標題也使用的是Georgia字體.

Courier:?隸屬于Monospace字組, 由于其字母的寬度均一, 一般用于對單詞長度控制比較嚴格的地方, 比如網頁導航條和報紙(印刷品).

英文有那么多字體, 但都隸屬于serif, sans-serif和monospace三種字組. 由于英文本身的特點, 不同于方塊字(漢字), 英文字母的寬度是不相等的, 這就給出版業如報紙的排版工作增加了難度, 于是發明了等寬字體(monospace).

字組及字體關系圖如下:

現在有必要解釋一下serif和sans-serif的區別. “sans”來源于古法語, 意為”without”, 即”非”. 而”serif”來源于荷蘭語, 譯為襯線, 指字母的拐角或端點位置的修飾線, 如圖所示:

所以非等寬字組又分為有襯線(serif)和無襯線(sans-serif)兩組. verdana和arial均屬于無襯線組.

對于字組和字體的選擇, 其實是很個性化的, 讀者可以根據自己的喜好, 靈活搭配, 但總的原則是不要選取一些罕見的字體, 如果訪問者沒有這種字體的話,就會和你的設計意圖相悖.

例:如font-family的屬性值如下:

font-family: verdana,arial,sans-serif;

瀏覽器首先在字體庫中尋找verdana字體, 如果沒找到則尋找arial字體, 如果還沒找到就在sans-serif字組中的選擇其他字體顯示.

2. font-style:?包括normal, italic和oblique三個屬性值. css代碼如下:

font-stye:normal;
font-stye:italic;
font-stye:oblique;

表現如下:

normal?? ???italic??oblique

可以看到italic和oblique都是向右傾斜的文字, 但區別在于Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果。主要用于一些需要區別于正文的備注說明文字.

3. font-variant:?包括normal和small-caps兩種屬性值. 非英文用戶可能很少用到這個屬性. small-caps是指小型大寫字母, 是介于大寫字母和小寫字母之間的一種字母表現形式, css代碼如下:

font-variant: normal;
font-variant: small-caps;

表現如下:

NORMAL??????small-caps

可以看到小型大寫字母比正常的大寫字母要矮一截, 需要注意的是, 要實現此效果, html中的中必須使用小寫字母, 在css中用font-variant:small-caps;就能自動轉化為小型大寫, 否則就會顯示為正常的大寫字母.

4. font-weight:? 包括normal和bold兩種屬性值. blod屬性值即指粗體. css代碼如下:

font-weight: normal;
font-weight: bold;

表現如下:

normal?????bold

5. font-size:?用于控制字體大小的屬性, 屬性值的單位主要有px, pt, cm, mm, %, em, 其中pt, cm, mm為字體絕對大小單位,px, %, em為相對大小單位. 這兩種單位各有裨益, 絕對大小單位的優勢在于, 不管用戶的瀏覽器設置如何, 均能保持原有的設計樣式, 但對于一些有閱讀障礙, 習慣于大字體的用戶就顯得有點死板. 而相對大小單位雖然在可讀性上有優勢, 但網頁界面容易被增大的字體所沖散.

在這里, 限于篇幅就不再解釋每個單位的區別和用法. 可以參考Length units.

這里只是強調一點, 如果你的網頁主要是在電腦屏幕上顯示, 首推px作為你的首選單位, 因為px能夠精確地表示元素在屏幕中的位置和大小. 如果你的網頁主要用于打印, 則推薦使用絕對單位pt(1pt=1/72英寸)來作為首選單位, 這是因為不管屏幕的分辨率是多少, 打印出來的大小都是一樣的.

Summary: 現在總結一下font的屬性, 如果想讓”Font Property”表現為32px, 行高為150%, 粗體, 斜體, 字體為Georgia, 字組為serif, 代碼如下:

font-size: 32px;
line-height: 1.5;
font-style: italic;
font-weight: bold;
font-family: Georgia, serif;

簡寫為:

font: italic bold 32px/1.5 Georgia,serif;

表現如下:

Font Property

背景(background)

包括background-color, background-image, background-repeat, background-attachment, background-position五種屬性.

1. background-color:?指背景顏色, 其屬性值有三種形式, 十六進制, 顏色名稱, rgb值. 目前最為常用的是”#+十六進制數”. 例: 本站顯示代碼的段落背景為#EEEEEE的灰色, 代碼及示例如下:

background-color: #EEEEEE;

2. background-image: 指背景圖片, 其屬性值為背景圖片的地址, 代碼和格式如下:

background-image: url(http://jorux.com/back.png);

例:?本站首頁的第一篇文章標題前有個”NEW”圖標, 查看css可見如下代碼:

#homeheadline a{
color:#444;
padding: 30px 68px 0 40px;
margin:0;
background:url(images/new.png) no-repeat 0 16px ;
}

3. background-repeat:?指背景圖片的重復與否以及重復方式, 有no-repeat, repeat, repeat-x, repeat-y四種屬性值.

• no-repeat: 即無論背景圖片的大小, 只顯示單個背景圖片,? 如首頁的第一篇文章標題前的”NEW”圖標, 代碼如上所示;
• repeat: 指背景圖片橫向和縱向重復連續顯示;
• repeat-x: 指背景圖片橫向重復連續顯示;
• repeat-y 指背景圖片縱向重復連續顯示;例: 查看本站css文件,可以看到以下代碼:
  body {
  font: normal 12px/1.5 Georgia, sans-serif;
  text-align:left;
  background:#444 url(images/bodybg.jpg) repeat-y;
  }

可以看到背景圖片bodybg.jpg是縱向重復顯示的, 并隨頁面的長度的增加而增加.新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。

4. background-attachment:?指背景圖片的附著方式, 有scroll(默認屬性)和fixed兩種屬性值. scroll指背景圖片隨頁面的滾動而滾動, 而fixed屬性值則可使背景圖片固定于瀏覽器的某個位置, 不隨頁面滾動而滾動. 如下例所示, 您可以試著滾動本頁面來看看兩圖的差別, 左邊為scroll, 右邊為fixed(請用IE觀看以下演示):

X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X

X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X

總結

以上是生活随笔為你收集整理的css对于字体和背景等属性的控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。