blog

BLOGブログ

ARCHIVES

VAX

画像でファイルを作っては修正してるあなた!たまにはwebフォントを使ってみようず

20151207001_main

 

全国 1000万 23人のファンのみなさまお疲れさまです。

 

VAXだず。
続行中です。

 

 

先日 M-1が久々にありましたが
とろサーモン贔屓の僕は納得がいっていません。

くっ。。。
とろサーモンとは?
( ウィキぺディア参照 )

あらびき団からずっと注目しています。

 

 

早く復活しねーかな。。。

 

 

 

そんなことはさておき、
年末に向けてみなさまいろいろとお忙しいMAXだと思われます。

 

そんな中テキスト文字をアウトラインとっては
画像にしてー

 

文言修正してと言われては修正しー
そんなのめんどくさいず!
ってときは

webフォントを使って css でやっちゃった方が楽なときがあります。
※フリーフォント以外ではライセンス等ありますので利用はご自身で管理してください。(>_<)

 

早速ですが

今回はサーバーにアップして css で指定する方法でいきます。

 

 

1.ファイルの作成


 

 

こちらを使用して ファイルを作成します。

 

WOFFコンバータ
まずは使いたい日本語フリーフォントをダウンロード。

なんとなく目についたこちらを今回は使用します。

 

手書きフォント「殴り書きクレヨン」

 

 

woffコンバータを利用してフォントファイルを作成します。

 

20151207001

 

するとこのように2つのファイルが作成されます。

 

20151207002

 

 

 

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 を調節してください。

これに関してはまたどこかで僕の怒りをぶつけます。

 

いっつも泣かされるので一度は泣いてほしいです。
毎日お弁当作ってくれていることが当たり前だと思うなよっていうあれです。

 

 

フォントに関連してはこちらの記事もどうぞ

 

いまさら游ゴシックの魅力にハマる。 游ゴシックを使用したサイトまとめ

 

 
今年もあとわずかですが頑張って乗り越えましょう ず。

この人が書いた記事

VAXの記事をもっと見る

関連する記事