全国 1000万 23人のファンのみなさまお疲れさまです。
VAXだず。
続行中です。
先日 M-1が久々にありましたが
とろサーモン贔屓の僕は納得がいっていません。
くっ。。。
とろサーモンとは?
( ウィキぺディア参照 )
あらびき団からずっと注目しています。
早く復活しねーかな。。。
そんなことはさておき、
年末に向けてみなさまいろいろとお忙しいMAXだと思われます。
そんな中テキスト文字をアウトラインとっては
画像にしてー
文言修正してと言われては修正しー
そんなのめんどくさいず！
ってときは
webフォントを使って css でやっちゃった方が楽なときがあります。
※フリーフォント以外ではライセンス等ありますので利用はご自身で管理してください。(>_<)
早速ですが
今回はサーバーにアップして css で指定する方法でいきます。
1.ファイルの作成
こちらを使用して ファイルを作成します。
WOFFコンバータ
まずは使いたい日本語フリーフォントをダウンロード。
なんとなく目についたこちらを今回は使用します。
手書きフォント「殴り書きクレヨン」
woffコンバータを利用してフォントファイルを作成します。
するとこのように２つのファイルが作成されます。
2.ファイルのアップロード
変換したファイルをサーバーにアップします。
ブラウザによって使うファイルが異なりますので
○○.eot
○○.ttf または ○○.otf
○○.woff
この3種類のファイルをアップします。
3.css
あとは
cssにて
パスの指定をして font-family で 使えるように設定します。
例では fonts フォルダへアップしています。
@font-face {
font-family: "crayon_1";
src: url("fonts/crayon_1.eot?") format('eot'),
url("fonts/crayon_1.woff") format('woff'),
url("fonts/crayon_1.ttf") format('truetype');
}
url("fonts/crayon_1.ttf") format('truetype');
こちらは
.otf の場合は
url("fonts/crayon_1.otf") format('opentype');
こんな感じになります。
ファイルの種類を参考に。。。
基本フォントをこいつにしたいなら
body,html{ font-family: "crayon_1"; }
こうやっちゃいましょう。
demo
なんかすごい圧がありますが、、、
ここで補足ですが
IEだと日本語フォントは確実に line-heightがイカレています。
(上に引っ張られて下に余白が入る感じです。)
なので同じクラスなどで IE 用の css ハックなどで line-height を調節してください。
これに関してはまたどこかで僕の怒りをぶつけます。
いっつも泣かされるので一度は泣いてほしいです。
毎日お弁当作ってくれていることが当たり前だと思うなよっていうあれです。
フォントに関連してはこちらの記事もどうぞ
いまさら游ゴシックの魅力にハマる。 游ゴシックを使用したサイトまとめ
今年もあとわずかですが頑張って乗り越えましょう ず。
