整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS3 字體

          CSS3 字體


          SS3 @font-face 規(guī)則

          以前CSS3的版本,網(wǎng)頁設(shè)計(jì)師不得不使用用戶計(jì)算機(jī)上已經(jīng)安裝的字體。

          使用CSS3,網(wǎng)頁設(shè)計(jì)師可以使用他/她喜歡的任何字體。

          當(dāng)你發(fā)現(xiàn)您要使用的字體文件時,只需簡單的將字體文件包含在網(wǎng)站中,它會自動下載給需要的用戶。

          您所選擇的字體在新的CSS3版本有關(guān)于@font-face規(guī)則描述。

          您"自己的"的字體是在 CSS3 @font-face 規(guī)則中定義的。


          瀏覽器支持

          表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

          屬性




          @font-face4.09.03.53.210.0

          Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體.

          Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類型)。

          Chrome, Safari 和 Opera 也支持 SVG 字體/折疊.

          Internet Explorer 同樣支持 EOT (Embedded OpenType) 字體.

          注意: Internet Explorer 8 以及更早的版本不支持新的 @font-face 規(guī)則。


          使用您需要的字體

          在新的 @font-face 規(guī)則中,您必須首先定義字體的名稱(比如 myFirstFont),然后指向該字體文件。

          如需為 HTML 元素使用字體,請通過 font-family 屬性來引用字體的名稱 (myFirstFont):

          實(shí)例

          <style> @font-face{font-family:myFirstFont; src:url(sansation_light.woff);}div{font-family:myFirstFont;}</style>


          使用粗體文本

          您必須添加另一個包含粗體文字的@font-face規(guī)則:

          實(shí)例

          @font-face{font-family:myFirstFont; src:url(sansation_bold.woff); font-weight:bold;}

          該文件"Sansation_Bold.ttf"是另一種字體文件,包含Sansation字體的粗體字。

          瀏覽器使用這一文本的字體系列"myFirstFont"時應(yīng)該呈現(xiàn)為粗體。

          這樣你就可以有許多相同的字體@font-face的規(guī)則。


          CSS3 字體描述

          下表列出了所有的字體描述和里面的@font-face規(guī)則定義:

          提示:

          URL請使用小寫字母的字體,大寫字母在IE中會產(chǎn)生意外的結(jié)果
          描述符描述
          font-familyname必需。規(guī)定字體的名稱。
          srcURL必需。定義字體文件的 URL。
          font-stretch

          font-style

          font-weight

          unicode-rangeunicode-range可選。定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"。
          • normal

          • condensed

          • ultra-condensed

          • extra-condensed

          • semi-condensed

          • expanded

          • semi-expanded

          • extra-expanded

          • ultra-expanded

          可選。定義如何拉伸字體。默認(rèn)是 "normal"。
          • normal

          • italic

          • oblique

          可選。定義字體的樣式。默認(rèn)是 "normal"。

          • normal

          • bold

          • 100

          • 200

          • 300

          • 400

          • 500

          • 600

          • 700

          • 800

          • 900

          可選。定義字體的粗細(xì)。默認(rèn)是 "normal"。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          這里是云端源想IT,幫你輕松學(xué)IT”

          嗨~ 今天的你過得還好嗎?

          天不言而四時行,

          地不語而百物生。

          - 2024.03.11 -

          在數(shù)字世界的構(gòu)建中,字體不僅僅是文字的外衣,更是情感和風(fēng)格的傳遞者。作為網(wǎng)頁設(shè)計(jì)師和前端開發(fā)者,掌握HTML中的字體標(biāo)簽,能夠讓我們創(chuàng)造出更加豐富和吸引人的用戶體驗(yàn)。

          今天,就讓我們一起走進(jìn)HTML字體標(biāo)簽的世界,探索它們?nèi)绾巫尵W(wǎng)頁變得生動有趣。



          一、認(rèn)識基本字體標(biāo)簽

          語法結(jié)構(gòu):<標(biāo)簽 屬性=“值”> 內(nèi)容 </標(biāo)簽>

          • 標(biāo)簽通常是成對出現(xiàn)的,分為開始標(biāo)簽(p)和結(jié)束標(biāo)簽(/p),結(jié)束標(biāo)簽只是在開始標(biāo)簽前加一個斜杠“/”。
          • 標(biāo)簽可以有屬性,屬性必須有值(align=“center” )。
          • 開始標(biāo)簽與結(jié)束標(biāo)簽中包含的內(nèi)容稱之為區(qū)域。
          • 標(biāo)簽不區(qū)分大小寫,p和P是相同的。


          1、標(biāo)題標(biāo)簽< h1> - < h6>

          標(biāo)題標(biāo)簽的默認(rèn)樣式是自動加粗的,字體一級標(biāo)題最大,六級標(biāo)題最小,每個標(biāo)題標(biāo)簽獨(dú)占一行。

          • 標(biāo)題標(biāo)簽是塊元素

          示例:

          <h1>一級</h1>
          <h2>二級</h2>
          <h3>三級</h3>
          <h4>四級</h4>
          <h5>五級</h5>
          <h6>六級</h6>


          2、字體標(biāo)簽<font>

          在HTML中,最常用的字體標(biāo)簽非<font>莫屬,雖然現(xiàn)代開發(fā)中更推薦使用CSS來控制字體樣式,但了解它的歷史仍然有其必要性。<font>標(biāo)簽允許我們通過color、size和face屬性來改變字體的顏色、大小和類型。


          例如,如果我們想要顯示紅色Arial字體的文字,我們可以這樣寫:

          <font color="red" size="5" face="Arial">這是紅色Arial字體的文字</font>


          這行代碼的意思是:

          • <font> 開始一個字體樣式的定義。
          • color="red" 設(shè)置字體顏色為紅色。
          • size="5" 設(shè)置字體大小為5。
          • face="Arial" 設(shè)置字體類型為Arial。
          • 這是紅色Arial字體的文字 是我們要顯示的文字。
          • </font> 結(jié)束字體樣式的定義。

          注意:雖然標(biāo)簽在HTML4.01中是有效的,但在HTML5中已經(jīng)被廢棄,建議使用CSS來進(jìn)行樣式定義。



          3、字號大小:<font size="n">

          字號大小在網(wǎng)頁設(shè)計(jì)中同樣重要,它直接影響著閱讀體驗(yàn)。HTML允許我們通過<font size="n">來調(diào)整字體的大小,其中“n”可以是1到7的數(shù)字。

          例如:

          <!DOCTYPE html>
          <html>
          <head>
          <title>Font Size Example</title>
          </head>
          <body>
          <p><font size="5">This is a paragraph with font size 5.</font></p>
          <p><font size="10">This is a paragraph with font size 10.</font></p>
          <p><font size="15">This is a paragraph with font size 15.</font></p>
          </body>
          </html>


          運(yùn)行結(jié)果:

          不過,現(xiàn)代網(wǎng)頁設(shè)計(jì)更傾向于使用CSS來控制字號,以便更精細(xì)地調(diào)整字體大小。


          4、粗體標(biāo)簽

          <b>:這個標(biāo)簽用于將文本加粗顯示,相當(dāng)于英文中的bold。它不會改變字體,只是使文本看起來更粗體。

          <p><b>這是加粗的文本</b></p>

          <strong>:與<b>標(biāo)簽類似,<strong>標(biāo)簽也用于表示加粗的文本。

          <p><strong>這是重要的文本</strong></p>

          但在HTML5中,<strong>標(biāo)簽被賦予了語義,用來表示重要的文本內(nèi)容。


          5、斜體字標(biāo)簽

          <i>:這個標(biāo)簽用于將文本設(shè)置為斜體,相當(dāng)于英文中的italic。

          <p><i>這是斜體的文本</i></p>

          <em>:與<i>標(biāo)簽類似,<em>標(biāo)簽也用于表示斜體文本。

          <p><em>這是強(qiáng)調(diào)的文本</em></p>

          但在HTML5中,<em>標(biāo)簽被賦予了語義,用來表示強(qiáng)調(diào)的文本內(nèi)容。


          6、刪除字標(biāo)簽

          <del>:這個標(biāo)簽用于表示刪除的文本,常用于表示不再準(zhǔn)確或已過時的內(nèi)容。比如原價與現(xiàn)價。

          <p>原價:<del>100元</del></p>
          <p>現(xiàn)價:80元</p>


          運(yùn)行之后是這樣子的:

          在上述示例中,原價為100元,但已被刪除,因此使用標(biāo)簽將其包圍起來。這樣,瀏覽器會顯示刪除線來表示該文本已被刪除。


          7、文本格式化標(biāo)簽 < div> < span>

          < div> 標(biāo)簽用來布局,但是一行只能放一個< div> //大盒子,塊元素。

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Document</title>
          </head>
          <body>
          <div>這是一個div</div>
          <div>這是一個div</div>
          <div>
          <p>這是一個div</p>
          </div>
          <p>
          <div>云端源想</div>
          </p>
          </body>
          </html>
          • <div>標(biāo)簽可以看出是一個盒子容器,這里面可以放別的標(biāo)簽。
          • <div>標(biāo)簽是一個塊元素。

          如上圖控制臺所示(打開控制臺的方式:F12):<div>標(biāo)簽里面可以包含<p>標(biāo)簽,<p>標(biāo)簽,里面不可以放<div>標(biāo)簽。



          < span> 標(biāo)簽用來布局,一行上可以多個 < span>//小盒子,行元素。

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Document</title>
          </head>
          <body>
          <span>1234</span>
          <span>5678</span>
          </body>
          </html>
          • <span> 用于對文檔中的行內(nèi)元素進(jìn)行組合。
          • <span> 標(biāo)簽沒有固定的格式表現(xiàn)。當(dāng)對它應(yīng)用樣式時,它才會產(chǎn)生視覺上的變化。如果不對 <span> 應(yīng)用樣式,那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。
          • <span> 標(biāo)簽提供了一種將文本的一部分或者文檔的一部分獨(dú)立出來的方式。
          • <span>標(biāo)簽不同于<p>標(biāo)簽是一個行內(nèi)元素(不獨(dú)占一行)。


          8、其它字體標(biāo)簽

          <mark>:這個標(biāo)簽用于突出顯示文本,通常用于表示高亮的部分。

          <small>:這個標(biāo)簽用于表示小號文本,通常用于表示版權(quán)聲明或法律條款等次要信息。

          <ins>:這個標(biāo)簽用于表示插入的文本,常用于表示新增的內(nèi)容。

          <sub> 和 <sup>:這兩個標(biāo)簽分別用于表示下標(biāo)和上標(biāo)文本,常用于數(shù)學(xué)公式或化學(xué)方程式中。


          二、總結(jié)與建議

          盡管上述標(biāo)簽可以直接在HTML中使用,但現(xiàn)代網(wǎng)頁設(shè)計(jì)越來越傾向于使用CSS來控制文本的樣式,因?yàn)镃SS提供了更多靈活性和控制能力。

          使用CSS類和樣式規(guī)則可以更有效地管理網(wǎng)站的整體樣式,并且可以更容易地適應(yīng)不同設(shè)備和屏幕尺寸。


          因此,如果您正在學(xué)習(xí)或更新您的網(wǎng)頁設(shè)計(jì)知識,建議學(xué)習(xí)和使用CSS來控制字體和其他文本樣式,關(guān)于HTML的這些標(biāo)簽了解一下就可以了。


          總之,字體是網(wǎng)頁設(shè)計(jì)中不可或缺的元素,它們就像是網(wǎng)頁的語言,傳遞著信息和情感。通過HTML字體標(biāo)簽的學(xué)習(xí)和應(yīng)用,我們可以讓我們的網(wǎng)頁“字”得其樂,讓每一位訪問者都能享受到更加美妙的網(wǎng)絡(luò)體驗(yàn)。不斷探索和實(shí)踐,讓我們的網(wǎng)頁在字體的世界里綻放光彩吧!


          今天就先講到這里了,

          更多前端開發(fā)基礎(chǔ)知識點(diǎn)擊文末閱讀原文查看哦!

          記得關(guān)注【云端源想IT】一起學(xué)編程!


          我們下期再見!


          END

          文案編輯|云端學(xué)長

          文案配圖|云端學(xué)長

          內(nèi)容由:云端源想分享

          HTML 中,正確的字符編碼是什么?

          HTML5 中默認(rèn)的字符編碼是 UTF-8。

          這并非總是如此。早期網(wǎng)絡(luò)的字符編碼是 ASCII 碼。

          后來,從 HTML 2.0 到 HTML 4.01,ISO-8859-1 被認(rèn)定為標(biāo)準(zhǔn)。

          隨著 XML 和 HTML5 的出現(xiàn),UTF-8 也終于到來了,解決了大量的字符編碼問題。

          下面是關(guān)于字符編碼標(biāo)準(zhǔn)的簡短概述。


          在開始的時候:ASCII

          計(jì)算機(jī)信息(數(shù)字、文字、圖片)在電子中是以二進(jìn)制 1 和 0(01000101)進(jìn)行存儲的。

          為了規(guī)范字母數(shù)字字符的存儲,創(chuàng)建了 ASCII(全稱 American Standard Code for Information Interchange)。它為每個存儲字符定義了一個獨(dú)特的二元 7 位數(shù)字,支持 0-9 數(shù)字,大/小寫英文字母(a-z、A-Z)和一些特殊的字符,比如 ! $ + - ( ) @ < > 。

          由于 ASCII 使用一個字節(jié)(7 位表示字符,1 位表示傳輸奇偶控制),所以它只能表示 128 個不同的字符。這些字符中有 32 個被保留作為其他控制目的使用。

          ASCII 的最大的缺點(diǎn)是,它排除了非英文字母。

          ASCII 今天仍然在廣泛使用,尤其是在大型計(jì)算機(jī)系統(tǒng)中。

          如需深入了解 ASCII,請查看完整的 ASCII 參考手冊。


          在 Windows 中:ANSI

          ANSI(也稱為 Windows-1252),是 Windows 95 及其之前的 Windows 系統(tǒng)中默認(rèn)的字符集。

          ANSI 是 ASCII 的擴(kuò)展,它加入了國際字符。它使用一個完整的字節(jié)(8 位)來表示 256 個不同字符。

          自從 ANSI 成為 Windows 中默認(rèn)的字符集,所有的瀏覽器都支持 ANSI。

          如需深入了解 ANSI,請查看完整的 ANSI 參考手冊。


          在 HTML 4 中:ISO-8859-1

          由于大多數(shù)國家使用 ASCII 以外的字符,在 HTML 2.0 標(biāo)準(zhǔn)中,默認(rèn)的字符編碼更改為 ISO-8859-1。

          ISO-8859-1 是 ASCII 的擴(kuò)展,它加入了國際字符。與 ANSI 一樣,它使用一個完整的字節(jié)(8 位)來表示 256 個不同字符。

          如果 HTML 4 網(wǎng)頁使用了不同于 ISO-8859-1 的字符集,則需要在 <meta> 標(biāo)簽中指定,如下所示:

          實(shí)例

          <metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-8">

          如需深入了解 ISO-8859-1,請查看完整的 ISO-8859-1 參考手冊。


          在 HTML5 中:Unicode(UTF-8)

          由于以上所列的字符集是有限的,在多語言環(huán)境中是不兼容的,所以 Unicode 聯(lián)盟(Unicode Consortium)開發(fā)了 Unicode 標(biāo)準(zhǔn)(Unicode Standard)。

          Unicode 標(biāo)準(zhǔn)覆蓋了(幾乎)所有的字符、標(biāo)點(diǎn)符號和符號。

          Unicode 使文本的處理、存儲和運(yùn)輸,獨(dú)立于平臺和語言。

          HTML5 中默認(rèn)的字符編碼是 UTF-8。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          當(dāng)瀏覽器在網(wǎng)頁中檢測到 ISO-8859-1 時,通常默認(rèn)為 ANSI,因?yàn)槌?ANSI 有 32 個額外的字符這一點(diǎn),其他方面 ANSI 基本等同于 ISO-8859-1。

          HTML5 中默認(rèn)的字符集是 UTF-8。

          所有的 HTML 4 處理器都支持 UTF-8,所有的 HTML5 和 XML 處理器都支持 UTF-8 和 UTF-16。


          主站蜘蛛池模板: 午夜影院一区二区| 国产精品合集一区二区三区| 国产激情无码一区二区三区| 亚洲av成人一区二区三区在线播放| 国产精品亚洲一区二区在线观看| 国产精品一区二区久久精品涩爱| 亚洲一区二区观看播放| 交换国产精品视频一区| 老鸭窝毛片一区二区三区| 亚洲AV无码一区二区二三区软件 | 亚洲国产精品一区第二页| 伊人激情AV一区二区三区| 国产裸体舞一区二区三区| 国产福利电影一区二区三区,免费久久久久久久精 | 无码少妇丰满熟妇一区二区 | 无码人妻aⅴ一区二区三区有奶水| 任你躁国产自任一区二区三区| 夜夜精品无码一区二区三区| 亚洲视频一区二区| 亚州日本乱码一区二区三区| 精品性影院一区二区三区内射 | 日本人真淫视频一区二区三区| 日韩一区二区三区射精| 日本一区二区三区久久| 国产成人av一区二区三区在线| 国产一区二区在线观看app| 国产精品亚洲专一区二区三区| 久久国产精品视频一区| 国产乱子伦一区二区三区| 在线视频一区二区三区| 国产在线精品一区二区三区不卡| 日本一区二区三区不卡在线视频| 亚洲中文字幕无码一区| 国产在线精品观看一区| 日韩精品一区二区三区老鸭窝| 人妻免费一区二区三区最新| 色综合视频一区二区三区| 亚洲国产国产综合一区首页| 无码人妻精品一区二区三| 夜色阁亚洲一区二区三区| 国产精品亚洲一区二区三区久久|