談談利用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>
-
javascript設置創建動態表格的方法
兩種JavaScript動態創建table表格的方法,分享給大家,具體實現如下方法一:最原始的方法,創建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//開始appendchild()追加各個元素ndChild(a4);ndChild(a3);nd...
-
Dreamweaver跳轉菜單的方法技巧介紹
什麼是跳轉菜單:跳轉菜單是文檔內的彈出菜單,對站點訪問者可見,並列出鏈接到文檔或文件的選項。可以創建到整個Web站點內文檔的鏈接、到其它Web站點上文檔的鏈接、電子郵件鏈接、到圖形的鏈接,也可以創建到可在瀏覽器中打開的`任何文件類型的鏈接以下是小編為大家...
-
JavaScript 小型打飛機遊戲實現和原理説明
JavaScript小型打飛機遊戲實現和原理説明玩法説明:上下左右控制移動,空格發彈。每打中一個敵機就加100分,每提升5000分,玩家的飛機的一次發彈數就加一,最多四,被敵機撞到或者讓敵機飛到底部就算輸。。。。演示代碼:http://demo./js/FlyBeat/遊戲目前的功能還是比較簡...
-
網頁設計黃金配色原則是什麼
身為網頁設計新手的你,是不是還在糾結於你製作的網頁找不到一組完美的配色方案?在本教程中我們將與你分享6條肯定會火,並且“錯不了”的指導方針,你可以按照這些原則把握最基本的色彩規律。現在我們分享的這些原則都不是規則,你會在你的職業生涯中創造出更多的配色...