HOME > WEB > WebフォントとTypeSquareをtext-shadowで疑似アンチエイリアス
つぶやく
WebフォントとTypeSquareをtext-shadowで疑似アンチエイリアス

ちょいと仕事が落ち着いてきたから自由研究などw

前にお試しでWebフォントを使ってみたところ、いまいちアンチエイリアスが微妙で、ちょっとかくかくした感じになった。
というか、こないだ@plus9heaven氏との会話で気づいたんだけど、そのアンチエイリアスが微妙なのはやっぱりWindowsだけだったのね…。Macでは自動でアンチエイリアスがかかるからそれなりに表示されてた。

で、そこを何とかごまかせないかなぁとGoogle大先生に聞いてみたら、CSS3のtext-shadowを使ってやってる方がいた。
早速やってみることにshine

やり方としては、まずCSSにアンチエイリアス用のクラスを追加。

 

.tShadow-aa {
text-shadow:0px 0px 1px rgba(150,150,150,.6);
}

rgba値(Red/Green/Blue/Alpha)を変えることで結構雰囲気が変わるから、いろいろ試す必要があるかな。

あとはそのクラスを使いたいとこに適用させる。

<div class="font-migmix tShadow-aa">あいう・・・</div>

んでは前回も使ったフォントで

【MigMix そのまま】

 

あいうえお かきくけこ さしすせそ
阿意鵜絵緒 火機九卦子 差詩巣背祖
1234567890
abcdefghijklmnopqrstuvwxyz
!"#$%&()
㌔ ㍑ ☂ ♡

味噌オロチョン@北海道ラーメン 魚らん坂。
麺は大好きな縮れ中太卵麺。割とマイルドめな辛さに濃い味付けの柔らかチャーシューが◎。
[メモ]大盛無料、14時半まで禁煙、次回味噌酸辣麺。

【MigMix text-shadowによるアンチエイリアス】

あいうえお かきくけこ さしすせそ
阿意鵜絵緒 火機九卦子 差詩巣背祖
1234567890
abcdefghijklmnopqrstuvwxyz
!"#$%&()
㌔ ㍑ ☂ ♡

味噌オロチョン@北海道ラーメン 魚らん坂。
麺は大好きな縮れ中太卵麺。割とマイルドめな辛さに濃い味付けの柔らかチャーシューが◎。
[メモ]大盛無料、14時半まで禁煙、次回味噌酸辣麺。

(Macな人は画像で migmix.png )


おおぉ、なかなか読みやすくなるじゃんflair(個人的見解)
これなら使えるかもnote

その後見つけた油性マジックみたいなフォントでは

【たぬき油性マジック そのまま】

あいうえお かきくけこ さしすせそ
阿意鵜絵緒 火機九卦子 差詩巣背祖
1234567890
abcdefghijklmnopqrstuvwxyz
!"#$%&()
㌔ ㍑ ☂ ♡

味噌オロチョン@北海道ラーメン 魚らん坂。
麺は大好きな縮れ中太卵麺。割とマイルドめな辛さに濃い味付けの柔らかチャーシューが◎。
[メモ]大盛無料、14時半まで禁煙、次回味噌酸辣麺。

【たぬき油性マジック text-shadowによるアンチエイリアス】

あいうえお かきくけこ さしすせそ
阿意鵜絵緒 火機九卦子 差詩巣背祖
1234567890
abcdefghijklmnopqrstuvwxyz
!"#$%&()
㌔ ㍑ ☂ ♡

味噌オロチョン@北海道ラーメン 魚らん坂。
麺は大好きな縮れ中太卵麺。割とマイルドめな辛さに濃い味付けの柔らかチャーシューが◎。
[メモ]大盛無料、14時半まで禁煙、次回味噌酸辣麺。

(Macな人は画像で tanukimagick.png )


fmfm、これも読みやすいなぁ(あくまで個人的見解)

あと、最近ちまたで話題のTypeSquarepc
フォントの有名ベンダーモリサワが始めたWebフォントサービスなんだけど、今年いっぱいは無料だからおいらも登録。

どれでもよかったんだけど、まぁせっかくなのでデザインフォントでもw

【プリティ桃 そのまま】

あいうえお かきくけこ さしすせそ
阿意鵜絵緒 火機九卦子 差詩巣背祖
1234567890
abcdefghijklmnopqrstuvwxyz
!"#$%&()
㌔ ㍑ ☂ ♡

味噌オロチョン@北海道ラーメン 魚らん坂。
麺は大好きな縮れ中太卵麺。割とマイルドめな辛さに濃い味付けの柔らかチャーシューが◎。
[メモ]大盛無料、14時半まで禁煙、次回味噌酸辣麺。

【プリティ桃 text-shadowによるアンチエイリアス】

あいうえお かきくけこ さしすせそ
阿意鵜絵緒 火機九卦子 差詩巣背祖
1234567890
abcdefghijklmnopqrstuvwxyz
!"#$%&()
㌔ ㍑ ☂ ♡

味噌オロチョン@北海道ラーメン 魚らん坂。
麺は大好きな縮れ中太卵麺。割とマイルドめな辛さに濃い味付けの柔らかチャーシューが◎。
[メモ]大盛無料、14時半まで禁煙、次回味噌酸辣麺。

(Macな人は画像で prittymomo.png )


んー、これも若干読みやs(略
まぁデザインフォントだからそもそもって話もあるけどねwww

とはいえ、IE9以前が対応してない時点で現時点ではやっぱりOKにはならないんだなー、これが。。。
あと、たぬきフォントだけIE(10も)でNGだった。migmixは大丈夫だからフォント容量の問題かな?8M超えてるしwww
 



最後にTwitterで拾った話題から。
絵文字を入れたフォントがあったからいただいてきたんだけど、これが16KBと軽いsign01
Webフォントとして使うとこんな感じ

【pulsarjs.ttf】

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

これ、いけるよね?
ちなみにコピペしたりソース見てもらえば分かるけど、上段が小文字のa~z、下段が大文字のA~Z。
色もつけちゃえば結構使い勝手よいと思うconfidentフォントファイルを1回読み込めば使い回しできるわけだし。
問題は使いたい絵文字とアルファベットの対応表を手元に置いとかないとだけどw

以上、(今のところ実用予定はないw)自由研究でしたmemo

※一応規約読んだつもりだけど、このフォントはWebフォントとして使っちゃだめでしょ、ってのがあったら突っ込みください

1件のトラックバック

コメントを残す



このページのトップへ