前端问答社区

使用css如何拉伸字体?

Javan 发布于 7个月前 分类:CSS

CSS 2D

可以使用CSS 2D变换。几乎所有的现代浏览器都支持这一功能,包括IE9 +。例子:

<p>I feel like <span class="stretch">stretching</span>.</p>
span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

CSS3 font-stretch

font-stretch: wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit;

wider 使得文本更宽
narrower 使得文本窄
ultra-condensed 使文本窄得不能再窄
extra-condensed 指定紧缩程度第二大的字体
condensed 指定略微紧缩程度第二大的字体
semi-condensed 指定略微紧缩的字体
normal 指明字体既不紧缩也不加宽
semi-expanded 指定略微加宽的字体
expanded 指定加宽的字体
extra-expanded 指定加宽程度第二大的字体
ultra-expanded 指定加宽程度最大的字体
inherit 指定该属性与元素父项的属性采用相同的计算值

回复

共0条回复 我来回复
  • 暂无回复内容