dポイントプレゼントキャンペーン実施中!

h1をCSSでサイズ指定(px指定)しているのですが、
文字幅というか、文字間隔がブラウザごとにびっみょうに違います。
(行間や余白についてはCSSで解決済)

クロームと火狐では望みどおりの表示なんですけども、
IE8だとちょっと横に広がる傾向があるんです。

長年無視しつづけてデザインしていたのですが、
この度、デザイン上無視できない状況になりまして…。

希望は、IEでもクロームでも火狐でも、
横幅が同一になるようにしたいんです。

文字間隔をCSSで指定しても解決しないんですよね…。
これ、どうにかする方法をご存知でしたらご教授下さい!
ググッたんですが、解決しませんでした…。

A 回答 (2件)

基本的には無理です。

プラットフォームは、IE(5.5,6,7,8,9)、firefox,opera,safari,Chromeというブラウザだけじゃない、OSだってWindowsだけじゃなく、Mac,Linuxもある。ユーザーによったらフォントを拡大して見てるかも知れない。デザイン優先なら【そのための仕様である】PDFで作成すれば良いです。HTMLは、あくまで
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
 という基本を忘れちゃダメです。

 そのうえで、とりあえずご自身とクライアントの一部の環境のみ有効な方法としては、
・サイズを絶対サイズで指定すること。すなわちin,cm,pc,mm,ptを使う。(em,ex,pxを使わない)
・font-familyを指定する。--ただしそのフォントを持っていないユーザーエージェントには無効--
・letter-spacing,word-spacing(英文),layout-grid-char(IE独自,CSS3にもない)を指定する。
・または、text-align:justifyで両端ぞろえ(他のプロパティと競合する)

 ただし、いずれの対策をとっても、プラットフォームの差は完全に吸収することは出来ません。あくまで自己満足です。また、特に視覚障害者がフォントを拡大したり読みやすいフォントに変えて見たい時には崩れるなど、『どんな環境からもWebの情報を利用できるようにすべきだ』というウェブの理念からは外れることも理解したうえで試してください。
    • good
    • 0

それはフォントにまつわる問題だからどうにもならないよ。


フォント字詰めの処理は通常OSのAPIを叩くだろうけどブラウザによっては高速化するために独自の解釈で描画したりするからね。

ぶっちゃけると もうテキストで幅が云々を許容できないデザインになってしまってるなら「画像化」する以外手立てが無いよ。
なぜなら環境がちょっとでも変わるともう意図した見え方にならないって事になるからね。
windowsがターゲットなのに他のOSやデバイス(現在はこれがめんどい)だと使えるフォントもブラウザもまたバラバラになっていくからどうしてもって時は画像しかない。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!