国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS3 字體

With CSS3, web designers are no longer forced to use only web-safe fonts


CSS3 @font-face 規(guī)則

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

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

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

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

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


瀏覽器支持

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

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),然后指向該字體文件。

lamp提示:URL請使用小寫字母的字體,大寫字母在IE中會產(chǎn)生意外的結(jié)果

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

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf')
		,url('Sansation_Light.eot'); /* IE9 */
}

div
{
	font-family:myFirstFont;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字體.</p>

<div>
使用CSS3,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體
</div>

</body>
</html>

運(yùn)行實例 ?

點擊 "運(yùn)行實例" 按鈕查看在線實例


使用粗體文本

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

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
@font-face
{
	font-family: myFirstFont;
	src: url(sansation_light.woff);
}

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

div
{
	font-family:myFirstFont;
}
</style>
</head>
<body>

<div>
	使用CSS3,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體。
</div>

<p><b>注意:</b> Internet Explorer 8以及更早版本的瀏覽器 @font-face rule.</p>

</body>
</html>

運(yùn)行實例 ?

點擊 "運(yùn)行實例" 按鈕查看在線實例

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

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

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


CSS3 字體描述

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

描述符描述
font-familyname必需。規(guī)定字體的名稱。
srcURL必需。定義字體文件的 URL。
font-stretch
  • normal

  • condensed

  • ultra-condensed

  • extra-condensed

  • semi-condensed

  • expanded

  • semi-expanded

  • extra-expanded

  • ultra-expanded

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

  • italic

  • oblique

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

  • bold

  • 100

  • 200

  • 300

  • 400

  • 500

  • 600

  • 700

  • 800

  • 900

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