SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

マンガで分かるプログラミング用語辞典

「論理フォント」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(93)

解説

 コンピュータにはフォントが入っていますが、ある人のコンピュータと他の人のコンピュータで同じフォントが入っているとは限りません。そういった際、文書にフォントを指定すると不都合が生じます。指定したフォントがなければ、文字を描画できないためです。

 このような問題を回避する方法の一つは、あり得そうなフォントを片っ端から、複数指定しておくことです。こうしておけば、表示される環境に入っているフォントの中で、意図に近いフォントが選ばれ、描画されます。

 もう一つの方法は、「こういったタイプのフォント」と、抽象化して指定する方法です。「タイトルに使われるような、髭の付いていないフォント」「本文で使われるような、髭の付いているフォント」「手書き風フォント」のように、いくつかのグループで指定するというやり方です。

 この、後者のような指定の仕方をするフォントを「論理フォント」と呼びます。

 例えばHTMLでは、初めに複数のフォントを指定しておき、存在しない場合に、最終的に論理フォントでフォントを選ぶ、といった指定の仕方をすることが多いです。

サンプル

 HTMLでフォントを指定してみます(※このソースコードはUTF-8形式で保存してください)。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>「論理フォント」のサンプル</title>
    <style>
    div {
      font-size: 36px;
      font-weight: bold;
    }
    .s1 {
      /* 論理フォント serif(髭付きフォント)を指定 */
      font-family: serif;
    }
    .s2 {
      /* 物理フォント Georgiaを指定。
         なければ論理フォント serif */
      font-family: Georgia, serif;
    }
    </style>
  </head>
  <body>
    <div class="s1">CodeZine</div>
    <div class="s2">CodeZine</div>
  </body>
</html>
出力結果
出力結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/9143 2016/02/23 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー