Web Fonts

CSS Fonts / Web Fonts

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

仕様書

プロトコル

[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, 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, , https://web.archive.org/web/20001116231800/http://msdn.microsoft.com/workshop/Author/fontembed/font_embed.asp

[89] Dynamic HTML in Communicator, , https://web.archive.org/web/20001206092700/http://developer.netscape.com/docs/manuals/communicator/dynhtml/webfont1.htm#1032362

[90] Netscape Communicator | Dynamic Font Support, , 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 FontsWinIE 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 - 最速チュパカブラ研究会 ( 版) http://d.hatena.ne.jp/gyuque/20071006#1191670307

[11] @font-face in the wild - CSS3 . Info ( 版) http://www.css3.info/font-face-in-the-wild/

[12] typeface.js -- Rendering text with Javascript, <canvas>, and VML ( 版) http://typeface.neocracy.org/

canvasVMLWeb Fonts 的なことをやってます。

[14] Web Font Optimizer ( 版) http://fonts.philip.html5.org/

[15] Firefox 3.1 for developers - MDC ( 版) 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 ( 版) http://dev.w3.org/cvsweb/~checkout~/csswg/css3-fonts/Fonts.html?content-type=text/html;%20charset=utf-8

[17] CSS Fonts Module Level 3 ( 版) http://www.w3.org/TR/2009/WD-css3-fonts-20090618/

[18] WebFonts Working Group public page ( 版) http://www.w3.org/Fonts/WG/

[19] CSS Fonts Module Level 3 ( ( 版)) 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 ( ( 版)) 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. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8119&to=8120

[22] IRC logs: freenode / #whatwg / 20130821 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130821

[23] Surfin' Safari - Blog Archive » Downloadable Fonts ( ( 版)) https://www.webkit.org/blog/124/downloadable-fonts/

[24] Web Applications 1.0 r8705 Update to ref FontFace instead of FontLoader ( ( 版)) http://html5.org/r/8705

[25] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema ( 版) 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 ( ( 版)) http://www.w3.org/TR/2012/WD-css3-fonts-20121211/

[27] CSS Fonts Module Level 3 ( ( 版)) http://www.w3.org/TR/2013/WD-css-fonts-3-20130711/

[28] CSS Fonts Module Level 3 ( ( 版)) http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/

[29] CSS Fonts Module Level 3 ( ( 版)) 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 ( 版) http://web.archive.org/web/19970709110903/http://home.netscape.com/comprod/products/communicator/fonts/index.html

[41] IE, Fx, Safari, Opera で Web Fonts を使う | ヨモツネット ( 版) http://www.yomotsu.net/lab/css/webfonts

[42] Webfonts demo and test pages ( 版) http://www.princexml.com/howcome/2008/webfonts/

[43] Scalable Vector Graphics - Embedded Font Location ( 版) 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 機能チェック ( 版) 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 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090812#l-62

[46] IRC logs: freenode / #whatwg / 20091022 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20091022#l-31

[47] Web Fonts Working Group ( 版) http://www.w3.org/2009/08/WebFonts/charter.html

[48] Web Fonts Working Group ( 版) http://www.w3.org/2009/08/WebFonts/charter.html

[49] Web Fonts Working Group ( 版) http://www.w3.org/2009/08/WebFonts/charter.html

[50] WebFonts Working Group public page ( 版) http://www.w3.org/Fonts/

[51] Google Font API - Google Code ( 版) http://code.google.com/intl/ja/apis/webfonts/

[52] IRC logs: freenode / #whatwg / 20100428 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100428

[53] IRC logs: freenode / #whatwg / 20100625 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100625#l-147

[54] IRC logs: freenode / #whatwg / 20101012 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20101012#l-779

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

[56] CSS Fonts Module Level 3 ( ( 版)) http://www.w3.org/TR/2011/WD-css3-fonts-20110324/

[57] CSS Fonts Module Level 3 ( ( 版)) http://www.w3.org/TR/2011/WD-css3-fonts-20111004/

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

[59] Bulletproof @font-face syntax « Paul Irish ( 版) http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

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

[61] CSS Fonts Module Level 3 ( ( 版)) http://www.w3.org/TR/2013/WD-css3-fonts-20130212/

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

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

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

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

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

[31] David Baron's weblog: Downloadable font formats for the Web ( 版) http://dbaron.org/log/20090317-fonts

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

[33] A List Apart: Articles: CSS @ Ten: The Next Big Thing ( 版) http://www.alistapart.com/articles/cssatten

[34] Building a more interoperable Web with Microsoft Edge ( 版) 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 () 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著, ) https://github.com/whatwg/html/commit/6c76b617d2b45326afea2625d174ce2fd5ab6423

[68] Delivering Octicons with SVG () https://github.com/blog/2112-delivering-octicons-with-svg

GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives.

[69] Only use nosniff for "script" and "style" (annevk著, ) https://github.com/whatwg/fetch/commit/169de91ca9fa3ab91a860bc492caf5fa94c29592

[70] [css-fonts] Untested things from css-fonts-3 (Chris Lilley著, ) https://lists.w3.org/Archives/Public/www-style/2017Feb/0087.html

[71] Ignore the Content-Type header completely for @font-face. by Ms2ger · Pull Request #13931 · servo/servo () https://github.com/servo/servo/pull/13931

[72] [css-fonts] Spec REC-ing (Chris Lilley著, ) https://lists.w3.org/Archives/Public/www-style/2017May/0023.html

[73] [cssom] Specify serialization of CSSMediaRule and CSSFontFaceRule (canaltinova著, ) https://github.com/w3c/csswg-drafts/commit/6cbb98d6931914580e323cfcb8946ca551c0b2c6

[75] CSS Fonts Module Level 4 () https://www.w3.org/TR/2017/WD-css-fonts-4-20170711/

[76] [CSSWG][css-fonts] Updated WD of CSS Fonts Level 4 (Myles C. Maxfield著, ) https://lists.w3.org/Archives/Public/www-style/2017Aug/0000.html

[77] Variable Fonts on the Web | WebKit () https://webkit.org/blog/7051/variable-fonts-on-the-web/

[78] Spec Rec next steps for CSS 3 Fonts (Chris Lilley著, ) https://lists.w3.org/Archives/Public/www-style/2017Oct/0043.html

[79] CSS Fonts Module Level 3 () https://www.w3.org/TR/2018/CR-css-fonts-3-20180315/

[80] [css-fonts] Is it "webfont" or "web font"? (Litherum著, ) https://github.com/w3c/csswg-drafts/commit/4639177eb8af6e4dd7e886dd372c86262a2c16d6

[81] [css-fonts] Is it "webfont" or "web font"? · Issue #1673 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/issues/1673

[82] CSS Fonts Module Level 4 (, ) https://drafts.csswg.org/css-fonts-4/

[87] @font-face で同じ名前の複数フォントを定義して選択させるとき、 フォント言語 (OpenType でいう言語系) を設定して要素の言語で選ばせることってできるんですかね?