CSS3--如何為文字增加字體和顏色樣式-css教學-PHP中文網

這一章能夠讓你網頁中的文字變得更漂亮

關於文字的一些屬性

font-family：文字字體
font-size:文字大小
#color:文字顏色
##font- weight:文字粗細
text-decoration:文字的更多風格

font-family(字體系列)

#一共有五個系列：sans-serif（無襯線）、serif（有襯線）、monospace（等寬）、cursive（草書。。。這是本意）、fantasy（幻想？ #在客戶的計算機中查找有沒有Verdana，如果有就用Verdana顯示文字，如果沒有，就查找有沒有Geneva，如果還沒就查找Arial，如果還是沒有就找找客戶機中有沒有sans-serif的字體（一般每個計算機都有sans-serif的字體的，注意：sans-serif不是特定的字體） CSS3--如何為文字增加字體和顏色樣式

如果我真的很希望用戶可以使用我指定的字體，而我不知道用戶是否有這個字體

Web字體登場！

使用方法

找到一個字型檔：字尾名有woff、svg、eot、otf、ttf

#將這個字體放在web上，可以使用Google的字體託管服務，這個是免費的

在CSS中增加@font-face屬性

body {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

登入後複製

這個時候就相當於在用戶機上創建了名為Emblema One的字體了

像本地字體一樣使用，注意使用字體的地方要在@font -family之後
這樣做的缺點是載入字體會花一點時間，所以客戶第一次造訪你的網站而他又沒有這個字體就會花一點時間
調整字體大小

有三種字體單位：px(像素)、%、em（就是倍數，em=%除以100 )

@font-face {
	font-family:"Emblema One";
	src:url("www.某网站.com");
}/*那个网址就是字体URL */

登入後複製

#每一個關鍵字所表示的大小都不一定的，這個和客戶端有關係

那麼，我到底該怎麼指定文字的大小呢

首先，可以透過關鍵字先定義好的文字大小，透過關鍵字可以得到客戶機那邊預設的大小，這個一般的他那邊常用的大小

之後，使用百分數或em，可以相對於的文字大小來調整其他文字的大小（比如說一級標題），這裡不建議使用px像素表示

字體大小，雖然這樣你能夠準確的決定文字的大小但是在舊版的IE瀏覽器中將會不支援縮放

改變字體粗細

有五個關鍵字的大小，分別是：bold（粗體）、bolder（粗）、inherit（繼承上一級的粗細）、lighter（細一點）、normal（普通）

還有一個把font-weight設定成100到900之間的一個數字（100的倍數）

為字體增加風格

有四種：inherit（繼承爸爸）、italic（斜體）、normal（普通）、oblique（傾斜的）

italic和oblique的差別在於，前者是使用這個字體的斜體，顯示方式是在字體檔案中的，後者是直接把正正的字弄斜了。。。不過好像也差不多

颜色

Demo设置的颜色

body {
	background-color:red;
	background-color:rgb(80%, 40%, 0%);
	background-color:rgb(204, 102, 0);
	background-color:#66ccff;
}

登入後複製

这是四种设置颜色的方法，第一种是关键字，这个一般是小学生在用的吧，支持的颜色不多

第二种是使用rgb（red、green、blue）百分比，那些百分比意思是依次是红/绿/蓝的量（怎么说呢，越大就越含有这个颜色）

第三种和第二种相似，只不过从0%~100%改成了0~255

最后一种是十六进制码，意思是：

前两个代表红的十六进制、中间两个是绿的、最后两个是蓝的

把十六进制转成10机制就变成了第三种设置颜色的方法了

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

不多说，直接看效果：blink inherit line-through none overline underline

BULLET POINTS

CSS提供了許多屬性對字體的外觀加以控制，包括font-family、font-weight、font-size、font-style等
font-family是一組有共同特徵的字體
#用於Web的字體系列包括serif、sans-serif、monospace、cursive 、fantasy。 serif和sans-serif最為常用
訪客在你的web頁面上看到的字體取決於他們自己的電腦上安裝了哪些字體，除非你使用web字體
在font-family CSS屬性中指定候選字體是一個好主意，以防使用者沒有安裝你的首選字體
最後一個字體要為一個通用字體，如serif或sans-serif，這樣一來，如果找不到其他字體，瀏覽器可以替換適當的字體
如果你要使用某種字體，而預設情況下使用者可能沒有安裝這種字體，你就可以使用@font-face規則
#字體大小通常是關鍵字、像素px、百分比、em指定
如果使用像素來指定字體大小，就是在告訴瀏覽器字母高度是多少像素
em和%是相對字體大小，所以使用em和%指定字體大小時，就表示字體大小要相對於其父元素的字體大小來決定
#使用相對字體大小可以讓你的頁面更可維護
#在body規則中使用字體大小關鍵字來設定基本的字體大小，這樣如果使用者希望文字更大或更小，所有瀏覽器就能按比例縮放字體大小了
可以使用font-weight CSS屬性來設定文字為粗體
#font-style屬性用於建立斜體或傾斜文字。斜體或傾斜文字是傾斜的
web顏色是混合不同數量的紅、綠、藍色得到的
如果混合紅色100%，綠色100%，藍色100%就可以得到白色，全部為0%就是黑色
CSS中有16個基本顏色，及150多個拓展顏色
可以使用紅色、綠色、藍色百分比來指定你想要的顏色，也可以使用數值（0~255），或是16進位碼
要找到你想要的顏色的十六進位碼可以使用圖片編輯應用的顏色選擇工具
#表示顏色的十六進位碼有6位，每位取指為0~F，前兩者表示紅色的數量、中間兩個是綠色的、最後兩個是藍色的
可以使用text-decoration屬性為為本建立一個底線。有底線的文檔通常會被使用者誤以為是連結文本，所以要謹慎使用這個屬性

以上是CSS3--如何為文字增加字體和顏色樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！