LoginSignup
2
1

More than 3 years have passed since last update.

「MSゴシック」以外の「等幅」&「字間=行間=0」のフォントを探してみたが、好みのフォントが無かったので自作に挑戦【後編】

Last updated at Posted at 2018-08-13

フォント自作に挑戦

前編

完成したフォントファイル

作成するフォントの内容

項目 英語 内容
元フォント MigMix-1m
基準文字 Box Drawing 罫線素片
全角文字サイズ FULL WIDTH font-size 1000×1000
半角文字サイズ HALF WIDTH font-size 1000×500
文字太さ 46
字間 letter-spacing 0
行間 0
半角と全角の等幅比 1(英+数):2(仮名+漢字+記号)

「字間=行間=0」のイメージ

image.png

image.png

変更したいフォント

unicode番号は、「&#x〇〇〇〇;」または、「&#x〇〇〇〇〇;」となります。

変更したいフォント:矢印

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
219*
21B*
21C*
21E*
234*
235*
291*
2B0*
2B9*
2B7*

変更したいフォント:線

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
250*
256*
257*
29A*
29F*

変更したいフォント:幾何学記号

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
258*
259*
25A*
25C*
25E*
25F*
2B1*
1FB0* 🬀 🬁 🬂 🬃 🬄 🬅 🬆 🬇 🬈 🬉 🬊 🬋 🬌 🬍 🬎 🬏
1FB1* 🬐 🬑 🬒 🬓 🬔 🬕 🬖 🬗 🬘 🬙 🬚 🬛 🬜 🬝 🬞 🬟
1FB2* 🬠 🬡 🬢 🬣 🬤 🬥 🬦 🬧 🬨 🬩 🬪 🬫 🬬 🬭 🬮 🬯
1FB7* 🭰 🭱 🭲 🭳 🭴 🭵 🭶 🭷 🭸 🭹 🭺 🭻 🭼 🭽 🭾 🭿
1FB8* 🮀 🮁 🮂 🮃 🮄 🮅 🮆 🮇 🮈 🮉 🮊 🮋 🮌 🮍 🮎 🮏

変更したいフォント:数式記号

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
220*
221*
23B*
271*

変更したいフォント:数式変数文字

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
1D43* 𝐴 𝐵 𝐶 𝐷 𝐸 𝐹 𝐺 𝐻 𝐼 𝐽 𝐾 𝐿
1D44* 𝑀 𝑁 𝑂 𝑃 𝑄 𝑅 𝑆 𝑇 𝑈 𝑉 𝑊 𝑋 𝑌 𝑍 𝑎 𝑏
1D45* 𝑐 𝑑 𝑒 𝑓 𝑔 𝑕 𝑖 𝑗 𝑘 𝑙 𝑚 𝑛 𝑜 𝑝 𝑞 𝑟
1D46* 𝑠 𝑡 𝑢 𝑣 𝑤 𝑥 𝑦 𝑧 𝑨 𝑩 𝑪 𝑫 𝑬 𝑭 𝑮 𝑯
1D47* 𝑰 𝑱 𝑲 𝑳 𝑴 𝑵 𝑶 𝑷 𝑸 𝑹 𝑺 𝑻 𝑼 𝑽 𝑾 𝑿
1D48* 𝒀 𝒁 𝒂 𝒃 𝒄 𝒅 𝒆 𝒇 𝒈 𝒉 𝒊 𝒋 𝒌 𝒍 𝒎 𝒏
1D49* 𝒐 𝒑 𝒒 𝒓 𝒔 𝒕 𝒖 𝒗 𝒘 𝒙 𝒚 𝒛 𝒜 𝒝 𝒞 𝒟

変更したいフォント:数式変数文字(二重線)

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
210*
211*
212*
1D53* 𝔸 𝔹 𝔻 𝔼 𝔽 𝔾
1D54* 𝕀 𝕁 𝕂 𝕃 𝕄 𝕆 𝕊 𝕋 𝕌 𝕍 𝕎 𝕏
1D55* 𝕐 𝕒 𝕓 𝕔 𝕕 𝕖 𝕗 𝕘 𝕙 𝕚 𝕛 𝕜 𝕝 𝕞 𝕟
1D56* 𝕠 𝕡 𝕢 𝕣 𝕤 𝕥 𝕦 𝕧 𝕨 𝕩 𝕪 𝕫

変更したいフォント:上付き

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
00B* ² ³ ¹
1D2*
1D3* ᴿ
1D4*
1D5*
1D9*
1DA*
1DB* ᶿ
207*

変更したいフォント:下付き

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
1D6*
208*
209*

変更したいフォント:絵文字

下1桁 0 1 2 3 4 5 6 7 8 9 A B C D E F
26E*
26F*
1F30* 🌊
1F33* 🌲 🌳
1F3D* 🏔 🏕 🏘 🏙 🏚
1F3E* 🏯
1F3F* 🏰

変更したいフォント:色付き幾何学記号

文字 unicode番号
「&#x〇〇〇〇;」
英語 日本語
🟥 1f7e5 red square 赤四角
🟧 1f7e7 orange square オレンジ四角
🟨 1f7e8 yellow square 黄四角
🟩 1f7e9 green square 緑四角
🟦 1f7e6 blue square 青四角
🟪 1f7ea purple square 紫四角
🟫 1f7eb brown square 茶四角
2b1b black large square 黒大四角
2b1c white large square 白大四角
🔴 1F534 red circle 赤丸
🟠 1F7E0 orange circle オレンジ丸
🟡 1F7E1 yellow circle 黄丸
🟢 1F7E2 circle 緑丸
🔵 1F535 blue circle 青丸
🟣 1F7E3 purple circle 紫丸
🟤 1F7E4 brown circle 茶丸
26AB black circle 黒丸
26AA white circle 白丸
2764 red heart 赤ハート
🧡 1F9E1 orange heart オレンジハート
💛 1F49B yellow heart 黄ハート
💚 1F49A green heart 緑ハート
💚 1F499 blue heart 青ハート
💚 1F49C purple heart 紫ハート
🤎 1F90E brown heart 茶ハート
🤎 1F5A4 black heart 黒ハート
🤎 1F90D white heart 白ハート

(3)実践編①「自作フォントでUMLを作ってみた」

入力元文字

╭────╮
│クラス図│
╰────╯
┌─────────┐
│神戸住民     │
├─────────┤
│名前       │
│住所       │
│電話番号     │
│年齢       │
├─────────┤
│通勤する()   │
│買い物に行く() │
└─┬───────┘
  │0..*
  │
  │
  ◇1
┌─────────┐
│会社       │
├─────────┤
│会社名      │
│住所       │
│電話番号     │
├─────────┤
│所属する()   │
│脱退する()   │
└─────────┘

(3)実践編①メモ帳をキャプチャーして張付

image.png

(3)実践編②「自作フォントでアクティビティ図を作ってみた」

 アクティビティ図=活動図:フローチャートのUML版。同期記述もできる。

入力元文字

   ● 
╭──┴──────╮
│アメリカに行きたい│
╰──┬──────╯
   ↓
 ■■■■■■■■■■■■
┌┴───┐    ┌┴──┐
│人に聞く│    │考える│
└┬───┘    └┬──┘
 ↓         ↓
 ■■■■■■■■■■■■
   ↓
 ┌─┴──────┐
 │飛行機で行くか?│
 └─┬──────┘
   ↓
  YES◇────┐No
 ┌─⭳─┐ ┌⭳─────┐ 
 │到着 │ │船で行くか?│ 
 └───┘ └┬─────┘ 
        ↓
       YES◇──────┐No
      ┌─⭳─┐   ┌⭳──────┐
      │到着 │   │泳いでいくか?│
      └───┘   └┬──────┘
              YES◇──────┐No  
             ┌─⭳──┐  ┌⭳─────┐
             │やめとけ│  │どうやって?│
             └┬───┘  └┬─────┘
              ├───────┘
              ◉ 

(3)実践編②メモ帳をキャプチャーして張付

image.png

★番外編「自作フォントでQRコードを作ってみた」

 最初の目的と違いますが、綺麗に表示されかつQRコードも読めたので記載します。
記号「■」とメモ帳でQRコードを作成したら綺麗だった(自作font)

入力元文字(■で構成)


■■■■■■■  ■ ■■ ■■■■■■■
■     ■ ■■ ■  ■     ■
■ ■■■ ■ ■■  ■ ■ ■■■ ■
■ ■■■ ■  ■ ■  ■ ■■■ ■
■ ■■■ ■ ■   ■ ■ ■■■ ■
■     ■ ■  ■■ ■     ■
■■■■■■■ ■ ■ ■ ■■■■■■■
        ■■■■■ 
■■ ■  ■■ ■■   ■■■ ■■
 ■■■■■ ■■■■   ■    ■
■ ■  ■■ ■ ■ ■■   ■■
  ■ ■■   ■■■     ■  ■
■ ■   ■■■   ■ ■ ■ ■■■
        ■■■■   ■■■ ■
■■■■■■■ ■ ■  ■ ■ ■■■■
■     ■   ■■■■ ■■■
■ ■■■ ■  ■■■  ■■■ ■■■
■ ■■■ ■ ■  ■     ■■■■
■ ■■■ ■  ■  ■   ■   ■
■     ■ ■    ■■ ■ ■ ■
■■■■■■■ ■■ ■■   ■■■  

メモ帳をキャプチャーして張付

image.png

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1