css - tag - html5 font




css用于双精度文本和双精度文本的字体样式 (2)

任何人都可以帮助我在CSS中使用字体样式(如点阵打印机)中的双高度文本和双宽度文本,而不使用任何图像。

除此之外的任何代码?

heading{
   font-weight:bold; 
   width:200%;
}

我期望如下。

谢谢。


OP,

更新的小提琴,其中包括用于transformtransform-origin所有供应商前缀: http : //jsfiddle.net/LTaAy/1/

看到这个小提琴: http : //jsfiddle.net/LTaAy/

IMG

HTML

  <p class="doubleWidth">DOUBLE WIDTH</p>
  <p class="doubleHeight">Double Height</p>
  <p class="doubleWidthandHeight">Double Width and Height</p>

CSS

p {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}
p.doubleWidth {
    -webkit-transform: scaleX(2);
    -moz-transform: scaleX(2);
}
p.doubleHeight {
    -webkit-transform: scaleY(2);
    -moz-transform: scaleY(2);
}
p.doubleWidthandHeight {
    -webkit-transform: scaleX(2) scaleY(2);
    -moz-transform: scaleX(2) scaleY(2);
}

我只包括2个供应商的前缀,但是他们应该根据需要应用。 - 只有真正的上面,这个小提琴http://jsfiddle.net/LTaAy/1/已经更新。

希望能帮助到你。


CSS变换:缩放

检查一下变换比例,应该这样做:

http://www.css3files.com/transform/

-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-ms-transform:scale(2,1);
-o-transform:scale(2,1);
transform:scale(2,1);

letteringjs.com可用于通过自动跨度注入独立地将这个CSS应用于每个字母,因为如果整个跨度是文本跨度被拉伸的话,您可能会遇到布局问题。

另外,你也许能够width: 50%; 在你的双倍宽度的文本来限制它在你的布局。

创建你自己的字体

否则你自己编辑字体。 使用像Font Creator这样的工具。 只需操纵比例尺,并保存2个新的字体,一个200%的宽度,一个200%的高度。 把它们投入到字体松鼠中,并将所有3个引用为唯一的@font-face字体系列。





typography