月別アーカイブ: 2012年5月

ロゴを和文フォントにしてCSS3のWebフォントで表示するデモを作ってみた。


ロゴを和文フォントにしてCSS3のWebフォントで表示するデモを作ってみた。

デモ画面

「欧文」ではなく「和文」フォントなところがポイント。
一文字づつ書き出したのでHTMLソースは冗長気味だけど、
一文字あたり1~3Kと比較的軽めにできた。
今後、企業ロゴもベクター画像化する流れが来るかもしれないしね。

画像との違いは、ベクター画像と同等なのでどこまで拡大しても綺麗なことと、
文字自体がテキストとしてコピペできる部分。

せっかくHTML5+CSS3で記述したのに、
IE6でも表示できるようにしてしまっている点は職業病。

もちろんスマホで拡大しても超キレイですよ。

ちなみの和文フォントの作り方を大まかに言うと、
①イラレでロゴを作成
②ttEditという和文フォント作成ソフトで新規フォント作成。
③Ctrl+T>ロゴの該当文字をフォームに入力+ラジオボタンの「文字」を選択
④イラレからコピペ。
⑤エクスポートの「1文字Webフォント」でWeb用に書き出す。
以上
※ただし、エクスポートされるサンプルHTMLは、IEでうまく表示されなかったため、別の方法にしました。

▼ttEditの使用方法の参考URL
TTEditのすすめ
http://homepage2.nifty.com/upright/ttedit.html
手書きフォントの作り方まとめ : TTEdit簡単マニュアル(1)
http://shodoka.com/world/modules/d3blog/details.php?bid=51

ソフトさえあれば超簡単。
IE6、7などでも表示できるようにしてあるため、
HTML5ライクなのにソースが冗長になっているのはご愛嬌ということで。

▼具体的なソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Webフォント表示デモ(ロゴフォント化計画)</title>
<style type="text/css">

@font-face {
font-family: '東';
src: url('./fonts/to.eot');
}
@font-face {
font-family: '東';
src:
url('./fonts/to.woff') format('woff'),
url('./fonts/to.ttf')  format('truetype'),
url('./fonts/to.svg')  format('svg');
}
@font-face {
font-family: '京';
src: url('./fonts/kyo.eot');
}
@font-face {
font-family: '京';
src:
url('./fonts/kyo.woff') format('woff'),
url('./fonts/kyo.ttf')  format('truetype'),
url('./fonts/kyo.svg')  format('svg');
}
@font-face {
font-family: 'ホ';
src: url('./fonts/ho.eot');
}
@font-face {
font-family: 'ホ';
src:
url('./fonts/ho.woff') format('woff'),
url('./fonts/ho.ttf')  format('truetype'),
url('./fonts/ho.svg')  format('svg');
}
@font-face {
font-family: 'ゲ';
src: url('./fonts/ge.eot');
}
@font-face {
font-family: 'ゲ';
src:
url('./fonts/ge.woff') format('woff'),
url('./fonts/ge.ttf')  format('truetype'),
url('./fonts/ge.svg')  format('svg');
}

p.logo{
margin:16px 0 32px;
font-size:600%;
color:#036;
}

p.logo span.logo_to {
font-family: "東";
}

p.logo span.logo_kyo {
font-family: "京";
}

p.logo span.logo_ho {
font-family: "ホ";
}

p.logo span.logo_ge {
font-family: "ゲ";
}

</style>
</head>
<body>
<p class="logo"><span class="logo_to">東</span><span class="logo_kyo">京</span><span class="logo_ho">ホ</span><span class="logo_ge">ゲ</span><span class="logo_ho">ホ</span><span class="logo_ge">ゲ</span></p>
</body>
</html>

ちなみに「東京ホゲホゲ」ロゴはイラレで適当に作ったオリジナルです。