OKWaveコミュニティー

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


新規ユーザー登録(無料)今すぐ登録しよう!!
はじめての方へ OKWaveではこんなことができます!

転職成功者続出!転職ならen!
人生をよくする就職!就職はen!
毎日情報更新!アルバイトならen!
特集
11.22「いい夫婦の日」特集
11月22日は「いい夫婦の日」大切なあの人へありがとうを伝えよう!
高校生の悩みQ&A
学生の方は勉強や恋愛、進路など悩みは沢山。高校生の悩みに注目!
教えて!ソーシャルレンディング
新しいお金の貸し方借り方「ソーシャルレンディング」特集。
おすすめリンク

質問

質問者:Ken-G CSSによるfont-familyの指定について
困り度:
  • 困っています
正しいHTML、CSSという観点から、CSSでfont-familyを指定するべきなのでしょうか?
それとも、しない方が良いのでしょうか?

もし、指定するべきであれば、どのように指定すれば、良いでしょうか?
OSなどPC環境、ブラウザ環境を考慮して、どのように指定すれば良いか、分かる方がいらっしゃれば、教えて下さい。

よろしくお願い致します。
質問投稿日時:08/09/14 16:07
質問番号:4328198
最新から表示回答順に表示

回答

 

回答者:rit_13444 #4です。
>CSSでfont-familyを指定して・・・(中略)・・・でした。
あらかじめ多くの人にインストールされているデフォルトフォントを指定して、環境による差が無くそうとしているのだと思います。

>意図的にフォントを変更・・・(中略)・・・お考えでしょうか?
安全策というのは間違いではないと思います。

特に欧文フォントは種類が多く、他のOSにも備わっている事が多いため、その指定を行っているところを多く見かけます。(OSによって名前が違ったりしますが・・・)
例えば僕自身「"Times New Roman"でしっかりした感じにしよう」とか、「柔らかい感じの"Tahoma"を使おう」という様に決めることはあります。(Tahomaが柔らかい、は僕のイメージなんですけどね・・・)
最近のマックでは「verdana」というTahomaと似たフォントがあるそうですから、「font-family:Tahoma,verdana;」と指定しています。

一方で、日本語フォントは基本のゴシック体が一番読みやすいので、設定していません。(明朝体や楷書体、行書体はなぜか見にくいですね・・・)

結論としては
「環境による差を減らすなら、フォントの指定は最小限にし、初めから入っている欧文フォントを指定するようにする。」
と言う事になります。
種類:回答
どんな人:一般人
自信:参考意見
回答日時:08/09/15 18:52
回答番号:No.9
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼貴重なご意見、ありがとうございます。

「環境による差を減らす」を考えると、指定した方がいいということですね。

「環境による差を減らす」か「ユーザの環境に任せる」かを作り手が考えないといけないということですね。

いろいろと、ありがとうございました。

回答

 

回答者:taba #5です。
英語を見出し的に使うなら、指定してもいいかもしれません。インストールされている率が高いフォントがある程度ありますし、日本語のような問題は起きないと思いますので。
例えば、
http://www.3point7designs.com/blog/2008/05/08/8-fonts-you-probably-...
を参考にしてください。Win/Macのインストール率も載ってます。

個人的には、必要なら画像を使うというのに賛成です。

悩ましい問題については、下記が参考になるかも。
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
種類:アドバイス
どんな人:経験者
自信:参考意見
回答日時:08/09/15 14:35
回答番号:No.8
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼ご回答ありがとうござます。

>英語を見出し的に使うなら、指定してもいいかもしれません。
そうですね。
海外のブログなど、タイトルや見出しに、フォントを指定しているものを見かけたことがあります。

また、Win/Macのインストール率といった、興味深い参考URLをありがとうございます。

貴重なご意見等、ありがとうございました。

回答

 

回答者:dezimac > デフォルトでインストールされているフォントを〜
実際には指定する意味ほとんどないような指定ばかりですからね。
だからといって、それ以外の毛筆体とかの特殊な書体を指定しても、入っている環境なんて僅かだから意味ないですけど。
見出し程度とかなら、フォント指定より画像にした方がいいし。

先に紹介したページにもあるように、IEのバグでsans-serifとかの一般名だけで指定すると欧文フォント割り当てて文字化けするというのがあるから、結局MSゴシックとかも指定することになります。

何も知らずに周りでもやっているから自分もという人、少しでも自分が意識した通りに表示させたい指定している人、そんなところでしょう。


特に必要がないなら、具体的なフォント名も絶対的なサイズも指定しないのが一番です。
本文に関して、下手な書体よりも見なれたものの方が読みやすいです。
メニューとかでどうしても12ptでないとレイアウトが崩れるとかでない限りは、80%とかの相対指定にしてくれればいいのに、下手にページ全体のサイズ固定していると読みにくくて、MSのサイトなんか特にそう。
自分のブラウザではなぜか8pt程度になって読みにくいこと。
種類:アドバイス
どんな人:経験者
自信:参考意見
回答日時:08/09/15 08:17
回答番号:No.7
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼ご回答ありがとうございます。

>何も知らずに周りでもやっているから自分もという人、少しでも自分が意識した通りに表示させたい指定している人、そんなところでしょう。
私もそんな感じがします。

ユーザビリティの面から見ると、何も指定せずに、ユーザーの環境に合わせるのがいいってことですね。

貴重な意見等ありがとうございました。

回答

 

回答者:nick9090 >OSなどPC環境、ブラウザ環境を考慮して、どのように指定すれば良いか

そういった複雑なことを考慮するならば、
万人に障害が出ないように「何も指定しない」のが一番良いです。

逆に閲覧者(のPC環境)が限定的で特定できているのなら
いろいろ指定してもいいかもしれませんが。
種類:回答
どんな人:専門家
自信:自信あり
回答日時:08/09/15 07:22
回答番号:No.6
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼ご回答ありがとうございます。

>万人に障害が出ないように「何も指定しない」のが一番良いです。
そうですね。
何も指定せず、ユーザに任せるのがいいってことですね。

ありがとうございました。

回答

 

回答者:taba 実際にサイトを見て回ると、本文書体のフォントを指定してあるケースが意外に多いのですが、これはむしろやめるべきだというのが私の考えです(古いIEか何かで、Serifだけの指定だとうまく表示されないバグがあったのが、こういう指定の原因という話を見たような気もしますが)。

例えばWindowsを想定して、メイリオやMS Pゴシックを優先指定してあると、以下のようなケースで問題になります。
1)XP用のメイリオをインストールしてあるがクリアタイプを使用していない→メイリオが美しく表示されない
2)表示が美しい他のフォントをブラウザで指定してある→フォント指定されているために美しくないフォントでの表示が強制される
※どちらも私自身が経験していることです(苦笑)。

ニュース系だとITMediaがMSUIゴシックを指定してあって読みづらいですし、日刊スポーツが本文MSPゴシック。よく見るサイトはFirefoxのStylishでCSSを上書きしていますが、そんな手間はかけないで済む方がありがたいのです。
ちなみに通常設定は、M+1P+IPAGをGDI++でアンチエイリアス表示しています。特殊な例ではありますが、そういうケースもあるということで。

Serif、Sans-serif、Monospaceについては、ブラウザで表示用のフォントが指定できるので、ユーザーにまかせるべきだと思います。
見出しや、引用(Blockquote)等、意図的に特別なフォントを使いたい場合のみ、指定した方がいいのではないかと思います。
種類:アドバイス
どんな人:経験者
自信:参考意見
回答日時:08/09/15 03:27
回答番号:No.5
この回答への補足ご回答ありがとうございました。

メイリオの問題は、どこかの記事で読んだことがあります。

フォントを指定してあるケースが意外に多いのは、やはりデザイナーの自己満足的なものでしょうかね。
例えば、近未来的なデザインに明朝系のフォントが入ったらイメージが崩れるから、ゴシック系を指定する感じなのでしょうかね。。。

私も指定はしていないのですが、見出し等、意図的に特別なフォントを使いたい場合は、文字を画像にしてます。
その方がインパクトがあります。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 

回答者:rit_13444 こんにちは。

font-familyの指定は、絶対に必要と言う事ではありません。

しかし、意図的にフォントを変更したい場合、HTMLよりもCSSで記述する方がいいと思います。

ここから先は、先に回答された方と同じ事です。
HTMLは元々文書を表現する為のもので、視覚表現はその本分を超えるものであり、正式には薦められていないようです。(非推奨属性、非推奨要素)
CSSでフォントを指定する場合、そのフォントが入っていない人の為に、いくつか指定しておく方がよいでしょう。

font-family:"フォント1","フォント2";

こうすると「基本はフォント1。それが無かったらフォント2で表示する。」というような指定になります。
種類:回答
どんな人:一般人
自信:参考意見
回答日時:08/09/14 20:05
回答番号:No.4
参考URL: http://www.htmq.com/style/font-family.shtml
この回答への補足ご回答ありがとうございました。

CSSでfont-familyを指定しているサイトをいくつか見ましたが、だいたいデフォルトでインストールされているフォントを指定しているようでした。
意図的にフォントを変更したいというより、安全策のために指定しているように思えるのですが、どのようにお考えでしょうか?
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 

回答者:aides しても、しなくても構わないと思う。
こう云っては何ですが「自慰行為」に近い事だと考えて居ます。
基本的にインストールされて無いフォントはブラウザの「標準」の文字で表示されるので、問題は無いですね。

他は先の回答者に準じます。

表現に問題が在るかな?(汗
種類:アドバイス
どんな人:経験者
自信:参考意見
回答日時:08/09/14 19:06
回答番号:No.3
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼ご回答ありがとうございました。
「自慰行為」ですか。。。(笑

指定しても、しなくてもいいのであれば、「自慰行為」「自己満足」ってことですかね。。。

回答

 

回答者:steel_gray 別に指定すべきものではありません。
(大きなくくりでいえばCSSそのものが無くてもいいものですし)

私的には具体的なフォントを指定する事はなく、使うとすれば
数値項目とソースコードに対して一般フォントファミリで等幅フォント(monospace)を指定する時ぐらいでしょうか。
種類:回答
どんな人:一般人
自信:参考意見
回答日時:08/09/14 16:41
回答番号:No.2
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼ご回答ありがとうございました。
私も指定していないのですが、font-familyを指定しているサイトを良く見かけるので、指定した方が良いのかなと思い質問させていただきました。

回答

 

回答者:dezimac 特定の書体を指定するしないは完全に貴方の自由です。

もし書体を指定するのなら、HTMLの<font face="××">ではなく、CSSのfont-familyで指定するべきです。
<font>タグは非推奨タグですからね。

特定の書体を指定しても、全てのPCにそのフォントがあるわけではないという点だけ忘れないようにしましょう。

font-family: 'フォント1' , 'フォント2' , sans-serif;
と指定しておけば、そのPCに「フォント1」があればそれを、なければ「フォント2」をと順番に適用されて、それでもなければ、標準設定のフォントが適用されます。

フォント名の指定は一般名と併用するべきです - Web標準普及プロジェクト
http://mozilla.gr.jp/standards/webtips0007.html

各OSのフォントの一例)
http://rinrin.saiin.net/~aor/fonts/fonts


ページのタイトルロゴとかの極一部で、どうしても特定の書体にしたいというなら、画像にして下さい。
長文を画像化するのは非効率でバカな行為ですけど、タイトル程度なら問題ないです。
もちろん、画像が表示されないときの為に<img scr="XX" alt="××">とalt属性を忘れないように。
種類:回答
どんな人:経験者
自信:参考意見
回答日時:08/09/14 16:35
回答番号:No.1
参考URL: http://mozilla.gr.jp/standards/webtips0007.html
この回答への補足ご回答ありがとうございました。
大変、分かりやすくご説明いただき、ありがとうござます。

CSSでfont-familyを指定しているサイトをいくつか見ましたが、だいたいデフォルトでインストールされているフォントを指定しているようでした。
なので、念のため?にでも指定するものなのかと思って質問してみました。
そのあたりは、どのようにお考えでしょうか?
この回答へのお礼この回答にお礼をつける(質問者のみ)
最新から表示回答順に表示
関連Q&A