CSS Font

Font families

There are two types of font family names:

• generic family 通用字體系統 - a group of font families with a similar look 一組擁有相似外觀的字體系統
  
• font family 特定字體系統- a specific font family (like "Times New Roman" or "Arial")

Generic family	Font family	Description
Serif	Times New Roman Georgia	這類型的字體某些字母的末端有突出的線
Sans-serif	Arial Verdana	"Sans" means without - 字符末端不會有多出來的小橫線
Monospace	Courier New Lucida Console	每一個字符 have the same width

Tip：sans-serif fonts are considered easier to read than serif fonts. 前者被認爲比後者更容易閱讀。

文本的字體系統由 font-family 性質設定.

It should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family.

該性質應該像一個“後備”系統，擁有一些字體名稱。每一個名稱之間由逗號分開, 從你希望用的字體開始，以一個通用字體系統結束，這樣如果瀏覽器不支持第一個字體，它會嘗試後面的選項。

Note: 如果字體系統名稱多餘一個單詞，則必須用雙引號括起來。, like: "Times New Roman".

p{font-family:"Times New Roman", Times, serif;}

Font style

The font-style property has three values:

• normal 正常顯示
• italic 斜體
• oblique 傾斜- The text is "leaning" (oblique is very similar to italic, but less supported)

斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的傾斜版本。

通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

Font size

The font-size property sets the size of the text.

Note: You should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

不要通過調整字體大小來使段落看起來像是標題，使用恰當的HTML標籤來實現。

absolute-size

Named font sizes scale according to the user's font setting preferences. 設置字體大小爲一個特定的值，當輸出設備物理尺寸已知時很有用。Possible values include the following: xx-small, x-small, small, medium, large, x-large, xx-large.

relative-size

Set of keywords that are interpreted as relative to the font size of the parent object. Possible values include the following: smaller, larger.

length

Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).

percentage

Floating-point number, followed by a percent (%). The value is a percentage of the parent object's font size.

Set font-size with em 

爲了允許用戶 resize 文本字體大小 （在瀏覽器菜單裏），許多開發者使用 em 而不是 px

The em size unit is recommended by the W3C. 該字體大小單位被W3C推薦使用。

1em is equal to the current font size. 1em 等於當前字體大小。

The size can be calculated from pixels to em using this formula: pixels/16=em

p {font-size:0.875em;} /* 14px/16=0.875em */

Unfortunately, there is still a problem with older versions of IE. The text becomes larger than it should when made larger, and smaller than it should when made smaller.

不幸的是，老版本IE仍然有問題。當設定字體爲larger時，字體會變得比它應該放大尺寸更大，縮小時同理。

Font weight

font-weight 該性質用來設定字體的粗細，取值：

• normal 默認值
• bold 粗體
• bolder 更粗
• lighter 細體
• 整百數字（100-900） 400 is the same as normal, and700 is the same as bold

Font variant

font-variant 該性質用來設定文本是否以 small-caps 字體輸出

• normal 默認值
• small-caps
  

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

所有小寫字母被轉換成大寫字母，但是，這些被轉換成大寫的字母，要比文本中原始的大寫字母小。效果如下：

Hey we are Small Caps Fonts.

All properties in one declaration

font 性質可以用來將所有的font相關性質寫在一起,  (in order):

font-style font-variant font-weight font-size/line-height font-family

The font-size and font-family  values are required. If one of the other values are missing, the default values will be inserted, if any.

使用font這個性質按順序設定字體樣式。其中字體大小和字體集是必須的，其他值如果沒寫，則插入默認值。