CSS字體

CSS字體是Web設計中的一個重要部分，Web設計師必須掌握有關CSS字體屬性的知識。 這篇文章將從多個方面對CSS字體屬性做詳細的闡述。

一、字體系列

CSS允許選擇多種字體，以便在一個頁面中字體可以有備選。 “font-family”屬性規定一個元素使用的字體系列，使用逗號分隔多個系列名。

font-family: "Times New Roman", Times, serif;

上面的代碼告訴瀏覽器首選使用”Times New Roman”字體。 如果不能使用此字體，則使用”Times”，如果也不能使用”Times”，則使用備選字體族 “serif”。

使用sans-serif、monospace等字體系列也是可以的。

二、字體樣式

字體樣式可以指定為普通、斜體或粗體，使用「font-style」和「font-weight」屬性。

font-style: normal | italic | oblique;
font-weight: normal | bold | bolder | lighter | 100~900;

一般來說，font-style屬性指定斜體或傾斜，font-weight屬性指定粗細。範圍從100（最細）到900（最粗），或使用預定的”normal”和”bold”值。

三、字體大小

「font-size」屬性用於設置字體大小。

  font-size: 10px | 10em | 10%;

值可以是絕對大小或相對大小。

絕對大小有：px、pt、in、cm、mm、pc

相對大小有：em、ex、ch、rem、vw、vh、vmin、vmax等。

四、Google Fonts

Google字體是一種免費的開放源文件體系，可以應用於幫助Web設計人員更好地自定義和美化網站。 Google Fonts提供超過1000+種字體，基於開放源代碼許可授予商業和個人使用許可權。

要使用Google字體，可以在HTML文件的標籤內插入以下鏈接。

<link href="https://fonts.googleapis.com/css?family=Font+Name" rel="stylesheet">

其中 Font Name 是你想要使用的字體名稱。 更改但不限於 Open Sans、Roboto、Lato、Varela Round 等。

五、Web安全字體

Web安全字體是可以安全地使用的所有計算機上的通用字體。 這些字體與不同計算機和操作系統相關聯，確保它們在相應的設備上顯示。 常用的Web安全字體有：

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;

在Web設計中，使用Web安全字體可以確保文本在不同平台和設備上都表現良好。

六、字體展示效果

“text-decoration”屬性用於給文本添加下劃線、中劃線、刪除線、填充線等效果。

text-decoration: none | underline | overline | line-through | blink;

“text-transform”屬性規定文本的大小寫。 這個屬性的值有四種可能：

text-transform: none | capitalize | uppercase | lowercase;

“text-shadow”屬性允許向文本添加有趣的陰影效果。 可以指定陰影的顏色、水平偏移量、垂直偏移量和模糊半徑。

text-shadow: 2px 2px #FF0000;

七、字體調整

有時文本需要微調，”letter-spacing”屬性用於控制字母之間的距離。

letter-spacing: normal | 10px;

“word-spacing”屬性用於控制單詞之間的距離。

word-spacing: normal | 10px;

“line-height”屬性用於設置行高。 高於normal值的行高將使公式更易於閱讀。

line-height: normal | 2.0;

八、結語

本文介紹了CSS字體屬性的主要方面，包括字體系列、字體樣式、字體大小、Google字體、Web安全字體、字體效果以及字體調整。 希望這篇文章可以幫助您更好地控制CSS字體，使您的設計更好。