chrome 5 beta の font-family の規定値が serif になってるのが気に入らない - 雑用系
同意する。すべてのサイトは、私の愛する、あのフォント(お好みのフォント名でご置換ください)になっているべきだ。
あと、font-weightやfont-styleをいじるサイトも気に入らない。たとえ英文であっても、読みにくくて仕方がない。
しかーし!
@font-faceで、既存のフォント名を上書きするのは気に入らない。だいたい、フォントなんて星の数ほどある。いちいち上書きしていられない。
では、ユニバーサルセレクタと!importantを使うべきか。しかし、いざという時に、簡単に有効、無効を切り替えられなければ困る。
というわけで、extensionだ。
まず、manifest.json。
{
"name": "Disable Ugly Font",
"version": "1.0",
"description": "Disable bold and italic",
"permissions": [
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches" : [
"http://*/*",
"https://*/*"
],
"js" : ["disable-ugly-font.js"],
"all_frames" : true
}
]
}
次に、disable-ugly-font.jsだ。
(function()
{
var style = document.createElement("style") ;
style.setAttribute("id", "hito-disable-ugly-style") ;
style.appendChild(
document.createTextNode( "* { font-face : 'メイリオ' !important ; font-weight : normal !important ; font-style : normal !important ;}" )
) ;
document.getElementsByTagName("head").item(0).appendChild(style) ;
})();
最後に、無効にするブックマークレット。これは、ブックマークとして追加する。
javascript:(function(){
var style = document.getElementById("hito-disable-ugly-style") ;
if ( style )
document.getElementsByTagName("head").item(0).removeChild(style) ;
})() ;
あとは、このextensionを読み込めばいい。
2 comments:
Content Scriptsのデフォルトの実行タイミングは結構遅いので、適用前の状態が一瞬見えてしまうと思います。
http://code.google.com/chrome/extensions/content_scripts.html#registration
なので、"run_at": "document_start" をお薦めします。
ただ、そうするとheadがないので、setTimeoutかDOMNodeInsertedあたりを使う必要があるのが難点ですが…
あと、HTML5にはdocument.headという便利なものがあります。
ちなみに、簡単にON/OFFできる機能は、そのうちStylistに実装しようと思ってます。
たしかに、一瞬だけ、自前CSSを注入する前の状態が見えてしまいますが、
私はあまり気にしたことがありませんね。
Post a Comment