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

質問

正しいHTML、CSSという観点から、CSSでfont-familyを指定するべきなのでしょうか？
それとも、しない方が良いのでしょうか？

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

よろしくお願い致します。

回答No.9

noname#77303

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

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

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

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

結論としては
「環境による差を減らすなら、フォントの指定は最小限にし、初めから入っている欧文フォントを指定するようにする。」
と言う事になります。

お礼

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

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

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

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

回答No.8

taba

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

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

悩ましい問題については、下記が参考になるかも。
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html

お礼

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

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

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

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

回答No.7

dezimac

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

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

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

特に必要がないなら、具体的なフォント名も絶対的なサイズも指定しないのが一番です。
本文に関して、下手な書体よりも見なれたものの方が読みやすいです。
メニューとかでどうしても12ptでないとレイアウトが崩れるとかでない限りは、80%とかの相対指定にしてくれればいいのに、下手にページ全体のサイズ固定していると読みにくくて、MSのサイトなんか特にそう。
自分のブラウザではなぜか8pt程度になって読みにくいこと。

お礼

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

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

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

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

回答No.6

nick9090

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

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

逆に閲覧者（のPC環境）が限定的で特定できているのなら
いろいろ指定してもいいかもしれませんが。

お礼

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

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

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

回答No.5

taba

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

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

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

Serif、Sans-serif、Monospaceについては、ブラウザで表示用のフォントが指定できるので、ユーザーにまかせるべきだと思います。
見出しや、引用（Blockquote）等、意図的に特別なフォントを使いたい場合のみ、指定した方がいいのではないかと思います。

補足

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

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

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

私も指定はしていないのですが、見出し等、意図的に特別なフォントを使いたい場合は、文字を画像にしてます。
その方がインパクトがあります。

回答No.4

noname#77303

こんにちは。

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

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

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

font-family:"フォント１","フォント２";

こうすると「基本はフォント１。それが無かったらフォント２で表示する。」というような指定になります。

参考URL：

http://www.htmq.com/style/font-family.shtml

補足

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

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

回答No.3

noname#100277

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

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

表現に問題が在るかな？（汗

お礼

ご回答ありがとうございました。
「自慰行為」ですか。。。（笑

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

回答No.2

steel_gray

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

私的には具体的なフォントを指定する事はなく、使うとすれば
数値項目とソースコードに対して一般フォントファミリで等幅フォント(monospace)を指定する時ぐらいでしょうか。

お礼

ご回答ありがとうございました。
私も指定していないのですが、font-familyを指定しているサイトを良く見かけるので、指定した方が良いのかなと思い質問させていただきました。

回答No.1

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属性を忘れないように。

参考URL：

http://mozilla.gr.jp/standards/webtips0007.html

補足

ご回答ありがとうございました。
大変、分かりやすくご説明いただき、ありがとうござます。

CSSでfont-familyを指定しているサイトをいくつか見ましたが、だいたいデフォルトでインストールされているフォントを指定しているようでした。
なので、念のため？にでも指定するものなのかと思って質問してみました。
そのあたりは、どのようにお考えでしょうか？