人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: sango_clip
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS HTML UI Yahoo Yahoo!
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pahoo
●30ポイント

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

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

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


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

◎質問者からの返答

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

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

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


2 ● fut573
●40ポイント ベストアンサー

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

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

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

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


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

デフォルトcssのbodyに

font-family: フォント名;

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

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

◎質問者からの返答

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

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ