ウェブサイトのフォントをかっこよく

質問

サイトのフォントをこのサイトのようにするにはどうしたらいいですか？

http://tanaka-yusuke.com/

CSSなどでグラデーションをつけているのでしょうか？

回答No.4

tracer · ベストアンサー

XPの環境で、chrome、firefox、IE6で確認しましたが、特に変わったところはみられませんでしたよ？
ただ、擬似的なアンチエイリアスは、ドロップシャドウでできますよ。
firefoxはなぜか1px以下の座標を設定できるんですよね。バグだと思いますが。

//擬似的なアンチエイリアス例
text-shadow:0 0 1px rgba(0,0,0,0.3);

//firefoxだけ使える1px以下の座標
text-shadow:0.1px 0.1px 1px rgba(0,0,0,0.3);

ドロップシャドウを明度(hex)で指定するのではなく、黒(#000)のopacityで指定するのがミソです。
もちろん、IEなどのtext-shadowやrgbaに対応していないブラウザでは使えません。
また、元々アンチエイリアスが実装されている環境(XP以外といってもいいかも）は、この擬似アンチエイリアスは邪魔になるだけなので、XPだけに有効すにする仕組みが必要になると思います。使いどころはかなり限定されます。

お礼

なるほど・・・。
text-shadowを座標でするんですね・・・。

ありがとうございました！！

回答No.3

Java-Java

「style.css」の中で

「font-family: '小塚ゴシック Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック','Osaka','メイリオ','Meiryo',sans-serif;」

を指定しているので、これではないでしょうか。

参考URL：

http://tanaka-yusuke.com/wp-content/themes/tys-empty-flog/style.css

補足

font-familyだけですと、自分で試したところ
アンチエイリアス処理がされていないようなんです・・・。

回答No.2

LancerVII

こんにちは。

私の環境ですと別に変わった表示のフォントが無いのですが具体的にどの部分でしょうか。

フォント関係は閲覧するクライアントにそのフォントが入っていないと思った通りの表示にはなりませんのでその影響かもしれません。

補足

あっ、本当ですね・・・
chromeでみると普通のフォントで表示されてました。

firefoxでみると表現しづらいのですが画像で書いているような
アンチエイリアスのフォントになっています。

すいません・・・色々調べていただいて・・・。

回答No.1

LancerVII

こんにちは。

リンク先のサイトのどのフォントでしょうか？

ヘッダ部分にあるTY'S・・・
だとしたらそれは画像です。

透過部分を作って、背景色が出るようにしているようです。

補足

いえ、画像のことではありません。

全体的に使用しているフォントです。
フォントをCSSで指定してもこのようにはならないのですが
CSSで背景をつけているのでしょうか？
それともJqueryなどを使用しているのでしょうか？