font-family 切替用ブックマークレット

2021.4.1 移転しました...

はてなブックマーク

※ IEでは文字エンコードで表示に差異があります。

JavaScript による表示テストは下記ページに分割しました。

目次

  1. これって何？
  2. Sans-serif, プロポーショナル・ゴシック系
  3. Serif, プロポーショナル・明朝体
  4. Monospace, 等幅
  5. 手書き風、面白系、毛筆
  6. pre 要素用
  7. body に style 属性（IE8でもおｋ！）
  8. 個別指定いろいろ
  9. 備考

これって何？

JavaScript については見よう見まねの初心者レベルなので間違いあらばご容赦。

フォントの表示テスト用に作ってみました。

<head></head> に <style> 要素を追記します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
 ＜省略＞ 
<title>font-family 切替用ブックマークレット - CSSめも＠Palm84</title>
<style type="text/css">body { font-family: "Meiryo UI" !important; }</style>
</head>

JavaScript の内容はこんなかんじです。

function() {
var style = document.createElement('style');
var head = document.getElementsByTagName('head');
style.setAttribute('type', 'text\/css');
style.innerHTML = 'body { font-family: "Meiryo UI" !important; }';
head[0].appendChild(style);
}

リンクをブラウザのブックマークへドラッグ＆ドロップで登録できます。（※ IE以外）

あくまで表示確認用でして、CSSの body 要素に適用するだけです。ブラウザの設定は変更しないのでページを更新すると元の戻ります。

script のセレクタ部分 (body) を変更すれば他の要素や class, id などへの適用も可能です。また、プロパティ・値の書換えや !important の追記などセレクタの記述全体を編集可能なのです。（※ 全称セレクタ * の指定も可。）

※ 編集が不要なら後述の「body に style 属性」の方が単純なので使いやすいかもしれません。

指定フォントがない場合は標準設定フォントに変更されます。

文字サイズ、文字間、行間

それぞれ <body>, <p>要素 *（全称セレクタ）に設定します。
全称セレクタではすべての要素に設定されます。。

Sans-serif

表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

Serif

表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

Monospace

表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

手書き風、面白系、毛筆

表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

pre 要素に適用

葛一二三日本語漢字片 あいうえお 味噌汁
\\ 0 O i I l Q 0123456789 〜カ力エ工ロ口ー一ニ二フプブ
title Avira Rescue System == /rescue-system.iso
ls /rescue-system.iso || find --set-root /rescue-system.iso
map /rescue-system.iso (0xff) || map --mem /rescue-system.iso (0xff)

body に style 属性（IE8でもおｋ！）

こちらは至って単純な JavaScript です。body 要素に style 属性を追記します。

document.body.style.fontFamily='\'メイリオ\'';

<body style="font-family: '07やさしさゴシック';">

指定フォントがない場合は標準設定フォントに変更されます。

文字サイズ、文字間、行間

それぞれ <body>, <p> 要素に設定します。
下位要素に設定がある場合は適用されません。

document.body.style.fontSize='14px'

function(){
var myTag=document.getElementsByTagName('p');
for (var i=0;myTag.length>i;i++) {
     myTag[i].style.fontSize='14px';
    }
}

Sans-serif

表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

Serif

表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

Monospace

表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

手書き風、面白系、毛筆

表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

pre 要素に適用

※ ページ内すべての pre 要素に style 属性を追記します。

function() {
var myTag=document.getElementsByTagName('pre');
for (var i=0;myTag.length>i;i++) {
myTag[i].style.fontFamily='\'VL ゴシック\'';
    }
}

※ 要素部分 (pre) を書換えれば他の要素に適用可能です。

<pre style="font-size: 95%; font-family: 'VL ゴシック',monospace;">

葛一二三日本語漢字片 あいうえお 味噌汁
\\ 0 O i I l Q 0123456789 〜カ力エ工ロ口ー一ニ二フプブ
title Avira Rescue System == /rescue-system.iso
ls /rescue-system.iso || find --set-root /rescue-system.iso
map /rescue-system.iso (0xff) || map --mem /rescue-system.iso (0xff)

個別指定いろいろ

最近のサイトでは、メイリオやＭＳ Ｐゴシック指定のサイトが増えつつありますな。全称セレクタ [*] 指定で font-family だけなら解除できますが、サイズや色を設定すると見出しのサイズやリンクの色なども変更されて読みにくくなってしまったり・・・

ということで、主な要素を羅列してこんなのを作ってみるテストであります。

function(){
var style=document.createElement('style');
var head=document.getElementsByTagName('head');
style.setAttribute('type','text\/css');
style.innerHTML='body,div,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span{font-family:\'Meiryo UI\'!important;}';
head[0].appendChild(style);})();

body,div,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,code,del,ins,span {
font-family: 'Meiryo UI' !important;
}
表示テスト
font-family \ ゼロオーアイ小文字エルQWindows濁点あいうえお漢字カナ漢字長音漢数字
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

備考

最終更新日：2015.7.13

2014.01.24 フォントスタイル表示切替テストを分割。body に style 属性（IE8でもおｋ！）の単純なブックマークレット追加。
2014.01.25 Segoe UI, Century, Century Gothic, Lucida Console 追加。
2014.01.28 文字サイズ、文字間、行間用を追加。
2014.04.05 全称セレクタ指定追加、その他いろいろ 追記、YOzFont, 梅Pゴシック・ 梅UIゴシック を追加。
2014.04.08 梅P明朝 不忘フェルトペン書体04 を追加。
2014.04.10 MigMix 1P, MigMix 1M, UmePlus P Gothic, UmePlus Gothic, Komatuna P, Komatuna, モトヤLシーダ3等幅, モトヤLマルベリ3等幅, MMCedar, MMCedar P, みかちゃん-ぷち, みかちゃん-ぷちB, きろ字, きろ字 - B, きろ字 - D, きろ字 - P,
青柳衡山フォントT, 青柳衡山フォントT OTF, 青柳疎石フォント2, 青柳疎石フォント2 OTF, 衡山毛筆フォント, 衡山毛筆フォント OTF, 衡山毛筆フォント行書, 衡山毛筆フォント行書 OTF, 衡山毛筆フォント草書, 衡山毛筆フォント草書 OTF, 青柳隷書SIMO2_T, 青柳隷書SIMO2_O, 衡山毛筆フォント, 衡山毛筆フォント草書 を追加。
2014.04.11 小瑠璃フォント (Koruri Regular), ぬかみそフォント (nukamiso), Textar, 07ロゴたいぷゴシック7 を追加。
2014.04.19 Adobe Source Sans Pro, Source Code Pro, Droid Sans, Droid Sans Japanese, Droid Sans Fallback, Droid Serif, Droid Sans Mono を追加。
2014.05.25 小塚ゴシック Pr6N M, 小塚明朝 Pr6N Rを追加。
2014.07.16 源ノ角ゴシック Regular (Source Han Sans Regular) を追加。
2014.07.31 Ricty, Ricty Diminished, Ricty Diminished Discord を追加。
2015.07.13 pre 要素用ブックマークレットをちょっと変更。
2015.07.13 Yu Gothic UI, MeiryoKe_PGothic, MeiryoKe_UIGothic, 源真ゴシック, 源柔ゴシック, Mgen+ 1p, Rounded Mgen+ 1p, Noto Sans CJK JP, Nasu, 07やさしさゴシック手書き, MoboExGothic, Minori 0P04, MeiryoKe_Gothic, MeiryoKe_Console, 源真ゴシック等幅, Mgen+ 1m, 源柔ゴシック等幅, Rounded Mgen+ 1m, 源ノ角ゴシック Code JP, 源ノ角ゴシック HW, Noto Sans Mono CJK JP, MoboGothic, Minori 0M04, NasuM を追加。

おまけ : 右クリック禁止を禁止！(笑)

ダウンロード・リンク