您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 字體

CSS3 字體

此節有 155 人學習過     參與評論
通過 <a href='http://www.hugecrab.com/css/' target='_blank'><u>CSS</u></a>3,Web 設計師再也不必被迫使用“web-safe”字體了。

CSS3 @font-face 規則

在 CSS3 之前,web 設計師必須使用已在用戶計算機上安裝好的字體。

通過 CSS3,web 設計師可以使用他們喜歡的任意字體。

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

您“自己的”的字體是在 CSS3 @font-face 規則中定義的。

瀏覽器支持

屬性 瀏覽器支持
@font-face

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。

Internet Explorer 9+ 支持新的 @font-face 規則,但是僅支持 .eot 類型的字體 (Embedded OpenType)。

注釋:Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。

使用您需要的字體

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

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

實例

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

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

親自試一試

使用粗體字體

您必須為粗體文本添加另一個包含描述符的 @font-face:

實例

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

親自試一試

文件 "Sansation_Bold.ttf" 是另一個字體文件,它包含了 Sansation 字體的粗體字符。

只要 font-family 為 "myFirstFont" 的文本需要顯示為粗體,瀏覽器就會使用該字體。

通過這種方式,我們可以為相同的字體設置許多 @font-face 規則。

CSS3 字體描述符

下面的表格列出了能夠在 @font-face 規則中定義的所有字體描述符:

描述符 描述
font-family name 必需。規定字體的名稱。
src URL 必需。定義字體文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可選。定義如何拉伸字體。默認是 "normal"。
font-style
  • ormal
  • 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"。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (155人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 免费国产欧美国日产a片| 日韩国产成人精品视频| 在线看黄av免费| 国产精品亚洲综合网| 床戏有娇喘声视频大全| 182tv大香蕉| 年轻人免费观看视频| 国产老妇伦国产熟女老妇高清| 小说雯雯在工地被灌满精| 手机看片国产超清无码| 无码视频a片免费看| 草莓视频官app网页入口| 啦啦啦免费高清在线直播| 苍井空AV网址在线观看| 农村熟妇乱子伦拍拍视频| 18禁勿入网站入口永久| 国产精品欧美亚洲韩国日本久久| 父亲缓慢而坚定地进入| gogo人体gogo西西大尺度高清| 岛国av无码免费无禁网站下载| 在线一级播放| 亚洲熟妇av一区| 日日摸夜夜添夜夜添无码国产| 亚洲成av人不卡无码影片| 日本漫画天翼鸟之老3d师| japanese强vieos在线| 一到高潮就出奶水的视频| 国产精品无码一区二区在线观看| 风流妇科男医| 99精品国产高清一区二区| 欧美图亚洲色另类偷偷自拍| http://www.enjoy-our-story.com