Head First HTML與CSS

第八章 增加字體和顏色樣式

CSS——掌控頁面的表現

指定和改變字體的外觀

1.用font-family屬性選擇字體

在CSS中，字體劃分為“字體系列”（font family），可以從中指定希望頁面中各個元素使用的字體。大多數計算機上通常只安裝了部分字體，因此使用某些特殊字體時要注意。

body{

??????? font-family:Verdana,Geneva,Arial,sans-serif;

}

2.用font--size屬性控制字體大小

用CSS指定字體大小有很多種方法，還可以允許用戶調整字體大小而不影響設計師的設計。

body{

font-size:14px;

}

3.用color屬性為文本設置顏色

可以用color屬性改變字體顏色。接下來會學習有關顏色的細節，包括神秘的顏色“十六進制碼”。

body{

color:silver;

}

4.用font-weight屬性影響字體的粗細

可以使用font-weight屬性改變字體粗細。

body{

font-weight:bold;

}

5.使用text-decoration屬性為文本增加更多風格。

通過使用text-decoration屬性，可以對文本增加一些裝飾，包括上劃線、下劃線和刪除線。

body{

text-decoration:underline;

}

字體系列到底是什么？

我們已經見過font-family屬性，目前只是將它的值定為sans-serif，其實還可以指定其他的字體。

每個font-family包含一組有共同特征的字體。共有五個字體系列：sans-serif,serif,monospace,cursive和fantasy.

1.sans-serif字體系列

沒有襯線的字體，與serif字體相比，通常認為它在計算機屏幕上更容易識讀。

2.serif字體系列

有襯線字體。類似新聞報紙的排版。襯線是字母末端的裝飾性小細線。

3.monospace字體系列

包含固定寬度的字符。例如，一個“i”在水平方向和“m”占有的寬度是相同的。這類字體主要用于顯示軟件代碼示例。

4.cursive字體系列

包括看似手寫的字體。有時會在標題中使用。

5.fantasy字體系列

包含某種風格的裝飾性字體。

使用CSS指定字體系列

接下來看一個例子：

body{

font-family:Verdana,Geneva,Arial,sans-serif;

}

使用font-family可以指定多個字體，用逗號分隔；

字體名稱必須區別大小寫，如Verdana不能寫成verdana或VERDANA；

通常指定的是一個候選字體列表，從前往后，選定第一個瀏覽器支持的字體，即如果不支持第一個，嘗試下一個，以此類推；

一般最后放一個通用的字體系列名，如“sans-serif”、“serif”等，防止候選字體列表中沒有瀏覽器可以使用的字體。而“sans-serif”、“serif”并不是真正的字體名。取代它們的是瀏覽器定義的該字體系列的默認字體。

問：如果一個字體名中包含多個單詞，該如何指定呢？

只需要在font-family聲明中的字體兩邊加上引號，如:font-family:"Courier New",sans-serif;

Web字體

如果用戶沒有你想要使用的字體，可以利用CSS的一個特性：@font-face，使用Web字體（Web font）向用戶的瀏覽器提供一種字體。一旦提供了新字體，瀏覽器就可以使用該Web字體。流程如下：

1.要利用Web字體，瀏覽器首先獲取一個引用這些字體的HTML頁面。

2.瀏覽器再獲取這個頁面所需的Web字體文件。

3.獲取這個字體后，瀏覽器顯示頁面時就會使用這個字體。

自行了解：Web字體托管服務。

常用Web字體格式及擴展名

TrueType字體：.ttf

OpenType字體：.otf

Embedded OpenType字體：.eot

SVG字體：.svg

Web開放格式字體：.woff

大多數現代瀏覽器上支持最為廣泛的格式是Web開放格式字體，推薦使用。

為頁面增加Web字體

無論是字體文件放在自己網站的服務器上，還是使用字體托管服務。我們都需要字體文件的URL。

獲得URL后，要使用Web字體，只需在CSS中增加以下規則：

@font-face{

font-family:"Emblema One";

src:url("http://wickedlysmart.com/EmblemaOne-Regular.woff"),

? ??? url("http://wickedlysmart.com/EmblemaOne-Regular.ttf");

}

規則與正常的規則不同，正常規則會選擇一組元素并指定樣式，而@font-face規則會建立一個字體，將指定一個fony-family名，以便以后使用該字體。

src屬性告瀏覽器在哪里可以得到這個字體，瀏覽器會嘗試加載每一個src文件，直到找到它能支持的一個文件。一旦加載，會為這個字體分配font-family屬性中指定的名字，在這里就是"Emblema One"。

這樣，我們就可以在CSS中使用這個字體了。如下：

h1{

font-family:"Emblema One",sans-serif;

}

急在一時不如貴在堅持。每天與大家共同學習，謝謝！