HTML对字体的操作详解
摘自：HTML對字體的所有操作詳解（經典）
作者：HeroKern
發布時間： 2016-01-31 21:15:31
網址：https://blog.csdn.net/qq_21792169/article/details/50615919/?utm_term=html%E6%A0%87%E8%AE%B0%E5%AD%97%E4%BD%93%E7%BA%A2%E8%89%B2&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduweb~default-1-50615919&spm=3001.4430
目錄
- 一、文字樣式設置的基本標簽
- 二 、 設置文字的顏色
- 三、設置文字的尺寸
- 四、 設置文字的字體
- 五、 使文字傾斜
- 六、 使文字加粗
- 七、處理網頁中的特殊字符
- 十、 如何更方便地忽略瀏覽器對部分HTML的解析
- 十一、 其他文字修飾方法
- 十二、為了讓文字富有變化，或者為了著意強調某一部分，HTML提供了一些標簽產生這些效果，現將常用的標簽列舉如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ? /* 如果現實亂碼請在head標簽里面添加這條語句，這是為了統一字體格式，我們采用常見的utf-8*/
一、文字樣式設置的基本標簽
?設置字體樣式的基本標簽是<font></font>，被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中，<font></font>容易被多重嵌套，如<font?屬性1=值1><font?屬性2=值2>文本</font></font>。還有一種情況是標簽嵌套錯位，如<font><p>文本</font></p>。為了規范代碼的編寫，避免不必要的錯誤，讀者在初學時一定要謹慎。
二 、 設置文字的顏色
?color是<font></font>標簽的屬性之一，用于設置文字顏色。編寫代碼如代碼2.1所示。
代碼2.1?字體顏色的設置：font_color.htm
<html>
<head>
??<title>字體顏色的設置</title>
</head>
<body>
??淺紅色文字：<font color="#dd0000">網絡人VS灰鴿子</font><br />
??深紅色文字：<font color="#660000">網絡人VS灰鴿子</font><br />
??淺綠色文字：<font color="#00dd00">網絡人VS灰鴿子</font><br />
??深綠色文字：<font color="#006600">網絡人VS灰鴿子</font><br />
??淺藍色文字：<font color="#0000dd">網絡人VS灰鴿子</font><br />
??深藍色文字：<font color="#000066">網絡人VS灰鴿子</font><br />
??淺黃色文字：<font color="#dddd00">網絡人VS灰鴿子</font><br />
??深黃色文字：<font color="#666600">網絡人VS灰鴿子</font><br />?
??淺青色文字：<font color="#00dddd">網絡人VS灰鴿子</font><br />
??深青色文字：<font color="#006666">網絡人VS灰鴿子</font><br />
??淺紫色文字：<font color="#dd00dd">網絡人VS灰鴿子</font><br />
??深紫色文字：<font color="#660066">網絡人VS灰鴿子</font><br />
</body>
</html
效果現實如圖一：
?
? ? ? ? ? 圖一 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖二 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖三
三、設置文字的尺寸
?
size也是<font></font>標簽的屬性，用于設置文字大小。size的值為1-7，默認為3。我們可以size?屬性值之前加上“＋”、“－”字符，來指定相對于字號初始值的增量或減量。編寫代碼如代碼2.2所示。
代碼2.2?字體尺寸的設置：font_size.htm
<html>
<head>
??<title>字體尺寸的設置</title>
</head>
<body>
??size為1：<font size="1">HTML學習</font><br />
??size為2：<font size="2">HTML學習</font><br />
??size為3：<font size="3">HTML學習</font><br />
??size為4：<font size="4">HTML學習</font><br />
??size為5：<font size="5">HTML學習</font><br />
??size為6：<font size="6">HTML學習</font><br />
??size為7：<font size="7">HTML學習</font><br />
</body>
</html>
瀏覽效果現實如圖二：
可嘗試在size值前面加上“＋”、“－”字符，更靈活地設置文字尺寸
四、 設置文字的字體
?
face也是<font></font>標簽的屬性，用于設置文字字體（字型）。HTML網頁中顯示的字型從瀏覽端的系統中調用，所以為了保持字型一致，建議采用宋體，HTML頁面也是默認采用宋體。
代碼2.3??字體字型的設置：font_face.htm ? 在標簽中添加style="font-family:宋體"這個類別就OK
<html>
<head>
??<title>字體字型的設置</title>
</head>
<body>
字型為宋體：<font style="font-family:宋體">網絡人VS灰鴿子</font><br />
字型為楷體：<font style="font-family:楷體">網絡人VS灰鴿子</font><br />?字型為黑體：<font style="font-family:黑體">網絡人VS灰鴿子</font><br />
?字型為隸書：<font style="font-family:隸書">網絡人VS灰鴿子</font><br/>
</body>
</html>
瀏覽效果如圖三所示。
五、 使文字傾斜
?
用雙標簽<i></i>可使被作用文字傾斜，達到特殊的效果，例如文章的日期。<em></em>被稱為強調標簽，也是斜體，目前使用比<i></i>標簽更頻繁，其編寫方法如下：
<i>這是斜體文字</i>
<em>這也是斜體文字</em>
六、 使文字加粗
?
用雙標簽<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的標題部分。<strong></strong>被稱為特別強調標簽，也是文字加粗，目前使用比<b></b>標簽更頻繁，其編寫方法如下：
<b>這是粗體文字</b>
<strong>這也是粗體文字</strong>
七、處理網頁中的特殊字符
在HTML中，有一些字符有特殊含義，例如“<”和“>”是標簽的左括號和右括號，而標簽是控制HTML顯示的，標簽本身只能被瀏覽器解析，并不能在頁面中顯示。那么，該怎樣在HTML中顯示“<”和“>”呢？HTML規定了一些特殊字符的寫法，以便在網頁中顯示，如表1.1所示。
表1.1??HTML中的特殊字符
| 特殊符號 | HTML代碼 | 特殊符號 | HTML代碼 |
| <? | < | ?（商標符號） | ™ |
| >? | > | ?（注冊符號） | ® |
| “”（英文半角） | " | × | × |
| § | § | ?（版權符號） | © |
<html>
<head>
??<title>特殊字符的設置</title>
</head>
<body>
<font size="5">
標簽的顯示方法：<HTML><br />
引號的顯示方法："英文半角雙引號"<br />
商標的顯示方法：™<br />
注冊符號的顯示方法：®<br />
版權符號的顯示方法：©<br />
顯示§<br />
顯示×
</font>
</body>
</html>
瀏覽效果如圖2.6所示。
圖4.12 ?特殊字符的設置
————?說明：單獨顯示符號&必須用代碼&。
十、 如何更方便地忽略瀏覽器對部分HTML的解析
?
如果在網頁中作一個類似本書的HTML代碼示例，恐怕得把所有的<和>轉換成<和>，顯得比較麻煩。HTML代碼中的<plaintext>和<xmp></xmp>可以輕松解決這個問題。
<plaintext>是單標簽，它插入到HTML代碼中時，其后面的所有HTML標簽全部失效，即瀏覽器對<plaintext>后面所有的HTML標簽不作解析，直接在頁面上顯示。
<xmp></xmp>是雙標簽，它只使其包含的內容中的標簽失效，<xmp></xmp>的使用更為普遍。編寫代碼如代碼2.7所示。
代碼2.7?忽略標簽的設置：
?<html>
<head>
??<title>忽略標簽的設置</title>
</head>
<body>
<h2>沁園春·長沙</h2>
<xmp>獨立寒秋，<strong>湘江北去</strong>，橘子洲頭。?<br />看萬山紅遍，層林盡染；?<br />漫江碧透，<u>百舸爭流。</u> <br /></xmp>
鷹擊長空，<strong>魚翔淺底，</strong> <br />萬類霜天競自由。?<br />悵寥廓，<u>問蒼茫大地</u>，誰主沉浮？<br />
<plaintext>
攜來百侶曾游，<br />憶往昔崢嶸歲月稠。?<br />?恰同學少年，風華正茂；?<br />?書生意氣，揮斥方遒。?<br />?指點江山，激揚文字，?<br />?糞土當年萬戶侯。?<br />?曾記否，<strong>到中流擊水</strong>，浪遏飛舟！
</body>
</html>
瀏覽效果如圖2.7所示。
圖2.7 ?忽略標簽的設置
十一、 其他文字修飾方法
?
為了滿足不同領域的需要，HTML還有其他修飾文字的標簽。比較常用的有上標格式標簽和下標格式標簽。某些場合甚至要用到刪除效果，即可用HTML的中劃線標簽。
— 上標格式標簽為雙標簽<sup></sup>，多用于數學指數的表示，比如某個數的平方或立方。
— 下標格式標簽為雙標簽<sub></sub>，多用于注釋，以及數學的底數表示。
— 中劃線標簽為雙標簽<strike></strike>，多用于刪除效果。
編寫代碼如代碼2.8所示。
代碼2.8??其他修飾標簽的設置
<html>
<head>
??<title>其他修飾標簽的設置</title>
</head>
<body>
<font size="5">
沁園春<sup>長沙</sup>！<br />
數學指數的表示：2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr />
沁園春<sub>長沙</sub>！<br />
數學底數的表示：log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr />
刪除效果：<strike>我被刪除了</strike>
</font>
</body>
</html>
瀏覽效果如圖2.8所示。
圖4.14 ?其他修飾標簽的設置
十二、為了讓文字富有變化，或者為了著意強調某一部分，HTML提供了一些標簽產生這些效果，現將常用的標簽列舉如下：
?
<B> </B> 粗體 HTML語言
<I> </I> 斜體 HTML語言
<U> </U> 加下劃線 HTML語言
<TT> ?<TT> 打字機字體 HTML語言
<BIG> </BIG> 大型字體 HTML語言
<SMALL> </SMALL> 小型字體 HTML語言
<BLINK> </BLINK> 閃爍效果 HTML語言
<EM> ?</EM>? 表示強調，一般為斜體 HTML語言
<STRONG> ?</STRONG> 表示特別強調，一般為粗體 HTML語言
<CITE> ?</CITE> 用于引證、舉例，一般為斜體 HTML語言
總結
以上是生活随笔為你收集整理的HTML对字体的操作详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入理解css优先级
- 下一篇： 前端小结（5）---- iframe