フォントスタイル表示切替テスト (UTF-8版)

2021.4.1 移転しました...

はてなブックマーク

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

目次

  1. これって何？
  2. 表示テスト - Sans-serif, プロポーショナル・ゴシック系
  3. 表示テスト - Serif, プロポーショナル・明朝体
  4. 表示テスト - Monospace, 等幅
  5. 表示テスト - 手書き風、面白系
  6. 表示テスト - AA表示
  7. 備考

これって何？

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

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

JavaScript で style 属性を追記して表示確認します。（※ 一部機能 removeProperty メソッドなどはIE8ではエラーとなります。）

<p id="test_sans_fonts_p" style="font-family: 'Meiryo UI';">

表示テストの項目については下記の通りです。

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

Sans-serif, プロポーショナル・ゴシック系

※ 完全じゃないです。font-family は一つのみ指定してます。指定フォントがない環境では標準設定のフォントで表示されます。(※ 欧文フォントのみ指定の場合、和文が何になるかはブラウザにより若干差異がある模様。）

表示テスト - Sans-serif
Sans-serif \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
テスト \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二

0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。
味噌汁 - Wikipedia

Serif, プロポーショナル・明朝体

※ 完全じゃないです。font-family は一つのみ指定してます。指定フォントがない環境では標準設定のフォントで表示されます。(※ 欧文フォントのみ指定の場合、和文が何になるかはブラウザにより若干差異がある模様。）

表示テスト - Serif
Sans-serif \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
Serif \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
テスト \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二

0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。
味噌汁 - Wikipedia

Monospace, 等幅

※ 完全じゃないです。font-family は一つのみ指定してます。指定フォントがない環境では標準設定のフォントで表示されます。(※ 欧文フォントのみ指定の場合、和文が何になるかはブラウザにより若干差異がある模様。）

表示テスト - monospace
Sans-serif \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
Monospace \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
テスト \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二

0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。
味噌汁 - Wikipedia

pre 要素に適用

【注意】このページのCSSでは pre に monospace, 'ＭＳ ゴシック', 95%, line-height:110%, letter-spacing:1px が指定されてます。

<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)

<pre style="font-size: 95%; font-family:'源ノ角ゴシック HW Regular','源ノ角ゴシック HW',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 は一つのみ指定してます。指定フォントがない環境では標準設定のフォントで表示されます。

表示テスト - 手書き風他いろいろ
Sans-serif \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
cursive \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
fantasy (fantasy) \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二
テスト \ 0 O iI l Q Windows プブ あいうえお 葛噌彅埒一三語漢片 カ力エ工ロ口ー一ニ二

0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
0123456789 \'"~*#$%&@ abcilw ABCILW windows WINDOWS
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た！不埒な草彅剛、味噌汁。～カ力エ工ロ口ー一ニ二フプブ ※→↑

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。
味噌汁 - Wikipedia

AA表示

※ 完全じゃないです。font-family は一つのみ指定してます。指定フォントがない環境では標準設定のフォントで表示されます。

div 要素に適用

div#kuma {
white-space: pre !important;
margin: 1% auto;
padding: 0.5em;
line-height: 1.1;
letter-spacing: 0px;
background-color: #f1f1f1;
border-style: solid;
border-width: 3px;
border-color: #fff #ccc #ccc #fff;
overflow: auto;
width: 90%;
}
／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

pre 要素に適用

【注意】このページのCSSでは pre に monospace, 'ＭＳ ゴシック', 95%, line-height:110%, letter-spacing:1px が指定されてます。

／￣￣￣￣￣＼
|　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼
＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼
　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ |
　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／
　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨
　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩
　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ|
　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ
　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 |
/　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ
(＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

備考

最終更新日：2015.7.13

2014.01.24 font-family 切替用ブックマークレットからページ分割。JavaScript をIE8で動く仕様に変更。CSSプロパティを追加。
2014.01.25 Segoe UI, Century, Century Gothic, Lucida Console 追加。
2014.04.07 梅Pゴシック・ 梅UIゴシック, 梅P明朝 を追加。
2014.04.10 MigMix 1P, MigMix 1M, UmePlus P Gothic, UmePlus Gothic, Komatuna P, Komatuna,
モトヤLシーダ3等幅, モトヤLマルベリ3等幅, MMCedar, MMCedar P,
小瑠璃フォント (Koruri Regular), ぬかみそフォント (nukamiso, nukamisoOTF), Textar,
みかちゃん-ぷち, みかちゃん-ぷちB, きろ字, きろ字 - B, きろ字 - D, きろ字 - P, 不忘フェルトペン書体04,
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.24 Adobe Source Han Sans （源ノ角ゴシック）を追加。
2014.07.31 Ricty, Ricty Diminished, Ricty Diminished Discord を追加。
2015.07.13 Yu Gothic UI, MeiryoKe_PGothic, MeiryoKe_UIGothic, 源真ゴシック, Mgen+ 1p, MoboExGothic, Minori 0P04
MeiryoKe_Gothic, MeiryoKe_Console, 源真ゴシック等幅, Mgen+ 1m, 源ノ角ゴシック Code JP, 源ノ角ゴシック HW, MoboGothic, Minori 0M04 を追加。
2015.07.13
2015.07.13 pre 要素テストをちょっと変更。

ダウンロード・リンク