Webフォント

WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブ�…

Webフォント
ウィキペディア ウィキペディアなどでのWebフォントの利用については、言語メニューの設定から、フォント→「フォントが必要な際にダウンロードする」です。詳細は「ユニバーサル言語選択拡張」を参照。

WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化（レンダリング）をともなうクライアントが文字表示（カーニング）を行うシステムおよびそのフォントである。CSS3.0 fonts moduleで、この機能の標準が提供された。

概要

元来、webブラウザは端末にインストールされているフォントを呼び出し文字を表示するが、端末にそのフォントが無ければ、Webデザイナーが意図しない表示がなされてしまうため、フォントに関するWebデザインに制約が生じていた。フォントを画像にして表示するという手はあるものの、文章修正のメンテナンス、文章の検索といった点で問題があった。

そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。

漢字は膨大な数であり、Webフォントのダウンロード量など、ラテン文字と比較して課題があったが、2010年、2011年頃から日本語に対応したWebフォントサービスが開設された[1][2][3]。また、Google Fontsも2014年頃から日本語フォントが追加されている[4]。

Webフォント

歴史

ファイルフォーマット

TrueDoc

Embedded OpenType

→詳細は「OpenType」を参照

Scalable Vector Graphics

→詳細は「Scalable Vector Graphics」を参照

TrueType/OpenType

→詳細は「TrueType」および「OpenType」を参照

Web Open Font Format

→詳細は「Web Open Font Format」を参照

Web Open Font Format をサポートするブラウザは、Mozilla Firefox 3.6+、[5] Google Chrome 5+、[6][7] Opera Presto,[8] 、Internet Explorer 9 (2011年5月14日)[9]。Mac OS X LionのSafari 5.1。

Webフォント対応ブラウザ

  • IE (eotのみ)
  • Firefox
  • Chrome
  • Android標準ブラウザ
  • Opera
  • Safari

サブセット化とダイナミック・サブセッティング

サブセット化

ページの読み込みを高速化するためには、フォントのファイルサイズを小さくする必要があるため、必要な字だけを含むフォントのサブセット（フォントを一部の文字数にしたもの）を作ることがある。これをサブセット化という。

ダイナミック・サブセッティング

日本語や中国語のような言語では、文字が多いため元のフォントに収録される文字全てを合わせると、数メガバイトの容量に至ってしまう。このため、サブセット作成を動的に行う技術が用いられ、ダイナミック・サブセッティングとよばれる。Webサイトで実行されるJavaScriptで、ページ内で使用される全ての文字を検出し、必要となる文字をサブセットとしてサーバーから呼び出す仕組みである。

Adobe TypekitやTypeSquareではこの技術が採用されている[10]。

問題点

ブラウザー側で「ウェブサイトで指定したフォントを使用しない」設定を有効にしたり、ユーザースタイルシートを使用している場合、Webフォントが表示されなくなる場合がある。特にこの問題は、アイコンフォントのような、閲覧環境に代替するフォントが存在しない場合に顕著である。

Webフォント提供サービス

関連項目

脚注

[脚注の使い方]
  1. ^ “国内初の日本語対応ウェブフォントサービス「デコもじ」を開始ウェブフォント関連事業に本格参入”. Ascii.jp (2010年5月10日). 2013年4月10日閲覧。
  2. ^ “ソフトバンク・テクノロジー社の「フォントプラス」がフォントワークス書体に対応”. フォントワークス (2011年7月27日). 2013年2月11日閲覧。[リンク切れ]
  3. ^ “クラウドフォントサービス「TypeSquare（仮称）」を発表”. モリサワ (2011年8月10日). 2013年2月11日閲覧。
  4. ^ 安田英久 (2015年3月10日). “Web担当者Forum 編集長ブログ グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？”. 2017年4月24日閲覧。
  5. ^ Shapiro, Melissa (2009-10-20), Mozilla Supports Web Open Font Format, Mozilla, http://blog.mozilla.com/blog/2009/10/20/mozilla-supports-web-open-font-format/ 2010年2月5日閲覧。 
  6. ^ Gilbertson, Scott (2010-04-26), Google Chrome to Support the Web Open Font Format, webmonkey, http://www.webmonkey.com/2010/04/google-chrome-to-support-the-web-open-font-format 
  7. ^ Bug 38217 - [chromium] Add WOFF support, WebKit, https://bugs.webkit.org/show_bug.cgi?id=38217 
  8. ^ Web specifications support in Opera Presto 2.7, Opera, http://www.opera.com/docs/specs/presto27/ 
  9. ^ Galineau, Sylvain (2010-04-23), Meet WOFF, The Standard Web Font Format, Microsoft, http://blogs.msdn.com/ie/archive/2010/04/23/meet-woff-the-standard-web-font-format.aspx 
  10. ^ Kaplan, Gregor (2015年6月16日). “日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。”. The Typekit Blog. 2024年2月5日閲覧。

外部リンク

印刷
組版
ページ
紙
文字
書式
欧文書体
漢字仮名書体
五体
印刷
その他
フォント
約物
単位
DTP
カテゴリ カテゴリ

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.