フォントスタイル表示切替テスト

2021.4.1 移転しました...

• このページの旧URLは
  • http://www10.plala.or.jp/palm84/css_memo_font_style_test.html

• HOME
• Shit_JIS 版　← 今ここ
• UTF-8 版

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

目次

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

これって何？

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

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

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

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

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

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

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

• font-size 削除 | 80% | 100% | 110% | 120% | 150% | font-style 削除 | normal | italic | oblique
• line-height 削除 | 1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 2 | letter-spacing 削除 | 0 | 0.5px | 1px | 1.5px | 2px
• font-weight 削除 | lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• color 削除 | black | #595959 | white | background-color 削除 | white | #ffe | black
• style削除 | font-variant 削除 | small-caps

• 削除 | Sans-serif ( inherit | Serif | monospace | cursive | fantasy ) ( monospace, 'ＭＳ ゴシック' | monospace, serif )
• メイリオ | Meiryo UI | ＭＳ Ｐゴシック | MS UI Gothic | Arial | Verdana | Tahoma | Impact | Segoe UI

• 游ゴシック
• 游ゴシック Light
• Microsoft Sans Serif
• MS Sans Serif
• Trebuchet MS
• Century Gothic
• Calibri
• Corbel
• Candara

• Yu Gothic UI
• MeiryoKe_PGothic
• MeiryoKe_UIGothic
• 小塚ゴシック Pr6N M
• 源ノ角ゴシック
• 源真ゴシック
• Mgen+ 1p
• MoboExGothic
• Minori 0P04

• IPA Pゴシック
• IPAexゴシック
• Takao Pゴシック
• TakaoExゴシック
• VL Pゴシック
• Migu 1P
• MigMix 1P
• Koruri

• IPA モナー Pゴシック
• Monapo
• 梅Pゴシック
• 梅UIゴシック
• Textar
• UmePlus P Gothic
• Komatuna P
• MMCedar P
• Bitstream Vera Sans

• 07やさしさゴシック
• nukamiso
• nukamisoOTF
• 01フロップデザイン
• ぼくたちのゴシック
• Windows TV Pゴシック
• Windows TV P丸ゴシック
• Droid Sans Japanese
• Droid Sans Fallback

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

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

• font-size 削除 | 80% | 100% | 110% | 120% | 150% | font-style 削除 | normal | italic | oblique
• line-height 削除 | 1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 2 | letter-spacing 削除 | 0 | 0.5px | 1px | 1.5px | 2px
• font-weight 削除 | lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• color 削除 | black | #595959 | white | background-color 削除 | white | #ffe | black
• style削除 | font-variant 削除 | small-caps

• 削除 | Serif ( inherit | Sans-serif | monospace | cursive | fantasy ) ( monospace, 'ＭＳ ゴシック' | monospace, serif )

• ＭＳ Ｐ明朝
• 游明朝
• 游明朝 Light
• 游明朝 Demibold

• Times New Roman
• Times
• MS Serif
• Georgia

• Cambria
• Constantia
• Batang
• Century

• HG明朝B
• HG明朝E
• HGP明朝B
• HGP明朝E
• HGS明朝B
• HGS明朝E

• IPA P明朝
• IPAex明朝
• IPAmj明朝
• Takao P明朝
• TakaoEx明朝

• 梅P明朝
• IPA モナー P明朝
• Droid Serif
• Bitstream Vera Serif
• 02うつくし明朝体
• はんなり明朝

• ＭＳ 明朝（※ 等幅）
• 梅明朝（※ 等幅）
• さざなみ明朝（※ 等幅）
• 小塚明朝 Pr6N R

Monospace, 等幅

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

• font-size 削除 | 80% | 100% | 110% | 120% | 150% | font-style 削除 | normal | italic | oblique
• line-height 削除 | 1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 2 | letter-spacing 削除 | 0 | 0.5px | 1px | 1.5px | 2px
• font-weight 削除 | lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• color 削除 | black | #595959 | white | background-color 削除 | white | #ffe | black
• style削除 | font-variant 削除 | small-caps

• 削除 | monospace ( inherit | Serif | Sans-serif | cursive | fantasy ) ( monospace, 'ＭＳ ゴシック' | monospace, serif )
• ＭＳ ゴシック | ＭＳ 明朝

• MeiryoKe_Gothic
• MeiryoKe_Console
• Courier New
• Courier
• Consolas
• Lucida Console
• Source Code Pro

• IPAゴシック
• IPA モナー ゴシック
• Takaoゴシック
• VL ゴシック
• Migu 1M
• MigMix 1M
• Komatuna

• 源ノ角ゴシック HW
• 源ノ角ゴシック Code JP
• 源真ゴシック等幅
• Mgen+ 1ｍ
• Minori 0M04
• MoboGothic
• UmePlus Gothic

• モトヤLシーダ3等幅
• モトヤLマルベリ3等幅
• MMCedar
• Ricty
• Ricty Diminished
• Ricty Diminished Discord
• Droid Sans Mono
• Bitstream Vera Sans Mono

• さざなみゴシック
• 梅ゴシック
• IPA明朝
• IPA モナー 明朝
• Takao明朝
• さざなみ明朝
• 梅明朝

pre 要素に適用

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

• font-size 削除 | 80% | 85% | 90% | 95% | 100% | 120% | 12px | 13px | 13.5px | 14px | 16px
• line-height 削除 | 1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 2 | letter-spacing 削除 | 0 | 0.5px | 1px | 1.5px | 2px
• font-weight 削除 | lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• color 削除 | black | #595959 | white | background-color 削除 | white | #f1f1f1 | black
• style削除 | font-style 削除 | normal | italic | oblique

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

葛噌�g埒一三語漢片 あいうえお 味噌汁
\\ 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;">

葛噌�g埒一三語漢片 あいうえお 味噌汁
\\ 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)

• 削除 | monospace ( inherit )
• monospace, 'ＭＳ ゴシック' | monospace, serif

• ＭＳ ゴシック
• ＭＳ 明朝
• Courier New
• Courier
• Consolas
• Lucida Console
• Source Code Pro
• MeiryoKe_Gothic
• MeiryoKe_Console

• IPAゴシック
• IPA モナー ゴシック
• Takaoゴシック
• VL ゴシック
• Migu 1M
• MigMix 1M
• Minori 0M04
• MoboGothic

• 源ノ角ゴシック Code JP
• 源ノ角ゴシック HW
• 源真ゴシック等幅
• Mgen+ 1m
• Komatuna
• UmePlus Gothic
• モトヤLシーダ3等幅
• モトヤLマルベリ3等幅
• MMCedar

• IPA明朝
• IPA モナー 明朝
• Takao明朝
• さざなみ明朝
• 梅明朝

• さざなみゴシック
• 梅ゴシック
• Droid Sans Mono
• Bitstream Vera Sans Mono
• Ricty
• Ricty Diminished
• Ricty Diminished Discord

手書き風、面白系

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

• font-size 削除 | 80% | 100% | 110% | 120% | 150% | font-style 削除 | normal | italic | oblique
• line-height 削除 | 1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 2 | letter-spacing 削除 | 0 | 0.5px | 1px | 1.5px | 2px
• font-weight 削除 | lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• color 削除 | black | #595959 | white | background-color 削除 | white | #ffe | black
• style削除 | font-variant 削除 | small-caps

• 削除 | Sans-serif ( inherit | Serif | monospace | cursive | fantasy ) ( monospace, 'ＭＳ ゴシック' | monospace, serif )
• Comic Sans MS | Estrangelo Edessa | script | Gabriola | Impact | Symbol | Webdings | HG行書体 | HG白洲行草書体

• 瀬戸フォント
• あんずもじ
• あずきフォント
• あくあＰフォント
• きろ字
• きろ字 - B
• きろ字 - D
• きろ字 - P

• みかちゃん
• みかちゃん-P
• みかちゃん-PS
• みかちゃん-PB
• みかちゃん-ぷち
• みかちゃん-ぷちB

• みかちゃん_o
• みかちゃん_o-P
• みかちゃん_o-PS
• みかちゃん_o-PB

• りいポップ角 (りいポップ角 R)
• りいてがきN (りいてがきN R)
• りいてがき筆
• 07ロゴたいぷゴシック7
• 07やさしさアンチック
• フォントポにほんご
• ＫＦひま字
• じゆうちょうフォント
• 不忘フェルトペン書体04

• ジンペン糸-R (ZinPenito R)
• ジンペン毛羽-R (ZinPenKeba R)
• ジンへな墨流-RCF (ZinHenaBokuryu RCF)
• ジン乱角-R (ZinRankaku R)
• ぎゃーてーるみねっせんす
• きずだらけのぎゃーてー
• 怨霊
• 吐き溜

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%;
}

• font-size 削除 | 16px | 80% | 100% | 120%
• line-height 削除 | 18px | 1 | 1.1 | 1.2
• letter-spacing 削除 | 0 | 0.5px | 1px
• style削除

• ( font-family 削除 ) inherit | Sans-serif
• ＭＳ Ｐゴシック | Monapo | Mona | IPA モナー Pゴシック | IPA モナー P明朝
• 梅Pゴシック | 梅UIゴシック | 梅P明朝 | Textar

pre 要素に適用

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

• font-size 削除 | 16px | 80% | 90% | 95% | 100% | 120%
• line-height 削除 | 18px | 1 | 1.1 | 1.2
• letter-spacing 削除 | 0 | 0.5px | 1px
• style削除

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

• ( font-family 削除 ) monospace | inherit | Sans-serif | monospace, 'ＭＳ ゴシック'
• ＭＳ Ｐゴシック | Monapo | Mona | IPA モナー Pゴシック | IPA モナー P明朝
• 梅Pゴシック | 梅UIゴシック | 梅P明朝 | Textar

備考

最終更新日：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 要素テストをちょっと変更。

ダウンロード・リンク

• 源ノ角ゴシック Source Han Sans / Home / Home
  • adobe-fonts/source-han-sans ・ GitHub
    • source-han-sans/OTF/Japanese at release
    • source-han-sans/OTF/JapaneseHW at release
• Google Noto Fonts
• Introducing Source Han Code JP
  • adobe-fonts/source-han-code-jp ・ GitHub
    • source-han-code-jp/OTF/SourceHanCodeJP at release

• Windows XP 向け ClearType 対応日本語フォント
  • メイリオ・フォントをWindows XP／Server 2003で利用する（改訂版） − ＠IT

• Droid フォント, モトヤLシーダ3等幅 (MTLc3m), モトヤLマルベリ3等幅 (MTLmr3m) - Download Android Studio and SDK Tools | Android Developers
  • platform_frameworks_base/data/fonts at master ・ android/platform_frameworks_base ・ GitHub

• IPAフォント
  • IPAexフォント/IPAフォント
  • IPAmj明朝フォント | 文字情報基盤整備事業
  • Takao Fonts in Launchpad

• M+ フォント系
  • MigMixフォント : M+とIPAの合成フォント
  • Miguフォント : M+とIPAの合成フォント
  • VLゴシックフォントファミリ
  • フリーフォントやさしさゴシックのダウンロード | フォントな。無料日本語フリーフォント
  • Koruri (コルリ) プロジェクト日本語トップページ - SourceForge.JP
  • UmePlus, Komatuna, MMCedar - modified_fonts_01
• MoboGothic - おすすめフォント (Y.Oz Vox)
• 自作フォント作成(丸ゴシックフォント:Minoriフォント) | Takahiro_Chouの日記 | スラッシュドット・ジャパン

• Bitstream Vera Fonts README
• efont プロジェクト日本語トップページ - SourceForge.JP（さざなみフォント）
• Ume-font プロジェクト日本語トップページ - SourceForge.JP
• ぬかみそフォント - ダウンロード（β-reverse - 64DDポリゴンサイト）

• 自家製フォント工房
  • 源真ゴシック (げんしんゴシック) | 自家製フォント工房
  • Mgen+ (ムゲンプラス) | 自家製フォント工房

• オリジナルフォント【みかちゃん】（※ ダウンロードページの下部に OpenType 版もあります）
• SecondWave 手書き風総合書体 - きろ字
• 瀬戸フォント - Project Web of setofont on SourceForge.JP Web space
• あずきフォント
• あんずいろapricot×colorフリー写真素材・手書きフォント・人物写真素材
• あくあフォントの詳細情報 : Vector ソフトを探す！
  • あくあPフォントの詳細情報 : Vector ソフトを探す！

• フリーフォントやさしさアンチック（漫画用書体）のダウンロード | フォントな情報。オープンソースの安心フリーフォント
• フリーフォント　ロゴたいぷゴシックのダウンロード　 | フォントな。無料日本語フリーフォント
• フロップデザインフォント無料ダウンロードFONT - フリーフォント
• 無料フォントfontopo | ぼくたちのゴシック
• 無料フォントfontopo | フォントポにほんご
• フリーフォントうつくし明朝体 - 漢字日本語フォント
• はんなり明朝 - フォント無料ダウンロード ｜ Typing Art
• りいポップ角：フリーフォント
• りいてがきN：フリーフォント
• りいてがき筆：フリーフォント
• ぎゃーてーるみねっせんす, きずだらけのぎゃーてー, じゆうちょうフォント - よく飛ばない鳥　手書きフォントのページ
• ジンペン糸-R, ジンペン毛羽-R, ジンへな墨流-RCF, ジン乱角-R - フリーフォント・尋スタジオ／手書き・子ども・下手文字・絵文字・遊書・漫画・コミック・アニメ・ゲーム・ポップなどのフォント／無料フォント
• KF STUDIO | ＫＦひま字
• 暗黒工房 日本語フリーホラーフォント怨霊
• 暗黒工房 日本語フリーホラーフォント「吐き溜フォント」
• 不忘印刷所 不忘フェルトペン書体 フリーフォント 漢字

• 小塚ゴシック Pr6N M, 小塚明朝 Pr6N R - Adobe Reader X Font Packs - Japanese

• MeiryoKe

• ←
• H
• ↑
• ↓