[74] CSS Fonts は、CSS におけるフォントの扱いに関する仕様書です。
[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
Failed to decode downloaded font: http://host/path/to/file.woff
OTS parsing error: glyf: Failed to serialize table
と出る
downloadable font: rejected by sanitizer
と出る
→ “なんかよくわからない”エラー。原因はいろいろあるのかもしれません。
このケースはグリフを削ってファイルサイズを小さくするとエラーが出なくなりました。 ファイルサイズが原因かもしれませんし、変なグリフデータが混ざってたのかもしれないし謎。
OTS parsing error: cmap: Failed to parse table
downloadable font: cmap: Bad mapping ( -> 0) in mapping of variation selector 0
[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 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 - 最速チュパカブラ研究会 ( 版) 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/
canvas や VML で Web 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
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.
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
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 でいう言語系) を設定して要素の言語で選ばせることってできるんですかね?
[92] [WD-font] TR shortname silliness · Issue #11334 · w3c/csswg-drafts · GitHub, https://github.com/w3c/csswg-drafts/issues/11334