CSS中的字体样式双倍高度的文本和双倍宽度的文字(css for double height tex

2019-06-28 08:09发布

任何一个可以帮我做在CSS双倍高度的文本和字体样式双倍宽度的文本(像在点阵打印机),而无需使用任何图像。

任何代码比这等?

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

我期待下面是。

谢谢。

Answer 1:

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/已更新。

希望能帮助到你。



Answer 2:

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%; 您双倍宽度的文本到您的布局中抑制它。

创建自己的字体

否则,自己编辑字体。 使用类似的工具字体的创造者 。 只需操作规模,并保存2名新的字体,一个200%的宽度,以及一个用200%的高度。 把他们变成字体松鼠和引用所有3独特@font-face字体家庭。



文章来源: css for double height text and double width text in font style