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-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.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-family | name | 必需。規(guī)定字體的名稱。 |
src | URL | 必需。定義字體文件的 URL。 |
font-stretch | ||
font-style | ||
font-weight | ||
unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"。 |
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
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)頁變得生動有趣。
語法結(jié)構(gòu):<標(biāo)簽 屬性=“值”> 內(nèi)容 </標(biāo)簽>
1、標(biāo)題標(biāo)簽< h1> - < h6>
標(biāo)題標(biāo)簽的默認(rèn)樣式是自動加粗的,字體一級標(biāo)題最大,六級標(biāo)題最小,每個標(biāo)題標(biāo)簽獨(dú)占一行。
示例:
<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>
這行代碼的意思是:
注意:雖然標(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>
如上圖控制臺所示(打開控制臺的方式: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>
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é)方程式中。
盡管上述標(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。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。