CSS Fonts / Web Fonts

[74] CSS Fonts は、CSS におけるフォントの扱いに関する仕様書です。

仕様書

[30] CSS Fonts Module Level 3 (2015-11-26 11:03:38 +09:00 版) https://drafts.csswg.org/css-fonts/

プロトコル

[88] CSS Fonts

ウェブフォントのトラブルシューティング

[83] Chrome でファイルサイズが大きなファイルを @font-face で指定すると開発者コンソールに

Failed to decode downloaded font: https://host/path/to/file.ttf
OTS parsing error: Web font size more than 30MB

と出てフォントは利用されません。

[84] third_party/WebKit/Source/platform/fonts/WebFontDecoder.cpp - chromium/src - Git at Google, 2022-07-31T07:08:30.000Z https://chromium.googlesource.com/chromium/src/+/d5cec19a655dbb722f75bfccdaa44f69c0827e64/third_party/WebKit/Source/platform/fonts/WebFontDecoder.cpp#189

[85] Chrome で開発者コンソールに

Failed to decode downloaded font: http://host/path/to/file.woff
OTS parsing error: glyf: Failed to serialize table

と出る

Firefox の開発者コンソールに

downloadable font: rejected by sanitizer

と出る

→ “なんかよくわからない”エラー。原因はいろいろあるのかもしれません。

このケースはグリフを削ってファイルサイズを小さくするとエラーが出なくなりました。ファイルサイズが原因かもしれませんし、変なグリフデータが混ざってたのかもしれないし謎。

[86] Chrome

OTS parsing error: cmap: Failed to parse table

Firefox

downloadable font: cmap: Bad mapping ( -> 0) in mapping of variation selector 0

U+0000 - U+007F あたりが入っていないフォントを作るとこういうエラーが出ます。

歴史

[91] Font Embedding, InetSDK, 2024-08-17T06:49:51.000Z, 2000-11-16T23:34:02.404Z https://web.archive.org/web/20001116231800/http://msdn.microsoft.com/workshop/Author/fontembed/font_embed.asp

[89] Dynamic HTML in Communicator, 2024-08-16T08:56:25.000Z, 2000-12-06T09:37:29.248Z https://web.archive.org/web/20001206092700/http://developer.netscape.com/docs/manuals/communicator/dynhtml/webfont1.htm#1032362

[90] Netscape Communicator | Dynamic Font Support, 2024-08-16T09:09:12.000Z, 1997-06-13T23:23:00.119Z https://web.archive.org/web/19970613231243/http://home.netscape.com/comprod/products/communicator/fonts/index.html

[12] CSS の @font-face 規則は、スタイル・シートで使用するフォントを定義します。フォントの URL や特徴を現す記述子を@規則内に指定することができます。

スタイル・シートによって URL で指定したフォントを Web 文書上で用いる技術は Web Fonts と呼ばれています。 @font-face 規則は Web Fonts を実現する構文です。

[13] 歴史:

Web Fonts は WinIE 4 に実装され、 CSS 2 勧告に取り込まれるなど1998年頃に大きな話題になりましたが、 Netscape Navigator が非互換な構文を採用していたことなどから普及には至らず、長らく忘れられてきました。 CSS 2.1 からも除外され、別途 CSS 3 モジュールとして標準化が続行されることになっていました。

しかし 2007年頃から再び注目を集め、 WinIE 以外の主要 Webブラウザの開発者も Web Fonts への支持を表明するようになりました。 Acid3 の試験項目の1つに取り入れられたこともあって、 2009年頃にはすべての主要 Webブラウザの正式版で Web Fonts が利用可能になると期待されます。

ただし、 Microsoft とそれ以外でフォントの形式に関する対立が続いている (Microsoft などは EOT を推進。) など、不安材料は残っています。

[1] @font-face: fonts the way you want them - CSS3 . Info (2007-06-09 22:10:12 +09:00 版) http://www.css3.info/font-face-fonts-the-way-you-want-them/ (名無しさん 2007-06-09 13:28:59 +00:00)

[2] Håkon Wium Lie on the future of the web - CSS3 . Info (2007-06-09 22:10:03 +09:00 版) http://www.css3.info/hakon-wium-lie-on-the-future-of-the-web/ (名無しさん 2007-06-09 13:30:20 +00:00)

[3] Håkon Wium Lie on the future of the web - CSS3 . Info (2007-06-09 22:10:03 +09:00 版) http://www.css3.info/hakon-wium-lie-on-the-future-of-the-web/ (名無しさん 2007-06-09 13:31:06 +00:00)

[4] Håkon Wium Lie on the future of the web - CSS3 . Info (2007-06-09 22:10:03 +09:00 版) http://www.css3.info/hakon-wium-lie-on-the-future-of-the-web/ (名無しさん 2007-06-09 13:31:54 +00:00)

[5] A blog? with Σαιτω - 次期 Opera - @font-face (2007-06-10 00:22:29 +09:00 版) http://d.hatena.ne.jp/saiton/20070609/1181401037 (名無しさん 2007-06-10 04:18:03 +00:00)

[6] Charbax Blog » Håkon Wium Lie’s keynote at Reboot (2007-06-24 11:26:57 +09:00 版) http://charbax.com/2007/06/19/hakonwiumlie-keynote-at-reboot/ (名無しさん 2007-06-24 03:12:06 +00:00)

[7] A blog? with Σαιτω - Opera at Reboot (2007-06-24 09:35:27 +09:00 版) http://d.hatena.ne.jp/saiton/20070622/1182468123 (名無しさん 2007-06-24 03:12:35 +00:00)

[8] Webkit has web fonts support - CSS3 . Info (2007-10-06 19:42:56 +09:00 版) http://www.css3.info/webkit-has-web-fonts-support/ (名無しさん)

[9] The resurrection of downloadable Web fonts | 456 Berea Street (Roger Johansson 著, 2007-10-10 21:04:41 +09:00 版) http://www.456bereastreet.com/archive/200710/the_resurrection_of_downloadable_web_fonts/ (名無しさん)

[10] 2007-10-06 - 最速チュパカブラ研究会 (2007-11-02 20:53:06 +09:00 版) http://d.hatena.ne.jp/gyuque/20071006#1191670307

[11] @font-face in the wild - CSS3 . Info (2008-11-11 21:45:35 +09:00 版) http://www.css3.info/font-face-in-the-wild/

[12] typeface.js -- Rendering text with Javascript, <canvas>, and VML (2008-11-14 19:59:28 +09:00 版) http://typeface.neocracy.org/

canvas や VML で Web Fonts 的なことをやってます。

[14] Web Font Optimizer (2009-01-22 17:48:21 +09:00 版) http://fonts.philip.html5.org/

[15] Firefox 3.1 for developers - MDC (2009-02-08 18:25:06 +09:00 版) https://developer.mozilla.org/ja/Firefox_3.1_for_developers#.E6.96.B0.E3.81.97.E3.81.8F.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.9F.E6.A9.9F.E8.83.BD

[16] CSS3 Module: Fonts (2009-01-21 16:28:05 +09:00 版) http://dev.w3.org/cvsweb/~checkout~/csswg/css3-fonts/Fonts.html?content-type=text/html;%20charset=utf-8

[17] CSS Fonts Module Level 3 (2009-06-19 18:22:02 +09:00 版) http://www.w3.org/TR/2009/WD-css3-fonts-20090618/

[18] WebFonts Working Group public page (2010-03-18 00:42:21 +09:00 版) http://www.w3.org/Fonts/WG/

[19] CSS Fonts Module Level 3 ( (2012-08-22 22:28:33 +09:00 版)) http://www.w3.org/TR/2012/WD-css3-fonts-20120823/

[20] Web Applications 1.0 r7289 Make @font-face in <style scoped> make more sense ( (2012-08-28 08:16:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=7288&to=7289

[21] Web Applications 1.0 r8120 Update HTML to reference future CSS spec for scoped style sheets. I'm leaving the @global stuff there for now, but removing the stuff about @font-face since that's controversial. ( (2013-08-02 06:50:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=8119&to=8120

[22] IRC logs: freenode / #whatwg / 20130821 ( (2013-08-24 16:23:48 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130821

[23] Surfin' Safari - Blog Archive » Downloadable Fonts ( (2013-11-16 16:28:14 +09:00 版)) https://www.webkit.org/blog/124/downloadable-fonts/

[24] Web Applications 1.0 r8705 Update to ref FontFace instead of FontLoader ( (2014-08-05 07:56:00 +09:00 版)) http://html5.org/r/8705

[25] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema (2011-09-29 13:00:00 +09:00 版) http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a16_21_style_font-face_

[26] CSS Fonts Module Level 3 ( (2012-12-08 00:12:51 +09:00 版)) http://www.w3.org/TR/2012/WD-css3-fonts-20121211/

[27] CSS Fonts Module Level 3 ( (2013-07-11 22:24:38 +09:00 版)) http://www.w3.org/TR/2013/WD-css-fonts-3-20130711/

[28] CSS Fonts Module Level 3 ( (2013-10-02 01:23:19 +09:00 版)) http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/

[29] CSS Fonts Module Level 3 ( (2013-09-17 15:52:00 +09:00 版)) http://dev.w3.org/csswg/css-fonts/

[36] A blog? with Σαιτω - Web-Fonts (2007-09-12 20:54:52 +09:00 版) http://d.hatena.ne.jp/saiton/20070909/1189310820

[37] Web Fonts 、CSS 3までの流れと適用方法 | クリエイティブ・タブロイド withD(ウィズ・ディー) (2008-10-29 01:08:41 +09:00 版) http://withd.jp/web/tips/standard/2657.html

[38] Dynamic HTML in Communicator (1997-08-13 09:33:24 +09:00 版) http://web.archive.org/web/19971016003150/developer.netscape.com/library/documentation/communicator/dynhtml/webfont1.htm#1032362

[39] Dynamic HTML in Communicator (1997-08-13 09:33:24 +09:00 版) http://web.archive.org/web/19971016003150/developer.netscape.com/library/documentation/communicator/dynhtml/webfont1.htm#1032362

[40] Netscape Communicator | Dynamic Font Support (2008-10-29 01:09:56 +09:00 版) http://web.archive.org/web/19970709110903/http://home.netscape.com/comprod/products/communicator/fonts/index.html

[41] IE, Fx, Safari, Opera で Web Fonts を使う | ヨモツネット (2008-12-20 09:47:56 +09:00 版) http://www.yomotsu.net/lab/css/webfonts

[42] Webfonts demo and test pages (2009-01-05 22:14:13 +09:00 版) http://www.princexml.com/howcome/2008/webfonts/

[43] Scalable Vector Graphics - Embedded Font Location (2009-02-01 22:08:54 +09:00 版) http://www.adobe.com/jp/svg/illustrator/embedded.html

埋め込みフォントの配置オプションを利用すると、文書に直接フォントを埋め込む(この場合、フォントは常にファイル内に含まれます)、あるいは、元のIllustratorファイルとは別に書き出したフォント・ファイルへSVG ファイルをリンクすることが可能です。この機能は、同じタイプフェースを共有する複数のSVGファイルがある場合、とりわけ便利なものです。CSSと同じように、複数のSVGファイルがすべて同じフォント・ファイルを参照することができます。Illustratorは、CEF (Compact Embedded Font)形式でフォントを保存します。CEFフォントでは、Type1フォントとTrueTypeフォント両方で制作することが可能であるだけでなく、元のType1フォントのヒンティングやカーニングの情報を保持することが可能です。CEFフォント・ファイルは、[すべての文字]書き出しオプションで保存された場合でも、元のフォントよりもはるかに小さくなります。通常10K以下のサイズです。CEFフォントは、SVG仕様に特化して定義されたものではなく、仕様では、CEF形式をサポートしていないSVGビューアは、ユーザのシステムにある類似フォントや、プラットフォーム非依存のヒントされないフォント形式(つまりSVGフォント)で代用することになっています。これにより、CEFフォントをサポートしていないがアンチエイリアス・テキスト・レンダリングをサポートするようなビューアで満足のいく結果が得られることになります。

FOP 機能チェック (2002-10-08 06:38:16 +09:00 版) http://www.teria.com/~koseki/memo/fop/fop.html

Illustrator 9.0のSVG出力プラグインは、フォントを(SVG仕様にあるSVG fontでは無く)CEFフォントという形式で出力します。このCEFフォントを含むSVGファイルはFOP(Batik)では扱えないようです。Illustratorが出力したSVGの、フォント埋め込み部分は以下のような見た目になってました。
    @font-face{font-family:'Osaka';src:url("data:;base64,\ T1RUTwACACAAAQAAQ0ZGIERfPA4AAAAsAAAB22NtYXAA0QDiAAACCAAAAEQBAAQCAAEBAQZPc2Fr\ 

[44] Web Fonts が流行ると、勝手に記号や絵文字を割り当てた Symbol とかあの類の独自フォントがないと読めない Web頁が増えそうでいやですね。

[45] IRC logs: freenode / #whatwg / 20090812 (2009-10-10 21:23:35 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090812#l-62

[46] IRC logs: freenode / #whatwg / 20091022 (2009-12-11 08:54:04 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20091022#l-31

[47] Web Fonts Working Group (2010-02-12 04:43:26 +09:00 版) http://www.w3.org/2009/08/WebFonts/charter.html

[48] Web Fonts Working Group (2010-02-12 04:43:26 +09:00 版) http://www.w3.org/2009/08/WebFonts/charter.html

[49] Web Fonts Working Group (2010-03-17 22:11:56 +09:00 版) http://www.w3.org/2009/08/WebFonts/charter.html

[50] WebFonts Working Group public page (2010-03-19 00:25:39 +09:00 版) http://www.w3.org/Fonts/

[51] Google Font API - Google Code (2010-05-20 09:49:00 +09:00 版) http://code.google.com/intl/ja/apis/webfonts/

[52] IRC logs: freenode / #whatwg / 20100428 (2010-05-20 00:44:06 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100428

[53] IRC logs: freenode / #whatwg / 20100625 (2010-06-29 00:39:18 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100625#l-147

[54] IRC logs: freenode / #whatwg / 20101012 ( (2010-10-23 00:20:11 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20101012#l-779

[55] まどか☆マギカのルーンフォントをはてダで使ってみたよ - y-kawazの日記 ( (2011-02-26 01:32:58 +09:00 版)) http://d.hatena.ne.jp/y-kawaz/20110225/1298572030

[56] CSS Fonts Module Level 3 ( (2011-03-23 19:13:13 +09:00 版)) http://www.w3.org/TR/2011/WD-css3-fonts-20110324/

[57] CSS Fonts Module Level 3 ( (2011-10-04 01:35:15 +09:00 版)) http://www.w3.org/TR/2011/WD-css3-fonts-20111004/

[58] Joint meeting of the CSS/WebApps/WebFonts WGs ( (Levantovsky, Vladimir 著, 2011-10-06 04:36:33 +09:00 版)) http://lists.w3.org/Archives/Public/public-webapps/2011OctDec/0097.html

[59] Bulletproof @font-face syntax « Paul Irish (2012-04-02 01:09:18 +09:00 版) http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

[60] 意外と多い!? Web フォントに対応していない環境 ~2012 年の Web フォント事情 - てっく煮ブログ (2012-04-26 14:25:01 +09:00 版) http://d.hatena.ne.jp/nitoyon/20120426/web_font_popularity

[61] CSS Fonts Module Level 3 ( (2013-02-08 00:17:59 +09:00 版)) http://www.w3.org/TR/2013/WD-css3-fonts-20130212/

[62] Ligature Icon フォントセットの自作方法とWebFont - くらげだらけ ( (2013-02-17 06:02:36 +09:00 版)) http://kudakurage.hatenadiary.com/entry/20120701/1341116002

[63] 【完全版】Ligature Symbols フォントセットの自作方法 - くらげだらけ ( (2013-02-17 06:05:06 +09:00 版)) http://kudakurage.hatenadiary.com/entry/20120720/1342749116

[64] Webフォントを使うときは空のグリフに注意 - cockscomblog? ( (2013-04-24 02:00:30 +09:00 版)) http://cockscomb.hatenablog.com/entry/2013/04/23/201828

[65] Chrome でも他の起源のフォントは Access-Control-Allow-Origin: がないと使わなくなったみたいです。 2014-09-13T11:11:00.100Z

[66] 5-2-1. CSSのfont-familyに対する各ブラウザの挙動 ( (2014-03-21 09:52:25 +09:00 版)) http://www.akenotsuki.com/eyeben/font/wfstat.html

[31] David Baron's weblog: Downloadable font formats for the Web (2015-03-17 00:53:01 +09:00 版) http://dbaron.org/log/20090317-fonts

[32] ウェブ・フォントの読み込み - Weblog - Hail2u.net (2015-03-20 07:35:33 +09:00 版) http://hail2u.net/blog/webdesign/loading-web-fonts.html?fb_ref=Default

[33] A List Apart: Articles: CSS @ Ten: The Next Big Thing (2007-09-01 12:23:10 +09:00 版) http://www.alistapart.com/articles/cssatten

[34] Building a more interoperable Web with Microsoft Edge (2015-06-18 12:15:24 +09:00 版) http://blogs.windows.com/msedgedev/2015/06/17/building-a-more-interoperable-web-with-microsoft-edge/

As another example, the mobile Web depends on your browser downloading font resources without checking the CORS headers and ‘installable’ flag (as per spec) — we’ve had to change to WebKit behavior in our mobile browsers to make the mobile Web work.

[35] Improved Font Loading | WebKit (2016-06-28 11:24:56 +09:00) https://webkit.org/blog/6643/improved-font-loading/

Older versions of WebKit would continue to show this invisible text until the font completes downloading. Instead, newer versions of WebKit will show this invisible text for a maximum of 3 seconds, at which point it will switch to a local font chosen from the element’s style before finally switching to the downloaded font when the download completes.

[67] Remove unnecessary and unimplemented canvas tainting when painting text (domenic著, 2016-07-15 02:21:54 +09:00) https://github.com/whatwg/html/commit/6c76b617d2b45326afea2625d174ce2fd5ab6423

[68] Delivering Octicons with SVG (2016-07-30 15:57:41 +09:00) https://github.com/blog/2112-delivering-octicons-with-svg