外部CSSでフォントの指定

質問

自分のサイトの一部のページでは外部CSSで文字の色やフォントなどを設定しているのですが、
FireFoxでは反映されません。IEでは思い通りです。

調べてみて外部CSS、style.cssの改行をなくしたり先頭に@charset "shift_jis";を記述してみました。
そしたらなんとうまく文字色は変わりました。

しかしフォントは英字が"Verdana"にならないのです。
すべて"ＭＳ ゴシック"になってしまいます……IE、FireFox両方です。
私はＭＳ ゴシックの英字が好きではないので、Verdanaなってくれればうれしいのですが……。

ちなみに、フォントの部分は
　font-family: "Verdana", "Arial", "sans-serif", "ＭＳ ゴシック";
こんなふうに記述しています。

@charset "shift_jis";の記述を消して、
.htaccessが使えるサーバーなのでAddType text/css .cssを記述してみましたが変わりません。

どなたか大抵のブラウザで日本語をＭＳ ゴシック、英字をVerdanaにする外部CSSの書き方を教えてください。

回答No.3

tracer · ベストアンサー

ちょっと厳しい言い方かもしれませんが、font-familyの指定はCSSの記述でも複雑な部類に入るため、まずは、HTML/CSSの基本を学ばれることをおすすめします。印象としては、足し算を覚える前に、掛け算や割り算をやってるようなものです。

およばずながら、基本的なことを箇条書きしてみます。

1.
@charsetに指定する内容で結果が変わることはないと思います。
@charset "shift_jis";の指定で文字色が変更されたのは、HTMLとCSSのテキストエンコーディングが統一されていなかったり、あるいは、単純なスペルミス、行末のセミコロンがないなどの理由だと思います。

2.
現在は「MSゴシック」が適切でない環境がたくさんあります。
MSゴシックがデフォルトなのは、Windows XP以前です。Vista以降ではメイリオがデフォルトフォントであり、アンチエイリアスフォントによりMSゴシックよりも可読性が高いです。(もちろんこれは好みですが。)　また、MS製品でないOS(MacやiPhoneや携帯端末)は、MSゴシック自体がありません。MSゴシックのある環境とない環境をわけられる指定が望ましいかもしれません。

3.
CSSは様々な箇所で指定することができます。また、ブラウザごとにデフォルトのスタイルが指定されています。
どこかでfont-familyを指定したとしても、別の場所でそれよりも優先順位の高い記述をされていたら、変更が適用されません。また、これはブラウザによっても、CSS優先順位のあり方が異なるため、やはり基本的なCSSの記述をマスターされることが先決です。

4.
font-familyの指定は少し複雑です。
たとえば、

font-family:Verdana;
font-family:"Verdana";
font-family:'Verdana';

同じフォントを指定していますが、少しの違いでブラウザによって認識されたり、されなかったりします。
おそらく、ここでの質問よりも、「font-family　指定方法」での検索の方が、質の高い情報が得られます。

お礼

詳しいご回答ありがとうございます。
確かに私の記述するHTMLは基本を丸無視しています……。
Webサイトさんからコピーしてきたもの、それによって覚えたきっとめちゃくちゃな記述で構成されている自覚があります……。
思い切ってCSSの参考書を買って読んでみます。　
ご回答くださったみなさんありがとうございました！

回答No.2

神崎 渉瑠（@taloo）

>どなたか大抵のブラウザで日本語をＭＳ ゴシック、英字をVerdanaにする外部CSSの書き方を教えてください。
font-family１つでやるのは無理です。

かなり端折りますが、

body { font-family: "MＳ　ゴシック" }
.en { font-family: Verdana }

としておいて、

<p>このページは<span class="en">Firefox</span>、<span class="en">IE</span>で表示確認しています。</p>

などと、単語ごとにフォント（class）を変える指定をしてください。

本来はclassよりもlang="en"の方がいいのですが、
span[lang=en]などのセレクタに対応していないブラウザ（のバージョン）も多く使われています。

回答No.1

ORUKA1951

chersetは、必ず最初の一行目に書くことになっています。しかも書き方にはルールがあります。
4.4 CSS文書の符号化方法（CSS document representation） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#q23 )
1) HTTP応答ヘッダに含まれるcharset　通常HTTPサーバーでは未指定
2) CSSの最初のcharset　　　　　　　 これを記述すると他のcharsetのHTMLから参照できる
3) HTMLのLINKの指定するcharset　　　ここで指定しても良い
　そして、その前後にいかなる文字も含まれてはならない。

　いずれもなければブラウザはHTMLと同じものとして解釈しようとする。

　また、font-familyにも記述順番と書き方の決まりがあります。
15.2.2 フォントファミリ（Font family: the 'font-family' property） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/fonts.html#font-family-prop )
「フォントセット末尾のフォント以外では、このグリフ(総称ファミリ名)をマッチングの対象にすべきではない。」
「空白類文字を含むファミリ名は引用符で括った方が無難である。」
「総称ファミリ名はキーワードなので引用符で括ってはならない。」
　この３つのルールの最初と最後に反しています。

★こんなところで聞く前に、CSSやHTMLについては、まず仕様書を確認する癖を付けましょう。
　正確で正しい説明があります。それで解らないときに聞くようにすると効率的です。
★書き終えたら、必ずValidatorでチェックしましょう。
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
HTMLについては
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
　間違っているところを、ほぼ正確に教えてくれるので、とても勉強になります。

なお、仕様書は
CSS)
　REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
HTML4.01)
　HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )

＞AddType text/css .cssを記述してみましたが変わりません。
すでに設定してあるので不要です。「charsetを追記することは可能ですが、他のcharsetを指定することが出来なくなるので薦めません」

★family-nameは正確に記述する必要があります。メモ帳のなどを利用して正確な名称を記述しましょう。書式→フォントで、反転表示される名称をCtrl+Cでコピーする。
　フォント名をコピーできるフリーソフトもたくさんあります。

★CSSの記述の途中に誤った記述や、存在してはならない空白文字があるとその後のエラー処理の方法は決められていますが、必ずしもブラウザが同じ動作をするとは限りません。
3.3 エラーの規定について（Error conditions） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/conform.html#q3 )
4.2 解析エラーの処理方法（Rules for handling parsing errors） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#parsing-errors )
　そのため、全角文字や判読できない文字があると混乱します。必ずValidatorでチェックしたり、全角文字と半角文字の区別が出来るテキストエディタを使いましょう。