クロスブラウザでフォントサイズを統一したい

Question

YUI 2: Fonts CSSを使ってクロスブラウザでフォントサイズを統一しようとしたのですが、うまくいきません。下記のようではいけないのでしょうか？

またＷＥＢ上からダウンロードするのでアップロードしないと適応されないのでしょうか？
それともＷＥＢにつながっていればローカルでも良いのでしょうか？

http://sample1.digi2.jp/kindergarten/plan.html

think49 · Accepted Answer

#3 補足URLを読みました。text-align: justify の設定初期値のアルゴリズムはUA依存であり、全ブラウザで同じ表示にする事は出来ません。
http://hp.vector.co.jp/authors/VA022006/css/text.html#text-align
http://www.y-adagio.com/public/standards/tr_css2/text.html#alignment-prop

UA依存性をなくす為に「CSS Text Module Level 3」で text-justify が定義されていますが、2013/11/17現在の全ブラウザでは使用できません。
http://www.w3.org/TR/css3-text/#text-justify-property

また、プロポーショナルフォントの横幅はフォント依存なので全環境で縦の行数を揃える場合は固定幅フォント(等幅フォント)を指定する必要があります。
http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%9D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

ブラウザのフォントサイズはユーザCSSによってクライアント側で自由に変更できるのが実情です。
フォントサイズが変更されても正しく見えるように制作するのが現実的だと思います。
http://www.smbc.co.jp/accessibility/guidelines/guideline_18.html

taloo · Answer

>No.3お礼
letter-spacingが原因であって、フォントサイズが原因ではありません。

1px未満の指定はブラウザ依存です。（四捨五入、切り上げ、切り捨て、無視）
letter-spacingの場合、IEは0pxまたは0.05pxで表示されているようですし、
Firefoxは1px以上（規定値のnormalが適用されているため、ブラウザのデフォルト値）で表示されているようです。

どういう理屈なのかわかりませんが、emで指定すれば結果的に1px未満になっていてもブラウザごとで同じ結果になるようですので、
letter-spacing: 0.003125em
としておけば、Firefox、IEともに0.05px（推定）になるようです。
しかしemで指定しても計算結果が1px未満の指定は環境依存である事は変わりません。
現在は結果的に同じになっていても、将来のバージョンアップで変わる可能性もあります。

なお、font-family（インストール済みフォント）やword-spacing、ブラウザ設定のフォントサイズも影響しますので、環境依存を越えて完全に一致させるのは不可能、または非常に困難です。

taloo · Answer

SafariとFirefoxでは*{font-size:16px}で"統一"されています。（YUIに関係なくですが）

どういう表示になれば「統一」なのかはわかりませんが、
websaitojisakuさんが期待する「統一」というのを、CSSのルールに則って書いてください。

taloo · Answer

>うまくいきません。
うまくいかないのはYUIを読み込んでないからではないですかね。

>またＷＥＢ上からダウンロードするのでアップロードしないと適応されないのでしょうか？
>それともＷＥＢにつながっていればローカルでも良いのでしょうか？

YUIはCDNサービスもあります。
http://developer.yahoo.com/yui/articles/hosting/

読み込み方法はHTMLのルールに従ってください。

ORUKA1951 · Answer

完全には無理です。
　スマホのように高解像度では小さくなりますし・・

ウェブデザインを学ばれているようですが、フォントサイズは、著者側からは指定しないほうが良いです。
　せいぜい、%(em)指定しておく程度が良いです。
h1{font-size:160%;}
h2{font-size:140%;}
div.aside{font-size:95%;}
・・とか
ウェブは、「どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。」のですから、ＯＳもブラウザもフォントも異なり、ユーザーの視力も異なるのですから、「どのようなフォントサイズで見ても、その情報を利用できるようにする!!!」のが基本です。視覚弱者の方がフォントを大きくして閲覧すると崩れるサイトとか、同じような色調、コントラストに低いページなども見かけますが、好ましくありません。
　現在のウェブ標準とは、HTML4.01strict,XHTML1.0,XHTML1.1、CSS2.1、WAIなどを言いますが
　⇒ウェブ標準 - Wikipedia( http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E6%A8%99%E6%BA%96 )
　⇒Web Content Accessibility Guidelines - Wikipedia( http://ja.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines )
　⇒WCAG 2.0 解説書 [原題：Understanding WCAG 2.0]( http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/UNDERSTANDING-WCAG20/index.html )

クロスブラウザでフォントサイズを統一したい

#3 補足URLを読みました。

>No.3お礼

SafariとFirefoxでは*{font-size:16px}で"統一"されています。

>うまくいきません。

完全には無理です。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング