?
This document uses PHP Chinese website manual Release
font-stretch:normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
默認值:normal
適用于:所有元素
繼承性:有
動畫性:是
計算值:指定值
normal:正常文字寬度
ultra-condensed:比正常文字寬度窄4個基數(shù)。
extra-condensed:比正常文字寬度窄3個基數(shù)。
condensed:比正常文字寬度窄2個基數(shù)。
semi-condensed:比正常文字寬度窄1個基數(shù)。
semi-expanded:比正常文字寬度寬1個基數(shù)。
expanded:比正常文字寬度寬2個基數(shù)。
extra-expanded:比正常文字寬度寬3個基數(shù)。
ultra-expanded:比正常文字寬度寬4個基數(shù)。
文字的拉伸是相對于瀏覽器顯示的字體的正常寬度。
對應的腳本特性為fontStretch。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-8.0 | 2.0-8.0 | 4.0-43.0 | 3.1-8.1 | 15.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0 |
9.0+ #1 | 9.0+ #1 |
已支持font-stretch,但顯示效果與正常文字并無不同。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>font-stretch_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> p{margin:0;font-size:80px;font-weight:bold;background:#ddd;width:30px;} .test .normal p{font-stretch:normal;} .test .condensed p{font-stretch:condensed;} .test .ultra-condensed p{font-stretch:ultra-condensed;} .test .extra-condensed p{font-stretch:extra-condensed;} .test .semi-expanded p{font-stretch:semi-expanded;} .test .expanded p{font-stretch:expanded;} .test .ultra-expanded p{font-stretch:ultra-expanded;} .test .extra-expanded p{font-stretch:extra-expanded;} .test .semi-condensed p{font-stretch:semi-condensed;} </style> </head> <body> <ul class="test"> <li class="normal"> <strong>normal</strong> <p>a</p> </li> <li class="condensed"> <strong>condensed</strong> <p>a</p> </li> <li class="ultra-condensed"> <strong>ultra-condensed</strong> <p>a</p> </li> <li class="extra-condensed"> <strong>extra-condensed</strong> <p>a</p> </li> <li class="semi-expanded"> <strong>semi-expanded</strong> <p>a</p> </li> <li class="expanded"> <strong>expanded</strong> <p>a</p> </li> <li class="ultra-expanded"> <strong>ultra-expanded</strong> <p>a</p> </li> <li class="extra-expanded"> <strong>extra-expanded</strong> <p>a</p> </li> <li class="semi-condensed"> <strong>semi-condensed</strong> <p>a</p> </li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例