CSS3 字體

2022-05-26 16:00 更新

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


CSS3 @font-face 規(guī)則

在CSS3之前,web設計師必須使用已在用戶計算機上安裝好的字體,不能夠使用離線字體,不過通過CSS3,web設計師可以使用他們喜歡的任意字體。

當您找到或購買到希望使用的字體時,可將該字體文件存放到web服務器上,它會在需要時被自動下載到用戶的計算機上。

您"自己的"的字體是在 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),然后指向該字體文件。

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

如果需要為 HTML 元素使用字體,請通過 font-family 屬性來引用字體的名稱 (myFirstFont),通過下面的實例您可以嘗試操作一下:

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

嘗試一下 ?



使用粗體文本

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

Opera Safari Chrome Firefox Internet Explorer

實例

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

嘗試一下 ?

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

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

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


CSS3 字體描述

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

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

  • condensed

  • ultra-condensed

  • extra-condensed

  • semi-condensed

  • expanded

  • semi-expanded

  • extra-expanded

  • ultra-expanded

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

  • italic

  • oblique

可選。定義字體的樣式。默認是 "normal"。
font-weight
  • normal

  • bold

  • 100

  • 200

  • 300

  • 400

  • 500

  • 600

  • 700

  • 800

  • 900

可選。定義字體的粗細。默認是 "normal"。
unicode-range unicode-range 可選。定義字體支持的 UNICODE 字符范圍。默認是 "U+0-10FFFF"。
您最好收藏或者保存好上表中的字體描述,以便您將來編程時需要用,方面查找!這將會為您省去很多寶貴的工作時間。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號