ブックマークレットでページのフォントを変更します...

2021.01.16 Chrome 向けに等幅設定を変更、など修正

ここのサイドバーにも置いてるやつです。めっちゃ私的であります。

いまでも「ＭＳＰゴシック」指定のサイトがあったり、最近では「源ノ角ゴシック」とか「游ゴシック」指定のページもあったりということで、それ以外の自分の好きなフォント設定で読みたい時に使っとります。

リンクをブックマークへドラッグ＆ドロップするか、右クリックメニューから登録できます。

※ AAとか pre 要素も変わっちゃったりとかまだまだ完璧ではありませんけど...。

Index

標準設定フォントに変更
フォントサイズを変更
pre, code などを等幅指定
JavaScript について
いろいろ

標準設定フォントに変更

一旦全称セレクタ(*)指定で見出しなども含めすべてのフォントをブラウザの基本設定フォントを指定、pre, code などは monospace に再指定。

* {
font-family: inherit !important;
}
pre,code,kbd,var,samp,pre.code,pre span.synComment {
font-family: monospace, monospace !important;
}

inherit (* {font-family: inherit !important;})
戻す - ※ 追加した style 要素を削除（1つずつ）

※ 但し、AA（アスキーアート）も変更されるので本文以外はちょっとおかしくなるかも。

下記はAA表示可能なフォントを列挙（※ pre も変更）

AA用

フォントサイズを変更

見出し以外の主な要素のフォントサイズを指定します。

body,div,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span {
font-size:15px!important;
}

目的は「本文を読みやすく」なのですが pre 要素も変わっちゃうのでいまいちかも、すみません。

pre, code など等幅指定

pre,code,kbd,var,samp,pre.code,pre span.synComment {
font-family: monospace, monospace !important;
}

JavaScript について

document - Web API インターフェイス | MDN

JavaScript の内容...

inherit 指定の例

function() {
var style=document.createElement('style');
var head=document.getElementsByTagName('head');
style.setAttribute('type','text\/css');
style.innerHTML='* {font-family: inherit !important;} pre,code,kbd,var,samp,pre.code,pre span.synComment {font-family: monospace,monospace !important;}';
head[0].appendChild(style);
}

上記のCSS指定がこんなかんじ...

* {
font-family: inherit !important;
}
pre,code,kbd,var,samp,pre.code,pre span.synComment {
font-family: monospace,monospace !important;
}

JavaScript 文の注意点 :
- var の後のスペースは必須、それ以外はあってもなくても（※ Firefox では %20 に置換される）
- 日本語、及びスペース含むフォント名を指定する場合、CSSでは = 'メイリオ','Meiryo UI' の様に引用符で囲むが上記の JavaScript 文では引用符内（重複）なので \ でエスケープする = \'メイリオ\',\'Meiryo UI\'