Gecko系ウェブブラウザ―のフォントの実験
古いWindowsのMSゴシックをはじめとする日本語MSフォントは、ClearTypeを効かせられないためウェブブラウザ―で綺麗に描画されない。せめてMozilla Firefox、SeaMonkey等のGecko系ウェブブラウザ―だけでも対策すべく、userContent.css
の1行目から、以下のとおり追加してみた。つまり、日本語MSフォントをMonapoフォント又はMicrosoft Office付属のリコーフォント(HGフォントシリーズ)といった少しマシな日本語フォントに置き換える実験。
@charset "utf-8";
/* 実験1 HTML要素毎のデフォルトフォントをハック->成功も効果小 */
@-moz-document url-prefix(http) {
html, body, h1, h2, h3, h4, h5, h6, div, p, blockquote, address, dl, dt, dd, ol, ul, li,
table, caption, th, td, tbody, thead, tfoot, colgroup, col,
form, input, select, option, label, textarea, map, fieldset, legend, button, object, iframe,
section, nav, article, aside, hgroup, header, footer, figure, figcaption, video, audio, canvas,
datalist, optgroup, output, progress, meter, details, summary, menu {
font-family: 'Arial', 'HGPGothicM', 'HGPゴシックM', sans-serif;
}
pre, code, kbd, samp, var, tt {
font-family: 'HGGothicM', 'HGゴシックM', monospace;
}
}
/* 実験1.1 総称ファミリーのデフォルトフォントをハック->失敗💦 */
@font-face { font-family: 'sans-serif'; src: local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'serif'; src: local('HGPSoeiPresenceEB'), local('HGP創英プレゼンスEB'); }
@font-face { font-family: 'monospace'; src: local('HGGothicM'), local('HGゴシックM'); }
@font-face { font-family: 'cursive'; src: local('HGMaruGothicMPRO'), local('HG丸ゴシックM-PRO'); }
@font-face { font-family: 'fantasy'; src: local('HGPSoeiKakupoptai'), local('HGP創英角ポップ体'); }
/* 実験2 日本語MSフォントを置換->成功 */
@font-face { font-family: 'MS Pゴシック'; src: local('Monapo'); }
@font-face { font-family: 'MS PGothic'; src: local('Monapo'); }
@font-face { font-family: 'MS UI Gothic'; src: local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'MS ゴシック'; src: local('HGGothicM'), local('HGゴシックM'); }
@font-face { font-family: 'MS Gothic'; src: local('HGGothicM'), local('HGゴシックM'); }
@font-face { font-family: 'MS P明朝'; src: local('HGPSoeiPresenceEB'), local('HGP創英プレゼンスEB'); }
@font-face { font-family: 'MS PMincho'; src: local('HGPSoeiPresenceEB'), local('HGP創英プレゼンスEB'); }
@font-face { font-family: 'MS 明朝'; src: local('HGSoeiPresenceEB'), local('HG創英プレゼンスEB'); }
@font-face { font-family: 'MS Mincho'; src: local('HGSoeiPresenceEB'), local('HG創英プレゼンスEB'); }
/* 実験2.1 日本語MSフォントにフォントリンクされている欧文フォントを置換->成功もフォントリンクが無視されていた */
@font-face { font-family: 'Lucida Sans Unicode'; src: local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'Microsoft Sans Serif'; src: local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'Tahoma'; src: local('HGPGothicM'), local('HGPゴシックM'); }
/* 実験3 頻出する欧文フォントを日本語フォントへフォールバック->localの2つ目以後は無視され失敗💦 */
@font-face { font-family: 'Arial'; src: local('Arial'), local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'Arial Black'; src: local('Arial Black'), local('HGPSoeiKakugothicUB'), local('HGP創英角ゴシックUB'); }
@font-face { font-family: 'Helvetica'; src: local('Arial'), local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'Helvetica Black'; src: local('Arial Black'), local('HGPSoeiKakugothicUB'), local('HGP創英角ゴシックUB'); }
/* Tahomaは頻出するが実験2.1で使用しているため除外
@font-face { font-family: 'Tahoma'; src: local('Tahoma'), local('HGPGothicM'), local('HGPゴシックM'); } */
@font-face { font-family: 'Trebuchet'; src: local('Trebuchet MS'), local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'Trebuchet MS'; src: local('Trebuchet MS'), local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'Verdana'; src: local('Verdana'), local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'Times'; src: local('Times New Roman'), local('HGPSoeiPresenceEB'), local('HGP創英プレゼンスEB'); }
@font-face { font-family: 'Times New Roman'; src: local('Times New Roman'), local('HGPSoeiPresenceEB'), local('HGP創英プレゼンスEB'); }
@font-face { font-family: 'Georgia'; src: local('Georgia'), local('HGPSoeiPresenceEB'), local('HGP創英プレゼンスEB'); }
@font-face { font-family: 'Courier'; src: local('HGSoeiPresenceEB'), local('HG創英プレゼンスEB'); }
@font-face { font-family: 'Courier New'; src: local('HGSoeiPresenceEB'), local('HG創英プレゼンスEB'); }
@font-face { font-family: 'Lucida Console'; src: local('HGGothicM'), local('HGゴシックM'); }
@font-face { font-family: 'Comic Sans'; src: local('Comic Sans MS'), local('HGMaruGothicMPRO'), local('HG丸ゴシックM-PRO'); }
@font-face { font-family: 'Comic Sans MS'; src: local('Comic Sans MS'), local('HGMaruGothicMPRO'), local('HG丸ゴシックM-PRO'); }
@font-face { font-family: 'Impact'; src: local('Impact'), local('HGPSoeiKakupoptai'), local('HGP創英角ポップ体'); }
実験1は、デフォのフォントをハックするもの。実験2は、ウェブページのCSSで日本語MSフォント又は日本語MSフォントにフォントリンクする欧文フォントがマッチしたとき、上述の日本語フォントへ置換するもの。実験3は、多くのウェブページがCSSで欧文フォント->日本語フォントと記述しているので、先の欧文フォントがマッチするとき、上述の日本語フォントにフォールバックさせるもの。@font-face
では、念のため英語及び日本語のフルネームでフォント名を併記したが(上述の日本語フォントは、英語のフルネームとPostScript名が同じ)、実は日本語のフルネームは不要だった。また実験3は、例えば以下のとおり記述すれば下図のとおりのフォールバックに成功するけど、大仰過ぎ(『Webフォントを使うときは空のグリフに注意 - cockscomblog?』からお知恵拝借)。
@font-face { font-family: 'Arial'; src: local('HGPGothicM'), local('HGPゴシックM'); }
@font-face { font-family: 'Arial'; src: local('Arial'); unicode-range: U+21-2E, U+30-5B, U+5D-7E, U+A1-AC, U+AE-140, U+142-24B,
U+24D-259, U+25B-25C, U+25E-268, U+26A-26A, U+26C-285, U+287-29C, U+29E-2B2, U+2B6-2B6, U+2B9-2DF, U+2E1-2E2, U+2E4-321,
U+323-33F, U+342-376, U+37A-37D, U+37F-37F, U+384-38A, U+38C-38C, U+38E-3A1, U+3A3-3D0, U+3D2-3D2, U+3D4-3DD, U+3DF-402,
U+404-412, U+415-429, U+42B-432, U+435-451, U+454-45A, U+45C-491, U+494-49E, U+4A0-4D7, U+4DA-4F5, U+4F8-4F9, U+4FC-529,
U+52C-52C, U+52E-52F, U+531-532, U+535-536, U+538-538, U+53B-53B, U+53D-541, U+543-54B, U+54D-54D, U+54F-551, U+553-556,
U+559-55F, U+561-562, U+565-566, U+568-569, U+56B-578, U+57A-581, U+583-586, U+589-58A, U+58D-58F, U+591-5AF, U+5B9-5BA,
U+5BC-5C6, U+5D0-5EA, U+5F0-5F4, U+600-604, U+606-60A, U+60C-60C, U+60F-614, U+616-61B, U+61E-623, U+625-627, U+629-629,
U+62C-62E, U+639-63A, U+63D-63F, U+647-647, U+649-66D, U+670-673, U+675-678, U+681-687, U+694-694, U+696-696, U+69B-69C,
U+6A0-6A0, U+6A5-6A5, U+6AA-6AA, U+6BE-6C0, U+6C6-6C6, U+6C9-6C9, U+6CB-6CE, U+6D0-6D1, U+6D4-6E4, U+6E7-6ED, U+6F4-6F6,
U+6FC-6FD, U+6FF-6FF, U+757-758, U+75D-761, U+76E-76F, U+772-777, U+77C-77C, U+8A2-8A2, U+8A8-8A9, U+8AD-8AD, U+8B3-8B3,
U+8BA-8BA, U+8D4-8FF, U+1D00-1D25, U+1D27-1D2B, U+1D2E-1D36, U+1D38-1D3E, U+1D40-1D41, U+1D43-1D4E, U+1D50-1D5A, U+1D5D-1D5D,
U+1D5F-1D60, U+1D62-1D62, U+1D64-1D64, U+1D66-1D66, U+1D68-1D69, U+1D6B-1D9F, U+1DA2-1DA7, U+1DA9-1DB9, U+1DBB-1DCA, U+1DFE-1F15,
U+1F20-1F27, U+1F2E-1F37, U+1F3E-1F45, U+1F50-1F57, U+1F5F-1F67, U+1F6E-1F7D, U+1F80-1F97, U+1F9E-1FA7, U+1FAE-1FB4, U+1FB6-1FC4,
U+1FC6-1FC7, U+1FCC-1FD3, U+1FD6-1FD9, U+1FDD-1FE9, U+1FED-1FEF, U+1FF2-1FF4, U+1FF6-1FF7, U+1FFC-1FFE, U+200C-200F, U+2012-2013,
U+2015-2015, U+2017-2022, U+2026-2026, U+202A-202E, U+2030-2030, U+2032-2034, U+2039-203A, U+203C-203E, U+2044-2044, U+205E-205E,
U+206A-2070, U+2074-2079, U+207F-207F, U+2090-2092, U+2094-2094, U+20A0-20A2, U+20A4-20BA, U+20BC-20BF, U+20F0-20F0, U+2105-2105,
U+2113-2113, U+2116-2117, U+2122-2122, U+2126-2126, U+212E-212E, U+214D-214E, U+2153-2154, U+215B-215E, U+2184-2184, U+2190-2195,
U+21A8-21A8, U+2202-2202, U+2206-2206, U+220F-220F, U+2211-2212, U+2219-2219, U+221E-221F, U+2229-2229, U+2248-2248, U+2260-2261,
U+2264-2265, U+2302-2302, U+2310-2310, U+2320-2321, U+2500-2500, U+2502-2502, U+250C-250C, U+2510-2510, U+2514-2514, U+2518-2518,
U+251C-251C, U+2524-2524, U+252C-252C, U+2534-2534, U+253C-253C, U+2550-256C, U+2580-2580, U+2584-2584, U+2588-2588, U+258C-258C,
U+2590-2593, U+25A0-25A1, U+25AA-25AB, U+25B2-25B2, U+25BA-25BA, U+25BC-25BC, U+25C4-25C4, U+25CA-25CC, U+25CF-25CF, U+25D8-25D9,
U+25E6-25E6, U+263A-263C, U+2640-2640, U+2642-2642, U+2660-2660, U+2663-2663, U+2665-2666, U+266A-266B, U+266F-266F, U+2C60-2C7C,
U+2C7E-2C7F, U+2E17-2E17, U+A717-A749, U+A74C-A78D, U+A790-A797, U+A799-A7AE, U+A7B0-A7B7, U+A7F7-A7FF, U+AB30-AB65, U+F301-F301,
U+FB00-FB06, U+FB13-FB17, U+FB1D-FB34, U+FB38-FB38, U+FB3A-FB3C, U+FB3E-FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4F, U+FB5C-FB5D,
U+FB68-FB69, U+FBA6-FBA6, U+FBB2-FBC1, U+FBDA-FBDA, U+FBDF-FBDF, U+FBE3-FBE3, U+FC5E-FC63, U+FCF2-FCF4, U+FD3D-FD3F, U+FDF2-FDF2,
U+FDF4-FDF4, U+FDFA-FDFB, U+FE20-FE23, U+FE70-FE70, U+FE72-FE72, U+FE74-FE74, U+FE76-FE76, U+FE78-FE7A, U+FE7C-FE7E, U+FE80-FE80,
U+FECA-FECB, U+FECE-FECF, U+FEF5-FEF5, U+FEF7-FEF7, U+FEF9-FEF9, U+FEFB; }
Arial及びMonapo(プロポーショナル体)並びにHGゴシックM(等幅体)で表示したのが下画像。他にもシステムを弄っているのでそれなりに表示されているが、本来はユーザー領域で行う上述の対策のほうが、レジストリーを弄ったり、別途ソフトウェアをインストールしたりするよりシステムへの影響が少ない。結局、ウェブサイト制作者は欧文フォント及び総称フォントファミリー名のみでフォントを設定し、あとはユーザー側のウェブブラウザーやユーザーの設定に委ねたほうが良いのかも。

Comments