當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML对字体的操作详解

發布時間：2023/12/10 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 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-2_allsobaiduweb~default-1-50615919&spm=3001.4430

一、文字樣式設置的基本標簽
二、設置文字的顏色
三、設置文字的尺寸
四、設置文字的字體
五、使文字傾斜
六、使文字加粗
七、處理網頁中的特殊字符
十、如何更方便地忽略瀏覽器對部分HTML的解析
十一、其他文字修飾方法
十二、為了讓文字富有變化，或者為了著意強調某一部分，HTML提供了一些標簽產生這些效果，現將常用的標簽列舉如下：

一、文字樣式設置的基本標簽

?設置字體樣式的基本標簽是，被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中，容易被多重嵌套，如<font?屬性1=值1><font?屬性2=值2>文本。還有一種情況是標簽嵌套錯位，如文本。為了規范代碼的編寫，避免不必要的錯誤，讀者在初學時一定要謹慎。

二、設置文字的顏色

?color是標簽的屬性之一，用于設置文字顏色。編寫代碼如代碼2.1所示。

代碼2.1?字體顏色的設置：font_color.htm

<html>

<head>

??<title>字體顏色的設置</title>

</head>

<body>

??淺紅色文字：網絡人VS灰鴿子

??深紅色文字：網絡人VS灰鴿子

??淺綠色文字：網絡人VS灰鴿子

??深綠色文字：網絡人VS灰鴿子

??淺藍色文字：網絡人VS灰鴿子

??深藍色文字：網絡人VS灰鴿子

??淺黃色文字：網絡人VS灰鴿子

??深黃色文字：網絡人VS灰鴿子 ?

??淺青色文字：網絡人VS灰鴿子

??深青色文字：網絡人VS灰鴿子

??淺紫色文字：網絡人VS灰鴿子

??深紫色文字：網絡人VS灰鴿子

</body>

</html

效果現實如圖一：

? ? ? ? ? 圖一 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖二 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖三

三、設置文字的尺寸

size也是標簽的屬性，用于設置文字大小。size的值為1-7，默認為3。我們可以size?屬性值之前加上“＋”、“－”字符，來指定相對于字號初始值的增量或減量。編寫代碼如代碼2.2所示。

代碼2.2?字體尺寸的設置：font_size.htm

<html>

<head>

??<title>字體尺寸的設置</title>

</head>

<body>

??size為1：HTML學習

??size為2：HTML學習

??size為3：HTML學習

??size為4：HTML學習

??size為5：HTML學習

??size為6：HTML學習

??size為7：HTML學習

</body>

</html>

瀏覽效果現實如圖二：

可嘗試在size值前面加上“＋”、“－”字符，更靈活地設置文字尺寸

四、設置文字的字體

face也是標簽的屬性，用于設置文字字體（字型）。HTML網頁中顯示的字型從瀏覽端的系統中調用，所以為了保持字型一致，建議采用宋體，HTML頁面也是默認采用宋體。

代碼2.3??字體字型的設置：font_face.htm ? 在標簽中添加style="font-family:宋體"這個類別就OK

<html>

<head>

??<title>字體字型的設置</title>

</head>

<body>

字型為宋體：網絡人VS灰鴿子

字型為楷體：網絡人VS灰鴿子 
?字型為黑體：網絡人VS灰鴿子 
?字型為隸書：網絡人VS灰鴿子

</body>

</html>

瀏覽效果如圖三所示。

五、使文字傾斜

用雙標簽可使被作用文字傾斜，達到特殊的效果，例如文章的日期。被稱為強調標簽，也是斜體，目前使用比標簽更頻繁，其編寫方法如下：

這是斜體文字

這也是斜體文字

六、使文字加粗

用雙標簽可使被作用文字加粗，是文字更加醒目，例如文章的標題部分。被稱為特別強調標簽，也是文字加粗，目前使用比標簽更頻繁，其編寫方法如下：

這是粗體文字

這也是粗體文字

七、處理網頁中的特殊字符

在HTML中，有一些字符有特殊含義，例如“<”和“>”是標簽的左括號和右括號，而標簽是控制HTML顯示的，標簽本身只能被瀏覽器解析，并不能在頁面中顯示。那么，該怎樣在HTML中顯示“<”和“>”呢？HTML規定了一些特殊字符的寫法，以便在網頁中顯示，如表1.1所示。

表1.1??HTML中的特殊字符

^特殊符號	^HTML^代碼	^特殊符號	^HTML^代碼
^<^?	^<	^?^{（商標符號）}	^™
^>^?	^>	^?^{（注冊符號）}	^®
^{“”（英文半角）}	^"	^×	^×
^§	^§	^?^{（版權符號）}	^©

<html>

<head>

??<title>特殊字符的設置</title>

</head>

<body>

標簽的顯示方法：<HTML>

引號的顯示方法："英文半角雙引號"

商標的顯示方法：™

注冊符號的顯示方法：®

版權符號的顯示方法：©

顯示§

顯示×

</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>

<xmp>獨立寒秋，湘江北去，橘子洲頭。? 看萬山紅遍，層林盡染；? 漫江碧透，百舸爭流。 </xmp>

鷹擊長空，魚翔淺底， 萬類霜天競自由。? 悵寥廓，問蒼茫大地，誰主沉浮？

攜來百侶曾游， 憶往昔崢嶸歲月稠。? ?恰同學少年，風華正茂；? ?書生意氣，揮斥方遒。? ?指點江山，激揚文字，? ?糞土當年萬戶侯。? ?曾記否，到中流擊水，浪遏飛舟！

</body>

</html>

瀏覽效果如圖2.7所示。

圖2.7 ?忽略標簽的設置

十一、其他文字修飾方法

為了滿足不同領域的需要，HTML還有其他修飾文字的標簽。比較常用的有上標格式標簽和下標格式標簽。某些場合甚至要用到刪除效果，即可用HTML的中劃線標簽。

— 上標格式標簽為雙標簽，多用于數學指數的表示，比如某個數的平方或立方。

— 下標格式標簽為雙標簽，多用于注釋，以及數學的底數表示。

— 中劃線標簽為雙標簽<strike></strike>，多用于刪除效果。

編寫代碼如代碼2.8所示。

代碼2.8??其他修飾標簽的設置

<html>

<head>

??<title>其他修飾標簽的設置</title>

</head>

<body>

沁園春長沙！

數學指數的表示：23=8、1002=10000 <hr />

沁園春長沙！

數學底數的表示：log381=4、log5125=3 <hr />

刪除效果：<strike>我被刪除了</strike>

</body>

</html>

瀏覽效果如圖2.8所示。

圖4.14 ?其他修飾標簽的設置

十二、為了讓文字富有變化，或者為了著意強調某一部分，HTML提供了一些標簽產生這些效果，現將常用的標簽列舉如下：

粗體　　　　　　　　　　　　　　HTML語言

斜體　　　　　　　　　　　　　　HTML語言

加下劃線　　　　　　　　　　　　HTML語言

<TT>　　　　?<TT>　　　　　打字機字體　　　　　　　　　　　HTML語言

<BIG>　　　　</BIG>　　　　大型字體　　　　　　　　　　　　HTML語言

小型字體　　　　　　　　　　　　HTML語言

<BLINK>　　　</BLINK>　　　閃爍效果　　　　　　　　　　　　HTML語言

??　　　　表示強調，一般為斜體　　　　　　HTML語言

?　　表示特別強調，一般為粗體　　　　HTML語言

<CITE>　　　?</CITE>　　　用于引證、舉例，一般為斜體　　　HTML語言

總結

以上是生活随笔為你收集整理的HTML对字体的操作详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：深入理解css优先级
下一篇：前端小结（5）---- iframe

HTML

HTML对字体的操作详解

目錄

一、文字樣式設置的基本標簽

二 、 設置文字的顏色

三、設置文字的尺寸

四、 設置文字的字體

五、 使文字傾斜

六、 使文字加粗

七、處理網頁中的特殊字符

十、 如何更方便地忽略瀏覽器對部分HTML的解析

十一、 其他文字修飾方法

十二、為了讓文字富有變化，或者為了著意強調某一部分，HTML提供了一些標簽產生這些效果，現將常用的標簽列舉如下：

總結

二、設置文字的顏色

四、設置文字的字體

五、使文字傾斜

六、使文字加粗

十、如何更方便地忽略瀏覽器對部分HTML的解析

十一、其他文字修飾方法