CSS 2.1 快速導覽 - 字型伸縮 font-stretch

font-stretch 性質 (property) 為 CSS 中用來設定文字字型的伸縮，有以下的關鍵字 (keyword)

  • normal
  • wider
  • narrower
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded


舉例如下
.examplenormal {
 font-stretch: normal;
}

.examplewider {
 font-stretch: wider;
}

.examplenarrower {
 font-stretch: narrower;
}

.exampleultracondensed {
 font-stretch: ultra-condensed;
}

.exampleextracondensed {
 font-stretch: extra-condensed;
}

.examplecondensed {
 font-stretch: condensed;
}

.examplesemicondensed {
 font-stretch: semi-condensed;
}

.examplesemiexpanded {
 font-stretch: semi-expanded;
}

.exampleexpanded {
 font-stretch: expanded;
}

.exampleextraexpanded {
 font-stretch: extra-expanded;
}

.exampleultraexpanded {
 font-stretch: ultra-expanded;
}


/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：text06.css
    功能：示範 CSS 2.1 樣式表的使用 
    作者：張凱慶
    時間：西元 2011 年 7 月 */


我們以下面的 HTML 文件載入
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css" 
      href="text07.css">
</head>
<body>
<div class="examplenormal">
Free your mind.
</div>
<div class="examplewider">
Free your mind.
</div>
<div class="examplenarrower">
Free your mind.
</div>
<div class="exampleultracondensed">
Free your mind.
</div>
<div class="exampleextracondensed">
Free your mind.
</div>
<div class="examplecondensed">
Free your mind.
</div>
<div class="examplesemicondensed">
Free your mind.
</div>
<div class="examplesemiexpanded">
Free your mind.
</div>
<div class="exampleexpanded">
Free your mind.
</div>
<div class="exampleextraexpanded">
Free your mind.
</div>
<div class="exampleultraexpanded">
Free your mind.
</div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：text07.html
     功能：示範 CSS 2.1 樣式表的使用 
     作者：張凱慶
     時間：西元 2011 年 7 月 -->


目前主流瀏覽器 (broswer) 可能只有 IE 9.0 支援，因此 Firefox 並沒有效果



讀者可自行將 HTML 文件以 IE 9.0 開啟測試。


中英文術語對照
性質property
關鍵字keyword
瀏覽器broswer


您可以繼續參考

JavaScript 範例

文字相關


相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁


參考資料
http://dev.w3.org/csswg/css3-fonts/
https://developer.mozilla.org/en/CSS/font-stretch
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)