CSS3のtransformを使ったフォントの変形

CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文に使うのは無理があるが、見出しなどには良さそう。特に@font-faceで気軽に変更できない(してもあまり効果的ではない)日本語の見出しには面白い試みなんじゃないかと思ったが、一番綺麗にしたいIE8で残念なので微妙。 Verdana Narrow? Demo: Verdana Narrow 単純に細くしたいブロックでtransform: scaleX(num);を使えば良い。 .narrow { -webkit-transform: scaleX(0.8); -moz-transform: sca

[sometk]

期待した結果を得るにはむずかしいもよう。

[glat_design]

これもうまく使ってみたいやつ /

[Falky]

Chromeでの挙動が変わった気がする。フォントが縮小されずに、letter-spacingだけが縮んだような描画になる。なぜだ！

[Lhankor_Mhy]

縦倍角は background-color を transparent じゃなくして、横半角に設定してやるとIE8でもわりと見れる。背景画像を抜きたい時は、.Chroma も一緒に設定すればなんとか。

[code404]

CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単

[diveintounlimit]

これはうまい文字いじり。

[edo_m18]

これは面白い使い方！

[juner]

ほほほう……これは面白い…… #CSS3 #font QT:hail2u.net - Weblog - CSS3のtransformを使ったフォントの変形

[blythegirls]

おおー

[hidehish]

見てる:

[hiro_y]

transformの使い方