外部CSSでフォントの指定

2011/08/24 15:43

このQ&Aのポイント

外部CSSを使ってフォントの指定方法について調べました。
FireFoxでは外部CSSが反映されない問題がありますが、対策方法を見つけました。
フォントの部分はfont-familyプロパティを使って指定することができます。日本語はＭＳゴシック、英字はVerdanaを指定する方法を調べています。

minuu
お礼率36% (8/22)

CSS
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

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

ベストアンサー

tracer
ベストアンサー率41% (255/621)

2011/08/25 03:35 回答No.3

ちょっと厳しい言い方かもしれませんが、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　指定方法」での検索の方が、質の高い情報が得られます。

質問者

お礼 2011/08/26 22:51

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2011/08/25 01:28 回答No.2

>どなたか大抵のブラウザで日本語をＭＳゴシック、英字をVerdanaにする外部CSSの書き方を教えてください。 font-family１つでやるのは無理です。かなり端折りますが、 body { font-family: "MＳ　ゴシック" } .en { font-family: Verdana } としておいて、 このページはFirefox、IEで表示確認しています。 などと、単語ごとにフォント（class）を変える指定をしてください。本来はclassよりもlang="en"の方がいいのですが、 span[lang=en]などのセレクタに対応していないブラウザ（のバージョン）も多く使われています。

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/24 19:49 回答No.1

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でチェックしたり、全角文字と半角文字の区別が出来るテキストエディタを使いましょう。