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フォント
[編集]歴史
[編集]![[icon]](/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Wiki_letter_w_cropped.svg){kind=small} | この節の加筆が望まれています。 |
ファイルフォーマット
[編集] | この節の加筆が望まれています。 |
TrueDoc
[編集]Embedded OpenType
[編集]Scalable Vector Graphics
[編集]TrueType/OpenType
[編集]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フォント提供サービス
[編集]- Google Fonts
- Adobe Fonts
- Adobe Edge Web Fonts
- TypeSquare - モリサワとタイプバンクの和文Webフォントが有料で提供されている。MORISAWA PASSPORTにも利用権が付属している。
- FONTPLUS - フォントワークス、イワタ、モトヤ、白舟書体、モリサワの和文Webフォントが有料で提供されている。
- DynaFont Online - ダイナコムウェアが提供する有料和文Webフォントサービス。和文以外に中国語簡体字・繁体字も提供されている。2019年4月以降は同社の「DynaSmart」シリーズに利用権が付随する形となっている。
- REALTYPE - 自作のフォントを登録してWebフォントとして販売、利用できるWebフォントプラットフォーム。
- FontStream - タイプラボ、欣喜堂などの和文Webフォントが有料で提供されている。
- ウェブフォントファン - 和文Webフォント、Wordpress用フォントプラグインが有料で提供されている。
- もじでぱ
- WebLiFEサーバー
- Fontdeck
- Fonts.com
- Fontspring
- Font Squirrel
関連項目
[編集]脚注
[編集]- ^ “国内初の日本語対応ウェブフォントサービス「デコもじ」を開始ウェブフォント関連事業に本格参入”. Ascii.jp (2010年5月10日). 2013年4月10日閲覧。
- ^ “ソフトバンク・テクノロジー社の「フォントプラス」がフォントワークス書体に対応”. フォントワークス (2011年7月27日). 2013年2月11日閲覧。[リンク切れ]
- ^ “クラウドフォントサービス「TypeSquare（仮称）」を発表”. モリサワ (2011年8月10日). 2013年2月11日閲覧。
- ^ 安田英久 (2015年3月10日). “Web担当者Forum 編集長ブログ グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？”. 2017年4月24日閲覧。
- ^ Shapiro, Melissa (2009-10-20), Mozilla Supports Web Open Font Format, Mozilla 2010年2月5日閲覧。
- ^ Gilbertson, Scott (2010-04-26), Google Chrome to Support the Web Open Font Format, webmonkey
- ^ Bug 38217 - [chromium] Add WOFF support, WebKit
- ^ Web specifications support in Opera Presto 2.7, Opera
- ^ Galineau, Sylvain (2010-04-23), Meet WOFF, The Standard Web Font Format, Microsoft
- ^ Kaplan, Gregor (2015年6月16日). “日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。”. The Typekit Blog. 2024年2月5日閲覧。
外部リンク
[編集]- WebフォントのCSSとライセンス記載例 - Qiita
- Google Fonts
- 【簡単】Webフォントの使い方！Google web fontsを使ってみよう - FASTCODING BLOG
- Google が提供する日本語 Web フォント - Qiita
- 外字Web Server - ダイナコムウェア株式会社
- Webフォントの設定【サーバにフォントをインストール】 - SEO白書
