CSSによるフォントサイズの統一


YAHOOが提供している
Yahoo! UI LibraryのFonts CSSを利用して各ブラウザー毎のフォントサイズを統一しようとしているのですが
下記参考サイトで紹介している通りに設定をして使用したのですがどうもうまく適用されません。
■参考サイト→http://thinkit.jp/article/813/1/
ちなみにYahoo! UIのFonts CSSはローカルにデータを持たずにヤフーサーバーから直接リンクして使用しています。
そもそも使用の仕方が間違っているのでしょうか??
問題がどこにあるのかアドバイスいただけると助かります。
下記に現在テスト製作中のサイトのアドレスを記載しておきますので中身を見ていただきアドバイスいただけると助かります。


■HTML
http://sangoclip.web.fc2.com/test/

■デフォルトCSS
http://sangoclip.web.fc2.com/test/shared/css/default.css

■リセットCSS
http://sangoclip.web.fc2.com/test/shared/css/reset.css

■Yahoo! UI LibraryのFonts CSS
http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2009/03/22 20:30:24
  • 終了:2009/03/24 18:30:43

ベストアンサー

id:fut573 No.2

fut573回答回数195ベストアンサー獲得回数542009/03/23 01:52:49

ポイント40pt

この場合の上手く適用されないとはfontサイズがバラバラのままだ、ということでしょうか?

ちょっと見た感じでは、各ブラウザの別々のフォント(というかデフォルトフォントですね)が表示されている気がします。

http://f.hatena.ne.jp/fut573/20090323011524

フォントが違うと微妙に文字サイズが変化しますので、その辺が原因の可能性があります。


font-family等を設定して、表示フォントをcssで指定してみたらどうなりますか?

デフォルトcssのbodyに

font-family: フォント名;

と書き加えてみてください。

(フォント名はMS UI GothicやHiragino Kaku Gothic Proなど、OSに最初からインストールされているものを指定した方がいいと思います)

id:sango_clip

早々のご回答ありがとうございます。

ご回答いただきました通りデフォルトcssのbodyにfont-family: "MS Pゴシック", Osaka, sans-serif;

とフォントファミリーを指定し、なおかつデフォルトCSSより先にYahoo! UI LibraryのFonts CSSを読み込むように

したら問題は解決されました。ありがとうございます。

ただ一つ懸念があるのですが先にYahoo! UI LibraryのFonts CSSを読みこんでしまうと後から読み込む

デフォルトCSSで上書きされる形になりますが、この辺は特に問題ではないでしょうか?ちょっと心配です。

2009/03/23 02:49:18

その他の回答(1件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332009/03/22 21:35:01

ポイント30pt

ご質問で紹介のあったHTMLを下記ブラウザで閲覧してみましたが、きちんと適用されているようです。(右上にあるダミー・メニューのフォントサイズ、および右寄せが行われていれば良いのですよね)

WindowsXP(SP3) IE8, Firefox3, Safari3
MacOS X 10.5 Firefox3, Safari3
Ubuntu Firefox3

期待通りのリセットができないブラウザで、「ユーザースタイルシート」を設定していませんか? ご確認ください。


また、どのようなOS+ブラウザの組み合わせで不具合が出ているのか、正常に表示される場合はどの組み合わせなのかをお知らせいただけると、より的確なアドバイスができるかもしれません。

id:sango_clip

早々のご回答ありがとうございます。

正常に表示されない環境ですが

WindowsXP・Vista:IE7~IE5(IE8は問題なく表示されます)

になります。

ちなみにご回答を受けて再度検証してみた結果下記の環境は正常に

表示される事が確認できました。

Windows xp :IE 8

Windows xp :Google Chrome

Windows xp :Firefox 1.0

Windows xp :Firefox 1.5

Windows xp :Firefox 2.0

Windows xp :Firefox 3.0

Windows xp :Opera 9.2

Windows xp :Opera 8.0

Windows xp :Netscape 7.1

Macintosh X :Firefox 2.0

Macintosh X :Safari 2.0

Macintosh X :Opera 9.2

Macintosh X :Seamonkey1.1

2009/03/22 22:48:37
id:fut573 No.2

fut573回答回数195ベストアンサー獲得回数542009/03/23 01:52:49ここでベストアンサー

ポイント40pt

この場合の上手く適用されないとはfontサイズがバラバラのままだ、ということでしょうか?

ちょっと見た感じでは、各ブラウザの別々のフォント(というかデフォルトフォントですね)が表示されている気がします。

http://f.hatena.ne.jp/fut573/20090323011524

フォントが違うと微妙に文字サイズが変化しますので、その辺が原因の可能性があります。


font-family等を設定して、表示フォントをcssで指定してみたらどうなりますか?

デフォルトcssのbodyに

font-family: フォント名;

と書き加えてみてください。

(フォント名はMS UI GothicやHiragino Kaku Gothic Proなど、OSに最初からインストールされているものを指定した方がいいと思います)

id:sango_clip

早々のご回答ありがとうございます。

ご回答いただきました通りデフォルトcssのbodyにfont-family: "MS Pゴシック", Osaka, sans-serif;

とフォントファミリーを指定し、なおかつデフォルトCSSより先にYahoo! UI LibraryのFonts CSSを読み込むように

したら問題は解決されました。ありがとうございます。

ただ一つ懸念があるのですが先にYahoo! UI LibraryのFonts CSSを読みこんでしまうと後から読み込む

デフォルトCSSで上書きされる形になりますが、この辺は特に問題ではないでしょうか?ちょっと心配です。

2009/03/23 02:49:18

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません