2

誰でも、画像を使用せずに、cssでフォントスタイル（ドットマトリックスプリンターのように）で2倍の高さのテキストと2倍の幅のテキストを作成するのを手伝ってくれます。

これ以外のコードはありますか？

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

私が期待するのは以下の通りです。

ここに画像の説明を入力してください

ありがとう。

4

2 に答える 2

11

OP、

transformおよびのすべてのベンダープレフィックスを含む更新されたフィドル：http transform-origin：//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/が更新されました。

それが役に立てば幸い。

于 2013-03-15T17:32:19.113 に答える
3

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%;レイアウト内でテキストを制限するために、倍幅のテキストを回避できる場合があります。

独自のフォントを作成する

それ以外の場合は、フォントを自分で編集します。FontCreatorなどのツールを使用します。スケールを操作するだけで、2つの新しいフォントを保存できます。1つは幅200％、もう1つは高さ200％です。それらをFontSquirrelにスローし、3つすべてを一意の@font-faceフォントファミリとして参照します。

フォントクリエーター-フォントの操作

于 2012-09-13T15:14:08.737 に答える