CSS總結（基本文字和字型樣式）

顏色：

字型種類：

arial 字型，這個字型可在任何電腦上找到。

通常認為最佳做法還是新增 helvetica 作為 arial 的首選替代品，儘管它們的字型面幾乎相同，但 helvetica 被認為具有更好的形狀，即使arial更廣泛地可用。

字型棧：

由於你無法保證你想在你的網頁上使用的字型的可用性 (甚至乙個網路字型可能由於某些原因而出錯), 你可以提供乙個字型棧(font stack)，這樣的話，瀏覽器就有多種字型可以選擇了。只需包含乙個font-family屬性，其值由幾個用逗號分離的字型名稱組成。

這裡的trebuchet後有空格，所以trebuchet ms要加雙引號

使用font-family結合color的例子：

效果：

字型大小：

px(畫素): 將畫素的值賦予給你的文字。這是乙個絕對單位，它導致了在任何情況下，頁面上的文字所計算出來的畫素值都是一樣的。

emrems: 這個單位的效果和 ems 差不多，除了 1rem 等於 html 中的根元素的字型大小， (i.e. ) ，而不是父元素。這可以讓你更容易計算字型大小，但是遺憾的是， rems 不支援 internet explorer 8 和以下的版本。

font-size標準設定的是16px。

乙個簡單的font-size例子：

當調整你的文字大小時，將文件(document)的基礎 font-size 設定為10px往往是個不錯的主意，這樣之後的計算會變得簡單，所需要的 (r)em 值就是想得到的畫素的值除以 10，而不是 16。做完這個之後，你可以簡單地調整在你的 html 中你想調整的不同型別文字的字型大小。在樣式表的指定區域列出所有font-size的規則集是乙個好主意，這樣它們就可以很容易被找到。

效果：

字型樣式：

font-style: 用來開啟和關閉文字 italic (斜體)。可能的值如下 (你很少會用到這個屬性，除非你因為一些理由想將斜體文字關閉斜體狀態)：

字型粗細：

font-weight: 設定文字的粗體大小。這裡有很多值可選，防止你有好幾個可用的字型。 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不過事實上你很少會用到 normal 和 bold以外的值：

文字轉換：

text-transform: 允許你設定要轉換的字型。值包括：

文字裝飾：

text-decoration

: 設定/取消字型上的文字裝飾 (你將主要使用此方法在設定鏈結時取消設定鏈結上的預設下劃線。) 可用值為：

文字陰影：

你可以為你的文字應用陰影，使用text-shadow屬性。這最多需要 4 個值。

text-shadow: 4px 4px 5px red;

4 個屬性如下:

陰影與原始文字的水平偏移，可以使用大多數的 css 單位 length and size units, 但是 px 是比較合適的。這個值必須指定。

陰影與原始文字的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移動陰影，而不是左/右。這個值必須指定。

模糊半徑 - 更高的值意味著陰影分散得更廣泛。如果不包含此值，則預設為0，這意味著沒有模糊。可以使用大多數的 css 單位 length and size units.

陰影的基礎顏色，可以使用大多數的 css 顏色單位 css color unit. 如果沒有指定，預設為 black.

文字布局：

text-align屬性用來控制文字如何和它所在的內容盒子對齊。可用值如下，並且在與常規文字處理器應用程式中的工作方式幾乎相同：

行高：line-height屬性設定文字每行之間的高，可以接受大多數單位 length and size units，不過也可以設定乙個無單位的值，作為乘數，通常這種是比較好的做法。無單位的值乘以 font-size 來獲得 line-height。當行與行之間拉開空間，正文文字通常看起來更好更容易閱讀。推薦的行高大約是 1.5–2 (雙倍間距。) 所以要把我們的文字行高設定為字型高度的1.5倍。

line-height: 1.5;

字母和行間距：

letter-spacing和word-spacing屬性允許你設定你的文字中的字母與字母之間的間距、或是字與字之間的間距。你不會經常使用它們，但是可能可以通過它們，來獲得乙個特定的外觀，或者讓較為密集的文字更加可讀。它們可以接受大多數單位 length and size units.

更改中第一行的行間距：

p::first-line

CSS總結（基本文字和字型樣式）

CSS文字，文字常用樣式

CSS字型文字樣式屬性

CSS中的字型樣式和文字樣式

CSS總結（基本文字和字型樣式）

CSS文字，文字常用樣式

CSS字型 文字樣式屬性

CSS中的字型樣式和文字樣式

相關推薦

CSS字型文字樣式屬性