談談利用CSS改變字體的方法
在過去頁面上的字體是一成不變的,靜靜的呆在那。當DHTML(動態網頁)出現後,我們能有更多方式控制字體了。一般來說,動態字體的'實現核心是CSS(層疊樣式表)加JavaScript。使用了以上兩項技術後,字體就能產生許多變化。
那小編今天就來談談利用CSS改變字體的方法。
定義字體的標籤元素
font-family: 設置字體字族。
“span style="font-family: 黑體, 宋體(GB)">田濤”/span>
font-sytle:設置字體類型。
“span style="font-style: normal">田濤”/span>
font-weight:設置字體的字重。
“span style="font-weight: bold">田濤”/span>
font-size:設置字體大小。
“span style="font-size: 14pt">田濤”/span>
font-decoration:修飾文本字體,比如帶下劃線“underline”。
“span style="text-decoration: underline">田濤”/span>
對於以上的字體設置,我們可以採用一個方便的方法:
“span style="font:normal bold 14pt 黑體">田濤”/span>
在style定義的次序是:font-style,font-weight,font-size,font-family.
定義字體和”font>定義字體的衝突
對於CSS定義字體和”font>定義字體,我們都要注意以下問題,比如有以下字體設置:
“span style="font-family: 宋體(KSC); font-size: 200pt">“font>田濤”/font>“/span>
這時侯字體大小將以font-size: 200pt的定義來設置。但如果你在”font>中加入size屬性,比如:
“span style="font-family: 宋體(KSC); font-size: 200pt">“font size="5">田濤”/font>“/span>
這時侯,字體的大小以size的設置爲準,font-size: 200pt將不起作用。其它的屬性也是一樣。如果你無需動態字體,就利用HTML4.0的”font>來定義字體,需要動態字體時,就需要使用CSS和JavaScritp來定義字體及引發事件。
3.定義CSS字體屬性類
一般我們在製作動態字體時,我們會首先利用CSS定義出頁面字體的整個屬性,然後在頁面中引用,而不用對每段文本進行設置,這也是實現動態字體首先一步。
“html>
“head>
“style type="text/css">
2 { font-family:"黑體"; font-size: 16px; font-style: normal; line-height: 17px }
“/style>
“/head>
“body>
“p class="tt2">田濤”/p>
“/body>
“/html>
在以上代碼中,“田濤”兩個字引用了_2類定義的字體樣式。當然你可以在”style>“/style>中定義不同的字體樣式,以便頁面中根據不同字體加以引用。比如:
“html>
“head>
“style type="text/css">
1 { font-family:"宋體"; font-size: 15px; font-style: normal; }
2 { font-family:"黑體"; font-size: 16px; font-style: normal; }
“/style>
“/head>
“body>
“p class="tt1">田濤”/p>
“p class="tt2">田濤”/p>
“/body>
“/html>
相關文章
-
css實現鼠標滑過改變文字的方法
同學你們知道怎麼實現css鼠標滑過改變文字的效果嗎?下面小編給大家整理了css實現鼠標滑過改變文字的方法,供大家參閱。代碼如下:#Menu {width:500px;margin:50px auto;border:1px solid #CCC;overflow:hidden;}#Menu ul -
jQuery css方法動態修改CSS屬性
定義和用法css() 方法返回或設置匹配的元素的一個或多個樣式屬性。返回 CSS 屬性值返回第一個匹配元素的 CSS 屬性值。註釋:當用於返回一個值時,不支持簡寫的 CSS 屬性(比如 "background" 和 "border")。複製代碼 代碼如 -
CSS編程的外部CSS文件引用方法是什麼
CSS外部引用使用了外接的CSS文件,一般的瀏覽器都帶有緩存功能,所以用戶不用每次都下載此CSS文件.外部引用相對於內部引用和內聯引用來說是高效的`是節省寬帶的. 外部引用是W3C推薦使用的.外部引用CSS是最好的引入C -
淺談用excel開發mis的方法
目前國內管理信息系統(MIS)開發研製一般採用人們熟悉的dBaseX、Foxbase或Foxpro等,這裏將簡要介紹如何用Excel開發MIS。一般來說,一套MIS主要包括信息輸入、信息處理、信息輸出三大組成部分,用Excel處理這些部分均顯 -
淺談js和css內聯外聯的注意事項
簡單說:這兩個問題其實是同一個問題,但是網上找了好久也找不到方法,外聯的js和css文件裏不能有任何HTML的標記註釋,一旦有,瀏覽器就瘋了!一去掉就好了!!!問題:起因是網上看到一個css的表格樣式,覺得挺好看,就打算放在自己的程序裏 -
淺談CSS使用的技巧及縱橫向書寫的特點
下面由小編爲大家帶來CSS使用的9則技巧及縱向書寫與橫向書寫的特點,希望對大家有所幫助 1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查 -
淺談IDE和SCSI硬盤混用
在傳統印象中,如果一個系統中安裝了兩塊硬盤的話,那麼兩塊硬盤的接口應該是一樣的,但通過本文的閱讀,您將會轉變這種錯誤觀念。如果您想要在一個單獨的系統中安裝兩塊硬盤,您下意識的想法一定是對兩驅動器採用同一接口,要麼 -
談談勞動合同法能否改變職場規則
林福來沒有“福”,在距離勞動合同法正式實施還有四個多月的時候,他被老闆炒魷魚了。“我沒有犯錯誤,莫名其妙就通知我辦離職手續。”他很氣憤。在被解僱之前,林福來已經在福州一傢俬營企業工作了9年。在過去的9年裏,他在貨 -
淺談出現PressF1toResume的原因及解決方法
在日復一日的學習、工作或生活中,大家都不可避免地要接觸到作文吧,作文是通過文字來表達一個主題意義的記敘方法。那要怎麼寫好作文呢?下面是小編收集整理的美麗的田野作文,歡迎閱讀與收藏。美麗的田野作文1家鄉讓人感到 -
CSS教程設置文本屬性和字體間距的方法詳解
CSS教程文本屬性: 字體間距用法:word-spacing: 1cm;word-spacing: 10pt;word-spacing: 10px;word-spacing: none;定義:使用這個屬性我們可以定義或者設置單詞之間的距離word-spacing屬性可以設置以下的值。a)cm:以釐