人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: torimaki
●カテゴリ:コンピュータ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● みやど

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


torimakiさんのコメント
みやどさま、 コメントが遅くなってしまいました。失礼しました。 そのさいは、OSに用意されているフォントは、まったく関係ないことに、なりますでしょうか。たとえばブラウザーにはあるが、OSには、そのフォントがないといったような。

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

torimakiさんのコメント
みやどさま はい。ご回答、ありがとうございます。

2 ● a-kuma3
ベストアンサー

フォントは、ページのスタイルシートで指定されます。
スタイルシートは、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 ページが指定したフォントを優先する」というチェックボックスがあります。
このチェックを外すと、スタイルシートの指定が効かなくなります。
ブラウザのフォントの指定だけにしたがって、使われるフォントが決まります。


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


torimakiさんのコメント
a-Kuma3さま スタイルシートに関しては、まだ勉強不足ですが。ファミリーフォントなら、あっ、知っています。 当方、WordPress で、Tiny MCE Advanced(エディター用のプラグイン)を使用していまして。ここで、ファミリーフォントを選べるようになっているからです。 実際に、ファミリーフォントのタブから任意のフォントを選び、それが、どう書き込まれているか確認してみました。おしゃる通りのスタイルシートになっていました。 「フォントの種類を表すキーワード」について。こちらも、じっさいに試してみました。Font-familyの指定をserifに書きかえ、Firefoxで閲覧。確認することができました。 Webフォントについては、これから、じょじょに勉強してまいります。 当方、こういうふうに解釈してみました。 ウェッブページに書き込んだスタイルシート(font-family)が、閲覧者のブラウザー側で用意されているフォントを指定する。ただしブラウザー側で設定を変えると(「Web ページが指定したフォントを優先する」というチェックボックスのチェックを外すと)ブラウザー側のフォント指定に従う。 もっとも、上記の文の「閲覧者のブラウザー側で用意されているフォント」というのは、「OS側で用意されているフォント」の方が正しい言い方なのかどうか、自信が持てませんが。。。 末筆になりましたが、コメントが遅くなってしまい申しわけありませんでした。また言葉の使い方などに自信がない故、乱筆になっているかもしれません。その際は、どうぞご容赦くださーい!

a-kuma3さんのコメント
>> もっとも、上記の文の「閲覧者のブラウザー側で用意されているフォント」というのは、「OS側で用意されているフォント」の方が正しい言い方なのかどうか、自信が持てませんが。。。 << 閲覧者のブラウザで<span style="color:red;">指定</span>されているフォントは、OSで用意されているフォントのどれか、になります。 font-family で指定したフォントも、OS でインストールされていないものは使いようがないので、font-family で複数指定されていれば、次、次と OS で用意されているかどうかを試されて、実際に使われるフォントが決まる、という感じです。 テンプレート的なスタイルシートだと、以下のような感じのをよく見ます。 >|css| P { font-family: "Windows でよくあるフォント","Mac でよくあるフォント",sans-serif; } ||< メジャーなOSに対しては、そのOSでメジャーなフォントを指定しておいて、その他の環境ではブラウザのデフォルトにお任せ、って感じな。

torimakiさんのコメント
a-kuma3さん Tiny MCE Advancedのフォントファミリーのタブからフォントを選び、スタイルシートを確かめてみますと、 選んだフォントが、まずさいしょに記述され、つぎに、当プラグインにより任意に選ばれたフォントが記述されるようになっています。 たとえば。。。 Andale Monoを選ぶと'andale mono', times; Araiを選ぶとarial, helvetica, sans-serif; Arial Blackを選ぶと、'arial black', 'avant garde'; というふうに。 もっとも「任意に選ばれたとフォント」と書いてしまいましたが。当プラグインの方では、気をつかって、なにかの基準で、その組み合わせを選んでいるのでしょうけれど… と、ここまで書いて、わ、また基本的な質問が。。。とくに、フォントファミリーを指定しないばあい、ブラウザーでは、どのように表示されるんでしょ。

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

質問者から

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ