• ベストアンサー

[CSS] 反映されない場合があるにもかかわらず font-family を 設定するのは何故か

他のWEBサイトのCSSを参考にしていると font-familyを使用して フォント変えているページが 多く見受けられますが、これって見る側も同じフォントを 持っていないと反映されないんですよね? また、MACにしかないフォント  WINにしかないフォントとかも あるわけで、結局、設定しても意味がないような気がします。 それでも多くのサイトが font-family で フォントを指定しているのには どういう理由があるのでしょうか?

  • HTML
  • 回答数4
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • bugtte
  • ベストアンサー率33% (24/71)
回答No.4

ウェブデザイナーです。 font-familyを指定する理由はページを綺麗に魅せたいからです。 MSPゴシックはカクカクでダサいですから… あまり奇抜なフォントはパソコンに入っていない可能性が高いので、指定するときは多くのパソコンに入っているであろうフォントを指定していします。 また複数指定しておけば反映される可能性も高くなります。 最近は日本語用にメイリオ、ヒラギノ角ゴ、 英語用にVerdana、Arial、Helveticaなどを指定しています。 【font-family:"Verdana","Arial","Helvetica","Meiryo","メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro","HiraKakuPro-W6","MS PGothic","MS Pゴシック","osaka",sans-serif;】 上記のフォントが入っていない場合はデフォルトで表示されるので、文章が読めなくなるわけでもないし割り切ってます。

yuzuru0024
質問者

お礼

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

その他の回答 (3)

noname#176215
noname#176215
回答No.3

あともう一つは 初心者用のアプリケーションでは 勝手にフォント を指定してしまう場合もありますね。

yuzuru0024
質問者

お礼

回答ありがとうございます。 フォントを指定するつもりがなかったのに アプリケーションの仕様で指定してしまったということですね。

noname#176215
noname#176215
回答No.2

> また、MACにしかないフォント  > WINにしかないフォントとかも > あるわけで、結局、設定しても意味がないような気がします。 両方の設定を入れておく人が多いと思います。 > どういう理由があるのでしょうか? 既存のフォントでは デザイン性に魅力がないと判断する場合も ありますが ページ構成上「ここは明朝書体だな」と判断する場 合や「等幅フォントで幅を固定したい」などの目的があれば 指 定することになりますね。

yuzuru0024
質問者

お礼

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

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

それは、font-familyに限らず、CSS X.Xを全てのブラウザーがサポート している訳でもないのに、CSS X.X 対応の宣言を記述したり、javascript を使えないブラウザーがあるにもかかわらず、javascriptを使用して ページを作成しているサイトが多くあるのと同じ理由です。 要は、ちゃんと表示されない人を救うための記述でなく、少しでも救ってあ げられるように、ちゃんと見れる人の為に記述しているのです。

yuzuru0024
質問者

お礼

回答ありがとうございます。 フォントを対応してる人がいないかもしれないけど とりあえず指定しとくに越したことはないという感じですかね。 あまり、深く考えずにフォント指定したほうがよさそうですね。

関連するQ&A

  • font-familyで、メイリオに記号をつける?

    WEBを勉強していて気になったので、質問します。 CSSでフォントを指定する際に使う”font-family”ですが、 参考書や解説サイト等では、フォント名にスペースがある場合は、「"」か「'」を前後につけて指定をすると書いてあります。 そこで、「メイリオ」というフォントの場合、スペースが無いと思うのですが、 なぜ「"」、「'」などを前後につけてあるのでしょうか?

    • 締切済み
    • CSS
  • 外部CSSが反映されるHTMLとされないHTML

    レンタルサーバのファイルマネージャを使ってサイトを作っています。 外部CSSで文字のフォントをMS Pゴシックに統一したいのですが、反映されるページとされないページができました。 CSSには、 @charset "Shift_JIS"; p { font-family: "MS Pゴシック",sans-serif; } 読み込みには、 <link href="./style.css" rel="stylesheet" type="text/css"> と記述しました。 反映されたのはサイト2ページ目の2分割フレームの片側だけで、その他のページはブラウザで指定したフォントのままCSSが反映しません。 HTML、CSS共に文字コードはShift_JISで統一していて、それぞれ<head></head>間の同じ位置に記述してあります。 反映されたHTML内にはボックスの幅指定でCSSを使っていますが、その他のページにはCSSを使っていません。違いはこれだと思うのですが、それがきっかけで反映されたりされなかったりと変わるものなのでしょうか? HTML、CSS共に初心者です。この質問が初歩的なことなのか難しいことなのかもわかりません。 よろしくお願いします。

  • CSSによるfont-familyの指定について

    正しいHTML、CSSという観点から、CSSでfont-familyを指定するべきなのでしょうか? それとも、しない方が良いのでしょうか? もし、指定するべきであれば、どのように指定すれば、良いでしょうか? OSなどPC環境、ブラウザ環境を考慮して、どのように指定すれば良いか、分かる方がいらっしゃれば、教えて下さい。 よろしくお願い致します。

  • MacからアップしたCSSがWinで反映されないんです…

    こんにちは! Macでサイトを作ってます。 ここのところずっと同じ問題で悩んでいます。 CSSファイルをMacのシンプルテキストで作成し、リンク色など反映するように指定しています。 アップした後に確認すると、MacではきちんとCSSが反映されているのですが、Winでは反映されません。 Winで見ると、リンク色はデフォルトの青→紫、 スクロールバーも指定しているのですが、デフォルトのままです。 Macからアップロードした場合に、 きちんとWinに反映されていないのは、何かおかしいところがあるのでしょうか? よろしくお願いいたします。 因みに、<HEAD></HEAD>内でこのように指定しています。 <LINK TITLE="main" HREF="main.css" TYPE="text/css" REL="STYLESHEET">

    • 締切済み
    • CSS
  • cssのfont-familyについて

    cssのfont-familyについて教えてください。 Amazonのレビュー表記と同じフォントを使いたいですのが、うまくいきません。 http://www.amazon.co.jp/product-reviews/B007OZO03M/ref=dp_top_cm_cr... ソースを見るとCSS部分は、 font-family: arial,helvetica,osaka,"MS PGothic",sans-serif; font-size: small; となっています。 しかしこれをそのまま貼付けてみても、適用されずにamazonレビューと同じフォントで表示されません。 http://hmaster.net/tagtest.html 見やすいフォントなのでサイトで使用したいのですが、どうすれば適用されるでしょうか? ソース部分を間違えているのか、付け足さなければならない部分があるのか分からずに困っています。 よろしくお願いします。

    • 締切済み
    • CSS
  • WEBフォント使用時にfont-family指定

    bodyにfont-family指定をし、サイトの一部分にWEBフォントを使用しています。IOS/Android向けに書いているCSSなのですが、Androidスマホ実機で検証した時だけbodyに指定したfont-familyが効かなくなってしまいます。 そもそもbodyなどにfont-familyを指定して、さらに@font-faceの中でまたfont-familyを書くのが間違いなのでしょうか?それともAndroidのバグなのか?Webフォントとその他のフォントの併用について、なかなかわかりやすい資料が見つけられず悩んでいます。 ググりまくった結果、古めの記事を見つけ @font-face{ font-family : 'WEBフォントのフォント名','メイリオ',sans-serif; src : ~略~ } みたいな書き方が載っていたので、試してみましたがこれはやはりダメでした。 Webフォント自体の表示は上手くいっており、IOSでも期待通りにbodyのフォント指定は効いています。どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • MacとWinでのCSSにおけるフォント大きさ指定

    自分はWinを使っているため、Macでの環境動作確認が出来ないのでご存知の方教えて下さい。 CSSでフォントサイズを指定するとき、pt指定ではなくてpx指定がMacにもWinにも いいのですよね? それはpxで指定するとWinで見てもMacで見ても同じ大きさのフォントに見えるからでしょうか。 もし違うなら、Macでこのpxだったらギリギリちゃんと見える・・・という大きさを教えて頂けますでしょうか。 Winで見たときに10pxくらいの小さいかわいい文字でサイトを作りたいと思っているので、よろしくお願いします。

    • ベストアンサー
    • HTML
  • font-family、font-sizeについて

    こんばんは。 今自分のサイトを作っているのですが、普通にCSSでフォントの種類(font-family:英数字だったら○○、日本語だったら○○など)・大きさ(font-size:ピクセルかパーセント)などはどのように指定をするのが一般的でしょうか?

  • font-family フォントが無い場合は?

    CSSでfont-familyを1個だけ指定した場合、フォントが無い環境の人は、文字化けになる場合がありますか? 例えばですが、font-family:'HGP創英角ポップ体'; とか、1個だけを指定した場合に、フォントがなければ、普通は適当に該当させて表示してくれると思いますが、 文字自体が表示出来ないで文字化けとかになってしまう環境があるのでしょうか? もしそうなら、 font-family:'HGP創英角ポップ体','HG創英角ポップ体',sans-serif; こんな風に安全策でsans-serifも書いているのですが、sans-serifが変なので、それなら該当なし(無指定)にされてゴシックで適当に表示されたいのです。だから1個だけで指定したいのです。どうでしょう?

    • ベストアンサー
    • HTML
  • フォントサイズの設定変更 CSS

    ホームページテンプレート・CSSを個人サイトよりお借りして 作成しております。 CSSで、 * { margin : 0; padding : 0; color : #000; font : normal 10px Verdana; line-height : 200%; letter-spacing : 0.2em; } このような記述があり、ページ全体がここで設定されているフォントサイズ になっています。 ただしある一部分だけ個別にフォントサイズを変更したいのですが、 HTML側に記載してもこのCSSのほうが優先されてしまい 反映しません。 設定する方法は無いのでしょうか?ご回答お願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう