- ベストアンサー
ブラウザの文字表示について
現在Macにてホームページを制作しています。 Windowsで表示の確認をしていたら、 サイズの大きいテキスト箇所（画像ではない）の文字が ギザギザに表示されてしまいました。 Macでは見たことがない状況なのでびっくりしています。 元のサイズを「font-size:75%」で指定して ギザギザになるところは「font-size:150%」で指定しています。 これは、PC側の問題でCSSやJavascriptなどで表示を綺麗にしてあげることはできないのでしょうか？ どなたかお知恵を拝借させて頂けますでしょうか。 どうぞよろしくお願いします。
- dcfc_08
- お礼率46% (34/73)
- HTML
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
閲覧環境（PC）の問題です。 Webページの見た目は印刷物と違って閲覧環境で大きく左右されます。 MacOSXと比べて、Windowsは標準のフォント＆フォント描画機能がまあり綺麗ではない（汚い）です。 Windowsもメイリオフォントとか、クリアタイプといった機能を搭載しているけど、 商業印刷でも利用されるヒラギノフォント＆高性能な描画機能持つOSXには適いません。 一応CSSでフォントを指定する事はできますが、閲覧環境にその書体がないと意味ありません。 http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html ※Windows版Safariは独自の（おそらくOSXから移植した）フォント描画機能使っているので、MSゴシックとかのでもある程度綺麗に表示します。
その他の回答 (1)
- uriboar
- ベストアンサー率15% (143/916)
まだ対応ブラウザが限られますが CSS3の @font-face を使う方法があります。 http://blog.livedoor.jp/nodokapcx/archives/51403133.html
お礼
uriboarさま こんにちは。 はじめまして。 ご回答ありがとうございます！！ 私の知識不足でこのようなプロパティを知りませんでした。。 使用方法に気をつければものすごくありがたいプロパティでした！！ 是非、活用させて頂きたく思います。 大変ありがとうございました！！
関連するQ&A
- Netscape（Mac)でのCSS、フォントが変
過去の質問でネットスケープとMacとCSSで検索しましたが求めているものが見つかりませんでしたので質問させていただきます。（質問が重複していましたら失礼します。） CSSの外部ファイルをリンクさせているのですが、そちらでフォントの指定をしております。 .text{font-family: "MS Pゴシック","Osaka"; font-size: 13px; color:#333333} ウィンドウズのIEやNetscape、及びMacでのIEでは思った通りに表示されているのですが、Macでのネットスケープ（4.7、6、7.02）では違って表示されます。 なんと言えばよいのか、字がはっきり表示されなくてモシャモシャな感じなのです。 MacのNNではCSSでフォントの指定はできないのでしょうか。 fontタグを使わないといけないですか？ ちょっと困っております。 よろしくお願い致します。
- ベストアンサー
- CSS
- ブラウザが違うと制作中のHPの表示が異なってしまう
HP制作初心者です。 macのテキストエディットでHPを作っているのですが、だいたいのレイアウトや全体像ができたところでWinのIE（バージョンまでは確認していません…）で表示してみたところ、レイアウトやフォントなどmacのsafariとかなり違いがありました。 制作中のHPをおおまかに書くと、背景などは使っていなく（白）、すべてosakaフォントの10pt～7pt、基本レイアウトはcssによるヘッダ・本体・（フッダ）の構成でfloatは使っていません。 レイアウト崩れなど回避できた所もあるのですが、 今解決できないのはWinのIEではフォントの違い（→WinではMS Pゴシックが表示されるようにしています。その他sans-serifとsans-serifに分類されるフォントも指定しています）によって字詰めや大きさが変わってしまう（ひとまわり小さくなるようです）、古いIEでは定義タグが一部効かない箇所がある、トップページは中央に画像一つとコピーライト（画像）なのですがフッダで画面の下に配置したコピーライトが中央の画像にかぶってしまう。などです。 自分の環境がmacのsafariとfirefoxしかなく、調べてみるとIE6などバグが多く発生するらしいもののシェア率がかなり高いようなので、いっきに不安になりました。 なんとなく全ての環境で同じように見えるというのは無理そうな事が分かってきたのですが、ブラウザが変わっても、見え方が近くなるこつなどはあるのでしょうか？ また、HP制作でそれらをさける為にまずやるべきこと。などがあれば教えていただきたいです。 HP制作用のソフトを使えばいいのか？など分からないことだらけなのですが、何かアドバイスなどあれば、よろしくお願いします！
- ベストアンサー
- CSS
- IEブラウザの【文字のサイズ】をJavaScriptなどで操作できないでしょうか？
いつもお世話になってます。 今日は、ちょっと気になってたコトについて、皆さんのご意見を聞きたいところです。 IEブラウザの 【表示】⇒【文字のサイズ】⇒【最大・大・中・小・最小】 ですが、このサイズは、CSS等でfont-sizeを【％】【em】【ex】等で設定してあると、一定のルールでサイズが変わりますが、 この変更サイズを、JavaScriptやCSS側で操作出来ないものでしょうか・・・。 文字サイズが可変サイトなどを見ていると、【最大】にした時のサイズでそれは大きすぎるだろうって思う時もあります。 サイトを作る側が、【最小値】を基準に作るか、【中】を基準に作るかの違いとは思うのですが、この５つのサイズを制作者側で操作出来たらイイなぁ・・・ってユーザビリティ云々はちょっと置いといて。 自分はJavaScriptとは、あまり縁がないので、参考までに出来るかどうかの意見だけでもイイので、皆さんのご意見をお聞かせくださいませ。 自分は制作者側で設定出来たらなぁって思います。
- ベストアンサー
- JavaScript
- もーいや！ブラウザで表示が変わってしまいます。
ホームページをIEとNSとFFで確認すると表示が違うんです。 IEは問題ないのですが、Net ScapeとFire Foxで見ると、とんでもない表示になってしまいます。 全てが全く同じにならなくてもいいとは思っていますが、あまりにもとんでもない表示箇所があるので、出来る物なら修正したいなーと考えています。 問題箇所は、Copy Right部分です。よくあるようにサイトの一番下部分にCSSで個別のBOXを表示させるようにしているのですが、Net ScapeとFire Foxでは上にあるメニューのBOXの下と、とんでもない所に出てきます。 ちなみにCSSの記述は、以下のようになります。 何がいけないんでしょうか？ .copyright { FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 800px; COLOR: #ffffff; PADDING-TOP: 10px; POSITION: static; HEIGHT: 30px; BACKGROUND-COLOR: #81abc3; TEXT-ALIGN: center } これを御覧になって、わかる方おられましたら宜しくお願いします。
- ベストアンサー
- ブラウザ
- CSSなどでページ全体のテキストサイズを変更する
皆様こんにちは。 HTMLでサイズ指定されたテキストサイズを CSSやjavascriptなどで変更する方法はありませんでしょうか？ 例えば下記のようなサイズ指定されたページ全体のテキストサイズを cssなどで150%大きくするといった方法です。 ----------------------------------- <html> <head> </head> <body> <h1>こんにちは</h1> <font size="2">こんにちは</font> <font size="1">こんにちは</font> こんにちははじめまして </body> </html> ----------------------------------- 何か方法があれば ご回答よろしくお願いいたします。
- ベストアンサー
- CSS
- ブラウザによりフォントサイズが異なってしまう問題をCSSで解決する原理
ブラウザによりフォントサイズが異なってしまう問題をCSSで解決する原理と方法は？ 例えばIEではちょうどよいサイズ（作成者が10ptを指定してその通りのサイズ）で表示されているのが、FireFoxでは小さく表示されてしまうという問題は、CSSを使えば解決できるそうですが、それはどのような原理で解決できるのでしょうか。また、どのような設定をすればよいのでしょうか。 私はCSSファイルの役目は指定箇所（クラス）を指定フォント/サイズで表示するよう指示するもの、という程度のことは分かっていますが、HTMLファイル上で直接10ptと指定するのと、CSSで10ptと指定するのではどう違うのか。または、数値ではなくて相対的なサイズを指定する必要があるのでしょうか？ その辺の原理が分かっていませんので、ごく簡潔に教えていただけるとありがたいです。 また、分かりやすいサイトも教えていただければありがたいです。
- ベストアンサー
- その他(ソフトウェア)
- ブラウザの観覧不具合
Mac/os10.5でGolive9.0でくせを作成していますがサイトにCSSを使用していますがこのサイトをWIN/XPのIEで観覧すると所々ページ内の設定がかけているところがあります。テキストもmacでは問題なく表示している物がwinではほかのフォントに置き換えられてしまいます。このような不具合をなくすのにのような設定をすれば良いのでしょうか
- ベストアンサー
- Mac
- CSSで文字サイズを指定するとWINでは固定なのに…
CSSで文字サイズを指定するとWINでは固定なのに MACではブラウザで文字サイズを変えると サイズが変わってしまうのです。 MACでも固定する方法がわかりません。 教えてください。 ドリームウエヴァ－で作って 外部ファイルにしていて a { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 11px; text-decoration: none; } p { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 14px; line-height: 18px; text-decoration: none; color: #666666; letter-spacing: 1px; } です。 どこがおかしいのでしょうか？
- ベストアンサー
- HTML
- MacとWinでのCSSにおけるフォント大きさ指定
自分はWinを使っているため、Macでの環境動作確認が出来ないのでご存知の方教えて下さい。 CSSでフォントサイズを指定するとき、pt指定ではなくてpx指定がMacにもWinにも いいのですよね？ それはpxで指定するとWinで見てもMacで見ても同じ大きさのフォントに見えるからでしょうか。 もし違うなら、Macでこのpxだったらギリギリちゃんと見える・・・という大きさを教えて頂けますでしょうか。 Winで見たときに10pxくらいの小さいかわいい文字でサイトを作りたいと思っているので、よろしくお願いします。
- ベストアンサー
- HTML
- CSSで文字指定：あるセレクタで指定した値を他のセレクタへ継承させることは出来ますか？
文字サイズをCSSで指定する方法についての質問です。 同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。 そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。 macintosh.css windows.css windowsIE.css ...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。 CSSファイルの中身は、 macintosh.css .small { font-size: 10px; } /* 小さめ */ .middle { font-size: 12px; } /* 中くらい */ .large { font-size: 14px; } /* 大きめ */ windowsIE.css .small { font-size: 0.8em; } /* 小さめ */ .middle { font-size: 0.9em; } /* 中くらい */ .large { font-size: 1em; } /* 大きめ */ ...といった具合です。 このやり方では、h2の文字サイズを全て中くらいの大きさに指定したい場合、 全てのh2タグに <h2 class="middle"> と記述することになってしまいます。 これは煩雑なので一括指定したいと考えます。 すぐ思いつく方法は、振り分けCSSファイルにh2の文字指定も含めることです。 macintosh.css h2 { font-size: 12px; } windowsIE.css h2 { font-size: 0.9em; } ...のようなことです。 そうではなく、h2に .middle（＝中くらい）で指定した文字サイズをそのまま受け継がせる方法はないでしょうか？ h2 { class="middle" } 変な書き方ですが、意図を汲み取っていただけるでしょうか。 このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。
- ベストアンサー
- HTML
お礼
dezimacさま 早速のご回答ありがとうございます。 するとやはり環境へ依存するしかないのですか。。。 文字画像をいちいち作るには手間なので困りました。。。 解決方法があれば嬉しいのですね。 ありがとうございます！！