ブラウザが違っても、文字の大きさが変わらないようにする方法

Webサイトを作成しています。

tableなどを作成すると、ブラウザによって文字の大きさが変わってしまい、例えば、Chromeだと1行で収まるのに、IEで見ると文字が大きくなって改行されてしまったりします。

文字の大きさは、CSSで、

css
1font-size:14px;

のように、ピクセルで指定しています。

このように、ブラウザごとに文字の大きさの見え方が変わってしまう問題は、Webデザインをするにあたって、どのように対処するものなのでしょう？

ブラウザごとに文字の大きさが変わって、改行されてしまったりすることは、致し方ないこととしなければいけないのでしょうか？

アバウトなデザインの場合はいいのですが、特にテーブルできっちり1行にしないとどうも変になってしまう場合などが困っております。

行動規範の内容に同意します

回答5件

ベストアンサー

IEとChromeで見た目が違う

OS、フォント、ブラウザ（レンダリングエンジン）によってそれぞれフォントの描画方法が少しずつ変わります。そのため、折り返し位置が揃わないなどのことが起こります。OS、指定しているフォントが同じでも、ブラウザが違えば描画結果は変わります。（OSやフォントの違いのほうが当然「表示の差異」は大きいです）

他の回答者さんの回答にあるように、スタイルの調整やWebフォントを使って「だいたい同じ」に表示することができます。最近は特に日本語Webフォントサービスなども登場したため、比較的同じ表示にしやすくなってきました。

それ以前からの対処法としては、「文字が1文字増えるだけで改行するようなぎりぎりのレイアウトをしない」であったり、「あふれたものをボックスのoverflowで隠してしまう」、「いっそ画像にしてしまう」だったり、状況に合わせた手法で解決をしています。

投稿2016/06/18 11:29

kei344

総合スコア69625

GiveAHand

2016/06/18 12:10

kei344様ご回答ありがとうございます！結局のところ、そうなんですね。。。納得致しました。ありがとうございました！

行動規範の内容に同意します

そもそもHTMLはブラウザやOS、インストールされているフォントの状態によって変わりますので、
Word→LibreOfficeのようなちょっとした差異を許容するべきものです。
1pxのズレも許さないというなら「究極PDFという目的通りの様式があるからそっち使おう」という話になります。

この大前提を抑えた上で、出来ることを頑張っていきましょう。

Normalize.cssを入れればかなりのブラウザの差異を打ち消してほとんど同じ見た目を実現出来ます。

ブラウザで統一しても今度はフォントの都合で不可能です。
全く同じフォントが用意出来ない限り、1文字の横幅は微妙に異なってきます。
等幅フォントにすればかなり統一出来そうですが、ブラウザで表示した時超絶ダサく感じることでしょう。

妥協点としては、text-overflowを利用するくらいでしょうか。

投稿2016/06/18 00:35

編集2016/06/18 00:51

miyabi-sun

総合スコア21400

GiveAHand

2016/06/18 10:39

miyabi-sun様ご回答ありがとうございます。なるほど、text-overflowは使えますね。ありがとうございます！

行動規範の内容に同意します

OS等の環境によって使用されるフォントは変わってしまいます。
フォントが違えば詰め情報やタイプボディサイズの違いなどで
同じ領域に入る文字量も変わります。

他の方がおっしゃっているリセットCSSでHTML要素のデフォルトのスタイルを
統一したとしても、ヒラギノとメイリオでは見た目は全く変わってきます。

可能な限り同じ見た目を提供したいのであれば、Webフォントを利用することを検討されてはいかがでしょうか？
日本語のwebフォントは有料のものが多いですが、近頃は探せば無料のものもちらほら見かけます。
Google Fontsも日本語の無料Webフォントを配信しています。
Google Fontsの日本語フォント「Noto Fonts」の使い方

参考までに。

投稿2016/06/18 04:05