コンテンツにスキップ

Webフォント

出典: フリー百科事典『ウィキペディア（Wikipedia）』

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
カテゴリ カテゴリ
「https://ja.wikipedia.org/w/index.php?title=Webフォント&oldid=101555993」から取得
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy