derric.org

画像のような見た目のフォントをCSSで頑張って表現してみる

| トラックバック(1)

SEO的な理由も多少ありますが、
個人的に、テキストであってほしいところが画像になっているために
テキストとしてコピペできないというのがきらいなので、
あくまでテキスト+CSSでどこまで画像のような見た目に近づけるか試してみました。

目標はこんな感じ。
画像で作ったロゴ

で、テキストの元の状態はこんな感じ。"Verdana"をあてています。
テキストの元の状態

まずはフォントの種類を変えてみます。
フォントの種類を変えてしまえば何だってできそうですが、
いろんなフォントがどのコンピュータにも入ってるわけではないし、
フォントデータをWebページに埋め込む方法もいまだに統一フォーマットがありません。
>> ウェブで任意の書体を使う方法まとめ

というわけで、一番使っている人の多いWindows標準フォントをベースに決めます。
今回は、太字は"Arial Black"、細字は"Gulim"を使ってみました。
適用するとこんな感じです。フォントごとにフォントサイズを微妙に変えています。
フォントの種類を変えてみる

これだけでも大分見た目は変わりますが、さすがに画像っぽくはないです。
ポイントは文字間の間隔でしょう。
CSSでは、letter-spacing で文字の間隔をコントロールできます。
試しに、文字の間隔を「0(標準)」から「-0.1em」に変更してみます(※負の値を指定可能)。
ちなみに、letter-spacing で指定した値は、文字の右側に対して有効です。左側の開始位置は変わりません。
こんな感じになります。
文字の間隔を変えてみる

かなりそれらしくなってきましたが、何というか、文字によって詰まり方が異なるのでバランスが悪いです。
そこで、1文字ごとにspanでくくってclass名を振り、1文字ごとに文字の間隔を調整してみます。
letter-spacing は小数点第2位まで指定してもちゃんと反映されるので、微調整が可能です。
こんな感じになります。(最終形です)
文字の間隔を1文字ごとに微調整する

うん、いい感じ。
テキストなので、リンク文字として使用してロールオーバーで色を変える場合も、
画像を読み込まずCSSだけで処理されるので動作も軽いです。

ただ怖いのが、指定したフォントが適用されない場合や、MacやiPhoneなどで見る場合。

Macで見る人の場合、"Arial Black"は標準で入っているらしいのですが、
sans-serif系のフォントで最もメジャーなのは"helvetica"シリーズらしいので、
念のため"Arial Black"の後ろに"Helvetica Black"を指定しておきます。
また、"Gulim"はMacにはないので、統一性を考慮して"Helvetica Light"を指定しておきます。
ただ、もしかしたら"Helvetica Light"がない場合もあるかもしれないので、
保険で"Chicago"も指定しておきます。
Macは実機がないので未検証です。

iPhoneの場合、"Arial Black"は入っているのでいいとして、
"Gulim"はやはりなく、"Helvetica Light"に置き換えることになります。
ただ、実際に見てみても反映されてない。。。もう少し調べてみます。

最悪、"Arial Black"や"Gulim"のないWindows機で表示するとこんな感じになります。
フォントがなく、文字間隔だけ変更される

まぁ、読めないことないから、これでよしとしよう。
まじめにやるならjsでフォントチェックしてコントロールできるわけだし。

最終的なソースはこんな感じです。

HTML

<h1 id="blog-name">
    <span class="blog-name-thick">
        <span class="blog-name-1">d</span>
        <span class="blog-name-2">e</span>
        <span class="blog-name-3">r</span>
        <span class="blog-name-4">r</span>
        <span class="blog-name-5">i</span>
        <span class="blog-name-6">c</span>
    </span>
    <span class="blog-name-thin">
        <span class="blog-name-7">.</span>
        <span class="blog-name-8">o</span>
        <span class="blog-name-9">r</span>
        <span class="blog-name-10">g</span>
    </span>
</h1>

CSS

#blog-name {
    font-size: 36pt;
    line-height: 0;
}
.blog-name-thick {
    font-family: "Arial Black","Helvetica Black";
}
.blog-name-thin {
    font-family: "Gulim","Helvetica Light","Chicago";
    font-size: 37pt;
}
.blog-name-1 { letter-spacing: -0.08em; }
.blog-name-2 { letter-spacing: -0.08em; }
.blog-name-3 { letter-spacing: -0.02em; }
.blog-name-4 { letter-spacing: -0.05em; }
.blog-name-5 { letter-spacing: -0.08em; }
.blog-name-6 { letter-spacing: -0.17em; }
.blog-name-7 { letter-spacing: -0.21em; }
.blog-name-8 { letter-spacing: -0.12em; }
.blog-name-9 { letter-spacing: -0.13em; }
.blog-name-10 { letter-spacing: -0.10em; }

ちなみに、line-height: 0; は、フォントの変更によって生じる
余分な上余白、下余白を無効にするために指定しています。

おまけ:
iPhoneのフォントについて参考にしたページ。
>> iPhone & iPhoneアプリのフォント

以上。

トラックバック(1)

トラックバックURL: http://tech.derric.org/mt/mt/mt-tb.cgi/17

bracciale love imitazione cartier - bracciale love imitazione cartier (2015年9月21日 22:19)

Appreciation to my father who told me regarding this weblog, this website is ... 続きを読む

ページトップへ