增加字體和顏色樣式

2019-11-14 09:06:42

字體：大中小

來源：轉載

供稿：網友

梗概

用font-family屬性定制頁面中使用的字體body{ font-family:Verdana,Geneva,Arial,sans-serif; }用font-size屬性控制字體的大小body{ font-size:14px;}

3.用color屬性設置字體顏色

body{ color:silver;}

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

body{ text-decoration:underline;}

細解各部分

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

1.sans-serif包含Verdana,”Arial Black”,Trebuchet MS,Arial,Geneva 沒有襯線，更易識別 2.serif包含Times,Times New Roman,Georgia 有襯線（新聞報紙的文字排版） 3.Monospace字體系列包括：Courier，Courier New,Andale Mono 字體包含固定寬度的字符，這些字體主要用于顯示乳尖代碼示例 4.Cursive字體系列：Comic Sans,Apple Chancery 看似手寫的字體 5.Fantasy字體系列：LAST　ＮＩＮＪＡ，Ｉｍｐａｃｔ　有某種風格的裝飾性字體

使用CSS指定字體系列

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

每個人都有不同的字體，如何處理？ *這些字體在Windows和Mac上可能都有 Verdana，Arial Black，Trebuchet MS,Arial,Times New Roman,Georgia，Courier New ，Andale Mono，Comic Sans，Ｉｍｐａｃｔ

*這些字體最有可能出現在Mac上 Geneva,Times,Courier，Helvetica 如何為頁面增加Web字體

找到一個字體：訪問一些提供字體的網站　　　　　　　　　　　　　　　ＦｏｎｔＳｑｕｉｒｒｅｌ（ｈｔｔｐ：／／ｗｗｗ．ｆｏｎｔｓｑｕｉｒｒｅｌ．ｃｏｍ／）就是一個很好的網站，這里提供了很多開源免費的字體，你可以把這些字體傳到你的服務器。Ｇｏｏｇｌｅ　Ｗｅｂ字體服務（ｈｔｔｐ：／／ｗｗｗ．ｇｏｏｇｌｅ．ｃｏｍ／ｗｅｂｆｏｎｔｓ）也很不錯，可以讓Ｇｏｏｇｌｅ為你完成管理字體和ＣＳＳ的所有具體工作，在這種情況下你只需要鏈接Ｇｏｏｇｌｅ服務上你想要的字體，然后在你的ＣＳＳ中使用相應的字體名就可以了。灰常簡單哦！確保有所需字體的所有格式：常用格式 TrueType字體：.ttp Web開放字體格式：.woff把你的字體放在web上你可能想把你自己的字體放在網上，這樣用戶的瀏覽器就能夠訪問這些字體。或者也可以應用網上的很多在線字體服務，這些服務會為你托管這些文件，不論哪一種情況，你都需要這些字體的ＵＲＬ。在ＣＳＳ中增加＠ｆｏｎｔ－ｆａｃｅ屬性　現在你已經得到了ＵＲＬ，所以現在就要為．ｃｓｓ文件增加＠ｆｏｎｔ－ｆａｃｅ規則　＠ｆｏｎｔ－ｆａｃｅ｛ｆｏｎｔ－ｆａｍｉｌｙ：＂Ｅｍｂｌｅｍａ　Ｏｎｅ＂；ｓｒｃ：url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal　　　　　　　　　　　　/EmblemaOne-Regular.woff"), 　 url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal　　　　　　　　　　　　/EmblemaOne-Regular.ttf");｝

＠ｆｏｎｔ－ｆａｃｅ規則會建立一個字體，將指定一個ｆｏｎｔ－ｆａｍｉｌｙ名（可以使用你喜歡的任意名字），以便以后使用。

５.在ＣＳＳ中使用ｆｏｎｔ－ｆａｍｉｌｙ名

ｈ１｛ｆｏｎｔ－ｆａｍｉｌｙ：＂Ｅｍｂｌｅｍａ　Ｏｎｅ＂，ｓａｎｓ－ｓｅｒｉｆ；｝

６．加載頁面

％獲取ｗｅｂ字體會花費一段時間，你的頁面性能可能會受到影響％用ｆｏｎｔ－ｆａｃｅ創建多種字體時，不僅要保證能夠獲取這些字體的ＵＲＬ，而且每個字體要創建單獨的ｆｏｎｔ－ｆａｃｅ規則

** 調整字體大小（默認字體大小為１６ｐｘ）

用像素指定字體大小ｂｏｄｙ｛ｆｏｎｔ－ｓｉｚｅ：１４ｐｘ；｝

　　２．百分數　　

ｈ１｛ｆｏｎｔ－ｓｉｚｅ：１５０％；｝

　　　３．ｅｍ（四舍五入）　　　

ｈ２｛ｆｏｎｔ－ｓｉｚｅ：１.２ｅｍ；｝

　　　４．關鍵字ｘｘ－ｓｍａｌｌｘ－ｓｍａｌｌｓｍａｌｌ＝１２ｐｘｍｅｄｉｕｍｌａｒｇｅｘ－ｌａｒｇｅｘｘ－ｌａｒｇｅ　　差距：２０％　 如何指定字體大小呢