ZawaWorks’s diary

プログラミング技術メモ

Processing:日本語テキストに使えるフォントは何種類?

 

目次

  • はじめに
  • フォント指定のやり方
  • 日本語に使えるフォント
  • どんなフォントか見てみよう
  • おわりに

 

はじめに

 私が通う大学ではプログラミングの授業にProcessingという言語を使っています。授業課題において友達から「日本語テキストを表示したいけど表示できない」という相談をよく受けました。そういうときフォントが適切に指定していないことが原因である場合が多く、いろいろな人にそのことを説明してきました。すると、ときどきこう言ってくる人がいました。

 「じゃあ、どのフォント使えばいいの?」

 そうくるか……。私もどのフォントが日本語に適用できるか把握はしてなかったのでそのときは「自分はいつもこのフォントを使っている」と適当に返答してしてきました。しかし、このままでは相手に申し訳ないと思った私は、学校で配布されているPCと同じ環境設定(「Windows10 Home」デフォルト)において、日本語が使えるフォントが何種類あるか調べてきました。今回はその成果について述べていきたいと思います。

 

注意:筆者はProcessing3.2.3を使用しました)

 

 

フォント指定のやり方

PFontを使おう

 Processingにおいてテキストを書いてみましょう。

//「A」が画面の真ん中に表示される
size(200, 200);//画面の大きさを設定
text("A", width/2, height/2);//text("文字",文字の左の座標,文字の下の座標)

f:id:ZawaWorks:20170313155340p:plain

(文字小さかったので他の写真より拡大しました……)

 

 上記のプログラムではフォントを指定していません。フォントを指定するためには「PFont」クラスを使います。それでは「PFont」クラスを使ってみましょう。

//フォントが「Agency FB」である「A」が画面の真ん中に表示される
//あとでまた紹介するのでこのプログラムを「PFont1.pde」と名付けます
PFont font;
size(200, 200);
font=createFont("Agency FB", 30);//createFont("フォントの名前", フォントの大きさ)
textFont(font);//フォントを指定
text("A", width/2, height/2);

 

f:id:ZawaWorks:20170313155352p:plain

 

・フォントの種類

 先ほど「PFont」クラスでフォントを作れると述べましたが、このときフォントの種類はいくつあるのか?

 下記のコードを書いたプログラムを実行すれば分かります。

https://processing.org/reference/PFont_list_.htmlより引用)

 

//フォントの種類を出力するプログラム
String[] fontList;//String型のArrayListを用意
fontList= PFont.list();//PFontに登録されているフォントを代入
printArray(fontList);//出力
//出力結果↓
//[0] "Agency FB"
//[1] "Agency FB Bold"
//(省略)
//[290] "MS P明朝"

 なんと291種類ありました。

 まさかここまで多いとは思ってませんでしたね……。しかも、Wordにないフォントもいくつか存在していたことも驚きました。

 ちなみにフォント名の左隣にある番号は何かというとfontListに代入するのに使うものです。

 どういうことかと言うと……。

String[] fontList;//String型のArrayListを用意
fontList= PFont.list();//PFontに登録されているフォントを代入
println(fontList[0]);
//出力結果↓
//Agency FB 

 

 つまり先ほど紹介した「PFont1.pde」を下記のように書き換えることができます。

 

 

//これの名前は「PFont2.pde」とします
PFont font;
String[] fontList;
fontList= PFont.list();
size(200, 200);
font=createFont(fontList[0], 30);
textFont(font);
text("A", width/2, height/2);

f:id:ZawaWorks:20170313155503p:plain

 

 これからは「PFont1.pde」と「PFont2.pde」を使って紹介していきます。

 

日本語が使えるフォント

 さて本題に入ります。先ほど「PFont」クラスには291種類ものフォントがありますが、中には日本語のテキストでは使えないものが多々あります。

 PFont1.pde」のテキストを「A」から「あ」に変えると下のようになってしまいます。

f:id:ZawaWorks:20170313155522p:plain

 

 しかし、フォントを「Agency FB」を「MS P明朝」に変えるとしっかりと「あ」が表示されると思います。(PFont2.pde」なら「0」を「290」に変える

f:id:ZawaWorks:20170313155539p:plain

 

 

  それではこのように日本語を表示できるフォントがいくつあるのか?

 まとめてみました。

 

 [番号]"フォントの名前"

[61]"Dialog.bold"
[62]"Dialog.bolditalic"
[63]"Dialog.italic"
[64]"Dialog.plain"
[65]"DialogInput.bold"
[66]"DialogInput.bolditalic"
[67]"DialogInput.italic"
[68]"DialogInput.plain"
[69]"Ebrima"
[85]"HGP創英角ゴシックUB"
[86]"HGP創英角ポップ体"
[87]"HGP創英プレゼンスEB"
[88]"HGP教科書体"
[89]"HGP明朝B"
[90]"HGP明朝E"
[91]"HGP行書体"
[92]"HGPゴシックE"
[93]"HGPゴシックM"
[94]"HGS創英角ゴシックUB"
[95]"HGS創英角ポップ体"
[96]"HGS創英プレゼンスEB"
[97]"HGS教科書体"
[98]"HGS明朝B"
[99]"HGS明朝E"
[100]"HGS行書体"
[101]"HGSゴシックE"
[102]"HGSゴシックM"
[103]"HG丸ゴシックM-PRO"
[104]"HG創英角ゴシックUB"
[105]"HG創英角ポップ体"
[106]"HG創英プレゼンスEB"
[107]"HG教科書体"
[108]"HG明朝B"
[109]"HG明朝E"
[110]"HG正楷書体-PRO"
[111]"HG行書体"
[112]"HGゴシックE"
[113]"HGゴシックM"
[134]"MS Gothic"
[135]"MS Mincho"
[137]"MS PGothic"
[138]"MS PMincho"
[141]"MS UI Gothic"
[144]"Malgun Gothic"
[146]"Malgun Gothic Semilight"
[148]"Meiryo UI"
[149]"Meiryo UI Bold"
[150]"Meiryo UI Bold Italic"
[151]"Meiryo UI Italic"
[153]"Microsoft JhengHei"
[154]"Microsoft JhengHei Bold"
[155]"Microsoft JhengHei Light"
[156]"Microsoft JhengHei UI"
[157]"Microsoft JhengHei UI Bold"
[158]"Microsoft JhengHei UI Light"
[166]"Microsoft YaHei"
[167]"Microsoft YaHei Bold"
[168]"Microsoft YaHei Light"
[169]"Microsoft YaHei UI"
[170]"Microsoft YaHei UI Bold"
[171]"Microsoft YaHei UI Light"
[177]"Monospaced.bold"
[178]"Monospaced.bolditalic"
[179]"Monospaced.italic"
[180]"Monospaced.plain"
[184]"Segoe UI Semilight Italic
[196]"SansSerif.bold"
[197]"SansSerif.bolditalic"
[198]"SansSerif.italic"
[199]"SansSerif.plain"
[220]"Serif.bold"
[221]"Serif.bolditalic"
[222]"Serif.italic"
[223]"Serif.plain"
[224]"SimSun"
[271]"Yu Gothic UI Bold"
[272]"Yu Gothic UI Light"
[273]"Yu Gothic UI Regular"
[274]"Yu Gothic UI Semibold"
[275]"Yu Gothic UI Semilight"
[276]"メイリオ"
[277]"メイリオ イタリック"
[278]"メイリオ ボールド"
[279]"メイリオ ボールド イタリック"
[280]"游ゴシック Bold"
[281]"游ゴシック Light"
[282]"游ゴシック Medium"
[283]"游ゴシック Regular"
[284]"游明朝 Demibold"
[285]"游明朝 Light"
[286]"游明朝 Regular"
[287]"MS ゴシック"
[288]"MS 明朝"
[289]"MS Pゴシック"
[290]"MS P明朝"

 

 計94種類ありました。

 全フォント数のだいたい1/3ですね。正直、似たようなフォント、全く同じフォントもありますので、事実上はもっと種類が少ないと思われます。それぞれ試してみて自分の好みにあったフォントを使ってみてください。

 

 

どんなフォントか見てみよう

「試してみてください」と言いましたが「94種類も試すなんて大変!」と思う方もいるでしょう。(ほとんどだと思いますが……)

 そこでそれぞれのフォントがどのようなものなのかまとめてみました。

 

[61]"Dialog.bold"

f:id:ZawaWorks:20170312231914p:plain


[62]"Dialog.bolditalic"

f:id:ZawaWorks:20170312232033p:plain


[63]"Dialog.italic"

f:id:ZawaWorks:20170313144818p:plain


[64]"Dialog.plain"

f:id:ZawaWorks:20170313144828p:plain


[65]"DialogInput.bold"

f:id:ZawaWorks:20170313144851p:plain


[66]"DialogInput.bolditalic"

f:id:ZawaWorks:20170313144922p:plain


[67]"DialogInput.italic"

f:id:ZawaWorks:20170313144939p:plain

 

[68]"DialogInput.plain"

f:id:ZawaWorks:20170313144958p:plain

 

[85]"HGP創英角ゴシックUB"

f:id:ZawaWorks:20170313145135p:plain


[86]"HGP創英角ポップ体"

f:id:ZawaWorks:20170313145156p:plain


[87]"HGP創英プレゼンスEB"

f:id:ZawaWorks:20170313145208p:plain


[88]"HGP教科書体"

f:id:ZawaWorks:20170313145228p:plain

 

[89]"HGP明朝B"

f:id:ZawaWorks:20170313145240p:plain

 


[90]"HGP明朝E"

f:id:ZawaWorks:20170313145253p:plain

 


[91]"HGP行書体"

f:id:ZawaWorks:20170313145308p:plain


[92]"HGPゴシックE"

f:id:ZawaWorks:20170313145321p:plain


[93]"HGPゴシックM"

f:id:ZawaWorks:20170313145333p:plain


[94]"HGS創英角ゴシックUB"

f:id:ZawaWorks:20170313145344p:plain


[95]"HGS創英角ポップ体"

f:id:ZawaWorks:20170313145355p:plain


[96]"HGS創英プレゼンスEB"

f:id:ZawaWorks:20170313145407p:plain


[97]"HGS教科書体"

f:id:ZawaWorks:20170313145424p:plain


[98]"HGS明朝B"

f:id:ZawaWorks:20170313145436p:plain


[99]"HGS明朝E"

f:id:ZawaWorks:20170313145448p:plain


[100]"HGS行書体"

f:id:ZawaWorks:20170313145507p:plain


[101]"HGSゴシックE"

f:id:ZawaWorks:20170313145518p:plain


[102]"HGSゴシックM"

f:id:ZawaWorks:20170313145542p:plain


[103]"HG丸ゴシックM-PRO"

f:id:ZawaWorks:20170313145553p:plain


[104]"HG創英角ゴシックUB"

f:id:ZawaWorks:20170313145605p:plain


[105]"HG創英角ポップ体"

f:id:ZawaWorks:20170313145617p:plain


[106]"HG創英プレゼンスEB"

f:id:ZawaWorks:20170313145627p:plain


[107]"HG教科書体"

f:id:ZawaWorks:20170313145638p:plain


[108]"HG明朝B"

f:id:ZawaWorks:20170313145649p:plain


[109]"HG明朝E"

f:id:ZawaWorks:20170313145700p:plain


[110]"HG正楷書体-PRO"

f:id:ZawaWorks:20170313150127p:plain


[111]"HG行書体"

f:id:ZawaWorks:20170313150156p:plain


[112]"HGゴシックE"

f:id:ZawaWorks:20170313150211p:plain


[113]"HGゴシックM"

f:id:ZawaWorks:20170313150225p:plain


[134]"MS Gothic"

f:id:ZawaWorks:20170313150236p:plain


[135]"MS Mincho"

f:id:ZawaWorks:20170313150250p:plain


[137]"MS PGothic"

f:id:ZawaWorks:20170313150303p:plain


[138]"MS PMincho"

f:id:ZawaWorks:20170313150320p:plain


[141]"MS UI Gothic"

f:id:ZawaWorks:20170313150338p:plain


[144]"Malgun Gothic"

f:id:ZawaWorks:20170313150351p:plain


[146]"Malgun Gothic Semilight"(漢字は対応してないようです)

f:id:ZawaWorks:20170313150402p:plain


[148]"Meiryo UI"

f:id:ZawaWorks:20170313150416p:plain


[149]"Meiryo UI Bold"

f:id:ZawaWorks:20170313150430p:plain


[150]"Meiryo UI Bold Italic"

f:id:ZawaWorks:20170313150441p:plain


[151]"Meiryo UI Italic"

f:id:ZawaWorks:20170313150454p:plain


[153]"Microsoft JhengHei"

f:id:ZawaWorks:20170313150504p:plain


[154]"Microsoft JhengHei Bold"

f:id:ZawaWorks:20170313150519p:plain


[155]"Microsoft JhengHei Light"

f:id:ZawaWorks:20170313150535p:plain


[156]"Microsoft JhengHei UI"

f:id:ZawaWorks:20170313150548p:plain


[157]"Microsoft JhengHei UI Bold"

f:id:ZawaWorks:20170313150610p:plain


[158]"Microsoft JhengHei UI Light"

f:id:ZawaWorks:20170313150623p:plain


[166]"Microsoft YaHei"

f:id:ZawaWorks:20170313150636p:plain


[167]"Microsoft YaHei Bold"

f:id:ZawaWorks:20170313150646p:plain


[168]"Microsoft YaHei Light"

f:id:ZawaWorks:20170313150701p:plain


[169]"Microsoft YaHei UI"

f:id:ZawaWorks:20170313150716p:plain


[170]"Microsoft YaHei UI Bold"

f:id:ZawaWorks:20170313150727p:plain


[171]"Microsoft YaHei UI Light"

f:id:ZawaWorks:20170313150740p:plain


[177]"Monospaced.bold"

f:id:ZawaWorks:20170313150910p:plain


[178]"Monospaced.bolditalic"

f:id:ZawaWorks:20170313150920p:plain


[179]"Monospaced.italic"

f:id:ZawaWorks:20170313150933p:plain


[180]"Monospaced.plain"

f:id:ZawaWorks:20170313150944p:plain


[184]"Segoe UI Semilight Italic

f:id:ZawaWorks:20170313150957p:plain


[196]"SansSerif.bold"

f:id:ZawaWorks:20170313151007p:plain


[197]"SansSerif.bolditalic"

f:id:ZawaWorks:20170313151022p:plain


[198]"SansSerif.italic"

f:id:ZawaWorks:20170313151039p:plain


[199]"SansSerif.plain"

f:id:ZawaWorks:20170313151049p:plain


[220]"Serif.bold"

f:id:ZawaWorks:20170313151059p:plain


[221]"Serif.bolditalic"

f:id:ZawaWorks:20170313151257p:plain


[222]"Serif.italic"

f:id:ZawaWorks:20170313151307p:plain


[223]"Serif.plain"

f:id:ZawaWorks:20170313151321p:plain


[224]"SimSun"

f:id:ZawaWorks:20170313151409p:plain


[271]"Yu Gothic UI Bold"

f:id:ZawaWorks:20170313151533p:plain


[272]"Yu Gothic UI Light"

f:id:ZawaWorks:20170313151545p:plain


[273]"Yu Gothic UI Regular"

f:id:ZawaWorks:20170313151557p:plain


[274]"Yu Gothic UI Semibold"

f:id:ZawaWorks:20170313151619p:plain


[275]"Yu Gothic UI Semilight"

f:id:ZawaWorks:20170313151631p:plain


[276]"メイリオ"

f:id:ZawaWorks:20170313151642p:plain


[277]"メイリオ イタリック"

f:id:ZawaWorks:20170313151651p:plain


[278]"メイリオ ボールド"

f:id:ZawaWorks:20170313151810p:plain


[279]"メイリオ ボールド イタリック"

f:id:ZawaWorks:20170313151819p:plain


[280]"游ゴシック Bold"

f:id:ZawaWorks:20170313151829p:plain


[281]"游ゴシック Light"

f:id:ZawaWorks:20170313151839p:plain


[282]"游ゴシック Medium"

f:id:ZawaWorks:20170313144939p:plain


[283]"游ゴシック Regular"

f:id:ZawaWorks:20170313151854p:plain


[284]"游明朝 Demibold"

f:id:ZawaWorks:20170313152017p:plain


[285]"游明朝 Light"

f:id:ZawaWorks:20170313152027p:plain


[286]"游明朝 Regular"

f:id:ZawaWorks:20170313152035p:plain


[287]"MS ゴシック"

f:id:ZawaWorks:20170313152048p:plain


[288]"MS 明朝"

f:id:ZawaWorks:20170313152058p:plain


[289]"MS Pゴシック"

f:id:ZawaWorks:20170313152122p:plain


[290]"MS P明朝"

f:id:ZawaWorks:20170313152132p:plain

 

 こう見ていると、だいたいフォント名がアルファベットのものはあまり違いがなく、日本語名のものはそれぞれの個性がでていますね。

 

 

 おわりに

 フォントがデザインにとって必要不可欠なのは私が言うまでもないことです。それなのに、Processingの記事には様々なグラフィックデザインを取り上げたものがあるのにも関わらず、フォントに関しての記事が少ないのは残念なように思いました。折角ある291種類のフォントを使わないことはもったいないことのように思われます。これを機にぜひフォントを活用してみてください。