ブラウザー上で表示されるフォントは、ブラウザーに準拠しているのですか、それともOSですか(たとえばOS側に入っているフォントが表示されるとか)。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/04/30 11:04:10
  • 終了:2015/05/06 18:13:16

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4521ベストアンサー獲得回数18792015/04/30 13:59:56

フォントは、ページのスタイルシートで指定されます。
スタイルシートは、font-family で指定します。
指定が無ければ、デフォルトのフォントが選択されます。

対象 {
    font-family: フォント1,フォント2,フォント3, ...;
}

対象(タグやクラス属性などで指定する)に対して、フォント名を複数設定できます。
左から順番に、その環境(OS)で使えるものが選択されます。

フォント名として使えるものは、三種類あります。

  1. 具体的なフォント名
  2. フォントの種類を表すキーワード
  3. Web フォント

2番目のキーワードは sans-serif(ゴシック系)や serif(明朝系)などがあります。
具体的に、どんなフォントが該当するかは、ブラウザの設定になります。
例えば、Firefox では、以下のような設定画面で、キーワードとフォントの対応付けを指定できます。
f:id:a-kuma3:20150430135134p:image
この設定のブラウザで、以下のようなスタイルシートの指定をすると、「MS P明朝」が使われます。

DIV {
    font-famiry: serif;     /* serif という名前のフォントがあるわけじゃあない */
}

3番目の Web フォントというのは、OS にインストールされていないフォントを使う方法です。
Webサーバにフォントファイルを用意して、URL でアクセスできるようにしておきます。
スタイルシートの @font-face で、フォントファイルを指す URL とフォント名が紐づくような定義をします。

@font-face {
    font-family: 'hoge_font';       /* hoge_font という名前で                     */
    src: url('/font/hoge.ttf');     /* URL で指定されたフォントを使えるようにする */
}

DIV {
    font-famiry: hoge_font;     /* @font-face で宣言した hoge_font というフォント名が使える */
}


先のフォントの設定ダイアログをよく見ると、「Web ページが指定したフォントを優先する」というチェックボックスがあります。
このチェックを外すと、スタイルシートの指定が効かなくなります。
ブラウザのフォントの指定だけにしたがって、使われるフォントが決まります。


大体こんな感じで、最近のブラウザは表示するフォントを決めています。
ブラウザの実装によるので、この規則に従わないものもあったりはしますが。

他2件のコメントを見る
id:torimaki

a-kuma3さん

Tiny MCE Advancedのフォントファミリーのタブからフォントを選び、スタイルシートを確かめてみますと、

選んだフォントが、まずさいしょに記述され、つぎに、当プラグインにより任意に選ばれたフォントが記述されるようになっています。

たとえば。。。
Andale Monoを選ぶと'andale mono', times;
Araiを選ぶとarial, helvetica, sans-serif;
Arial Blackを選ぶと、'arial black', 'avant garde';
というふうに。

もっとも「任意に選ばれたとフォント」と書いてしまいましたが。当プラグインの方では、気をつかって、なにかの基準で、その組み合わせを選んでいるのでしょうけれど…

と、ここまで書いて、わ、また基本的な質問が。。。とくに、フォントファミリーを指定しないばあい、ブラウザーでは、どのように表示されるんでしょ。

2015/05/05 19:52:33
id:torimaki

a-kuma3さん

先の、フォントファミリーを指定しない場合の表示について。参考になるウェッブサイトを見つけました。みなさまのおかげで、その内容を理解することが出来るようになりました。ありがとうございまーす!
http://www.6666666.jp/design/20140428/

2015/05/06 06:40:55

その他の回答(1件)

id:MIYADO No.1

みやど回答回数366ベストアンサー獲得回数762015/04/30 11:54:48

ブラウザーの設定をいじれば変えられます。
もちろん、そもそも入っていないフォントにはできませんが。

他1件のコメントを見る
id:MIYADO

フォントはOSの管理下にあります。
OSに最初から入っているかあるいは後から加えたフォントが使えます。

2015/05/05 18:31:24
id:torimaki

みやどさま

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

2015/05/05 19:53:39
id:a-kuma3 No.2

a-kuma3回答回数4521ベストアンサー獲得回数18792015/04/30 13:59:56ここでベストアンサー

フォントは、ページのスタイルシートで指定されます。
スタイルシートは、font-family で指定します。
指定が無ければ、デフォルトのフォントが選択されます。

対象 {
    font-family: フォント1,フォント2,フォント3, ...;
}

対象(タグやクラス属性などで指定する)に対して、フォント名を複数設定できます。
左から順番に、その環境(OS)で使えるものが選択されます。

フォント名として使えるものは、三種類あります。

  1. 具体的なフォント名
  2. フォントの種類を表すキーワード
  3. Web フォント

2番目のキーワードは sans-serif(ゴシック系)や serif(明朝系)などがあります。
具体的に、どんなフォントが該当するかは、ブラウザの設定になります。
例えば、Firefox では、以下のような設定画面で、キーワードとフォントの対応付けを指定できます。
f:id:a-kuma3:20150430135134p:image
この設定のブラウザで、以下のようなスタイルシートの指定をすると、「MS P明朝」が使われます。

DIV {
    font-famiry: serif;     /* serif という名前のフォントがあるわけじゃあない */
}

3番目の Web フォントというのは、OS にインストールされていないフォントを使う方法です。
Webサーバにフォントファイルを用意して、URL でアクセスできるようにしておきます。
スタイルシートの @font-face で、フォントファイルを指す URL とフォント名が紐づくような定義をします。

@font-face {
    font-family: 'hoge_font';       /* hoge_font という名前で                     */
    src: url('/font/hoge.ttf');     /* URL で指定されたフォントを使えるようにする */
}

DIV {
    font-famiry: hoge_font;     /* @font-face で宣言した hoge_font というフォント名が使える */
}


先のフォントの設定ダイアログをよく見ると、「Web ページが指定したフォントを優先する」というチェックボックスがあります。
このチェックを外すと、スタイルシートの指定が効かなくなります。
ブラウザのフォントの指定だけにしたがって、使われるフォントが決まります。


大体こんな感じで、最近のブラウザは表示するフォントを決めています。
ブラウザの実装によるので、この規則に従わないものもあったりはしますが。

他2件のコメントを見る
id:torimaki

a-kuma3さん

Tiny MCE Advancedのフォントファミリーのタブからフォントを選び、スタイルシートを確かめてみますと、

選んだフォントが、まずさいしょに記述され、つぎに、当プラグインにより任意に選ばれたフォントが記述されるようになっています。

たとえば。。。
Andale Monoを選ぶと'andale mono', times;
Araiを選ぶとarial, helvetica, sans-serif;
Arial Blackを選ぶと、'arial black', 'avant garde';
というふうに。

もっとも「任意に選ばれたとフォント」と書いてしまいましたが。当プラグインの方では、気をつかって、なにかの基準で、その組み合わせを選んでいるのでしょうけれど…

と、ここまで書いて、わ、また基本的な質問が。。。とくに、フォントファミリーを指定しないばあい、ブラウザーでは、どのように表示されるんでしょ。

2015/05/05 19:52:33
id:torimaki

a-kuma3さん

先の、フォントファミリーを指定しない場合の表示について。参考になるウェッブサイトを見つけました。みなさまのおかげで、その内容を理解することが出来るようになりました。ありがとうございまーす!
http://www.6666666.jp/design/20140428/

2015/05/06 06:40:55
id:torimaki

みやどさま、a-kuma3さま、ご回答ありがとうございます。理解するまで、少々お時間を。お返事は、しばしお待ちを。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません