游ゴシック/游明朝/メイリオを等幅表示する方法

ウェブフォント
[ 游ゴシック/游明朝/メイリオを等幅表示する方法 ]

游ゴシックや游明朝やメイリオには等幅用のグリフが収録されています。この記事では HTML と CSS で等幅フォントのように表示する方法を紹介します。

大雑把には OpenType の機能タグの fwidhwid を CSS で適宜指定することで、全角幅グリフと半角幅グリフが表示されます。

サンプル

クリックで太字と切り替わります。

游ゴシック 等幅游ゴシック 標準
 !”#$%&'()*+,-./0123456789:;<=>?|
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_|
`abcdefghijklmnopqrstuvwxyz{|}~ |
 。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソ|
タチツテトナニヌネノハヒフヘヨマミムメモヤユヨラリルレロワン゙゚|
 !”#$%&'()*+,-./0123456789:;<=>?|
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_|
`abcdefghijklmnopqrstuvwxyz{|}~ |
 。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソ|
タチツテトナニヌネノハヒフヘヨマミムメモヤユヨラリルレロワン゙゚|
  、。,.・:;?!゛゜´`¨^ ̄_ヽ|
ヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥‘’|
“”()〔〕[]{}〈〉《》「」『』【】|
+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥|
$¢£%#&*@§☆★○●◎◇     |
 ◆□■△▲▽▼※〒→←↑↓〓     |
      ∈∋⊆⊇⊂⊃∪∩      |
  ∧∨¬⇒⇔∀∃           |
∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬     |
  ʼn♯♭♪†‡¶    ◯     |
(中略)
 ─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳|
┫┻╋┠┯┨┷┿┝┰┥┸╂       |
 ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲|
⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ ㍉㌔㌢㍍㌘㌧㌃㌶|
㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡     |
   ㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼|
≒≡∫∮∑√⊥∠∟⊿∵∩∪       |
 ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ¬¦'"     |
  、。,.・:;?!゛゜´`¨^ ̄_ヽ|
ヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥‘’|
“”()〔〕[]{}〈〉《》「」『』【】|
+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥|
$¢£%#&*@§☆★○●◎◇     |
 ◆□■△▲▽▼※〒→←↑↓〓     |
      ∈∋⊆⊇⊂⊃∪∩      |
  ∧∨¬⇒⇔∀∃           |
∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬     |
  ʼn♯♭♪†‡¶    ◯     |
(中略)
 ─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳|
┫┻╋┠┯┨┷┿┝┰┥┸╂       |
 ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲|
⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ ㍉㌔㌢㍍㌘㌧㌃㌶|
㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡     |
   ㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼|
≒≡∫∮∑√⊥∠∟⊿∵∩∪       |
 ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ¬¦'"     |
游明朝 等幅游明朝 標準
 !”#$%&'()*+,-./0123456789:;<=>?|
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_|
`abcdefghijklmnopqrstuvwxyz{|}~ |
 。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソ|
タチツテトナニヌネノハヒフヘヨマミムメモヤユヨラリルレロワン゙゚|
 !”#$%&'()*+,-./0123456789:;<=>?|
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_|
`abcdefghijklmnopqrstuvwxyz{|}~ |
 。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソ|
タチツテトナニヌネノハヒフヘヨマミムメモヤユヨラリルレロワン゙゚|
  、。,.・:;?!゛゜´`¨^ ̄_ヽ|
ヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥‘’|
“”()〔〕[]{}〈〉《》「」『』【】|
+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥|
$¢£%#&*@§☆★○●◎◇     |
 ◆□■△▲▽▼※〒→←↑↓〓     |
      ∈∋⊆⊇⊂⊃∪∩      |
  ∧∨¬⇒⇔∀∃           |
∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬     |
  ʼn♯♭♪†‡¶    ◯     |
(中略)
 ─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳|
┫┻╋┠┯┨┷┿┝┰┥┸╂       |
 ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲|
⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ ㍉㌔㌢㍍㌘㌧㌃㌶|
㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡     |
   ㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼|
≒≡∫∮∑√⊥∠∟⊿∵∩∪       |
 ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ¬¦'"     |
  、。,.・:;?!゛゜´`¨^ ̄_ヽ|
ヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥‘’|
“”()〔〕[]{}〈〉《》「」『』【】|
+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥|
$¢£%#&*@§☆★○●◎◇     |
 ◆□■△▲▽▼※〒→←↑↓〓     |
      ∈∋⊆⊇⊂⊃∪∩      |
  ∧∨¬⇒⇔∀∃           |
∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬     |
  ʼn♯♭♪†‡¶    ◯     |
(中略)
 ─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳|
┫┻╋┠┯┨┷┿┝┰┥┸╂       |
 ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲|
⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ ㍉㌔㌢㍍㌘㌧㌃㌶|
㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡     |
   ㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼|
≒≡∫∮∑√⊥∠∟⊿∵∩∪       |
 ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ¬¦'"     |
メイリオ 等幅メイリオ 標準
 !"#$%&'()*+,-./0123456789:;<=>?|
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_|
`abcdefghijklmnopqrstuvwxyz{|}~ |
 。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソ|
タチツテトナニヌネノハヒフヘヨマミムメモヤユヨラリルレロワン゙゚|
 !"#$%&'()*+,-./0123456789:;<=>?|
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_|
`abcdefghijklmnopqrstuvwxyz{|}~ |
 。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソ|
タチツテトナニヌネノハヒフヘヨマミムメモヤユヨラリルレロワン゙゚|
  、。,.・:;?!゛゜´`¨^ ̄_ヽ|
ヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥‘’|
“”()〔〕[]{}〈〉《》「」『』【】|
+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥|
$¢£%#&*@§☆★○●◎◇     |
 ◆□■△▲▽▼※〒→←↑↓〓     |
      ∈∋⊆⊇⊂⊃∪∩      |
  ∧∨¬⇒⇔∀∃           |
∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬     |
  ʼn♯♭♪†‡¶    ◯     |
(中略)
 ─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳|
┫┻╋┠┯┨┷┿┝┰┥┸╂       |
 ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲|
⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ ㍉㌔㌢㍍㌘㌧㌃㌶|
㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡     |
   ㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼|
≒≡∫∮∑√⊥∠∟⊿∵∩∪       |
 ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ¬¦'"     |
  、。,.・:;?!゛゜´`¨^ ̄_ヽ|
ヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥‘’|
“”()〔〕[]{}〈〉《》「」『』【】|
+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥|
$¢£%#&*@§☆★○●◎◇     |
 ◆□■△▲▽▼※〒→←↑↓〓     |
      ∈∋⊆⊇⊂⊃∪∩      |
  ∧∨¬⇒⇔∀∃           |
∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬     |
  ʼn♯♭♪†‡¶    ◯     |
(中略)
 ─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳|
┫┻╋┠┯┨┷┿┝┰┥┸╂       |
 ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲|
⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ ㍉㌔㌢㍍㌘㌧㌃㌶|
㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡     |
   ㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼|
≒≡∫∮∑√⊥∠∟⊿∵∩∪       |
 ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ¬¦'"     |
BIZ UDゴシック(参考)MS ゴシック(参考)
 !"#$%&'()*+,-./0123456789:;<=>?|
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_|
`abcdefghijklmnopqrstuvwxyz{|}~ |
 。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソ|
タチツテトナニヌネノハヒフヘヨマミムメモヤユヨラリルレロワン゙゚|
 !"#$%&'()*+,-./0123456789:;<=>?|
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_|
`abcdefghijklmnopqrstuvwxyz{|}~ |
 。「」、・ヲァィゥェォャュョッーアイウエオカキクケコサシスセソ|
タチツテトナニヌネノハヒフヘヨマミムメモヤユヨラリルレロワン゙゚|

概要

等幅化できる文字

  • 半角は JIS X 0201 の内、U+005C を除いた範囲
  • 全角は JIS X 0208 の範囲(メイリオではギリシア文字・キリル文字を除く)

指定方法

  • 半角に CSS 経由で半角幅 font-feature-settings: "hwid" on; を指定
  • 全角に CSS 経由で全角幅 font-feature-settings: "fwid" on; を指定

半角か全角かを明示的に class 属性などで付与する要領で HTML と紐付けると良いでしょう。font-family で先に他の日本語等幅フォントがマッチしていても、幅に関する副作用は少ないはずです。

詳細

指定に関して

  • 全体に両方を指定すると、半角幅グリフのある平仮名/片仮名/記号類が半角になる
  • JIS X 0208 の範囲外に、元々全角でも別デザインの全角が紐付いている文字もある(「©」「©」など)

特殊事情

U+005C バックスラッシュ

JIS X 0201 では円記号、JIS X 0213 ではバックスラッシュ。

  • U+005C での円記号に対する半角幅グリフは、游ゴシックとメイリオでは定義外(サンプルの通り「\」でズレる)
  • メイリオでは U+00A5 での円記号に対する半角幅グリフが定義されている(謎)
  • 半角バックスラッシュは、全角「\」に hwid 指定で表示可能(ただしコピペで全角「\」になる)

U+007E チルダ

JIS X 0201 ではオーバーライン、JIS X 0213 ではチルダ。……チルダで良いよね?

スタイル

  • 斜体は含まれていない
  • 太字でも同じ文字幅
  • ゼロスラッシュも可能(游ゴシック「0」、メイリオ「0」)

メイリオの半角幅グリフと MeiryoKe_Gothic の比較

メイリオ等幅 と MeiryoKe_Gothic の比較

  • #%@ が狭すぎない
  • * の高さが中央寄り
  • <>WN^w~ 等がより自然に見える
  • 太字でも文字幅が変わらない
  • 但し、ヒンティングはイマイチ(MacType 等でヒンティング無効なら大丈夫)

メイリオのヒンティングは、恐らく Windows に垂直方向のスムージング処理が無かった頃のチューニングのままです。

おわりに

以上、游ゴシック/游明朝/メイリオを使って等幅表示できなくもない、という記事でした。

特に、游明朝/游ゴシックの書体のまま、等幅で整形した堅めの雰囲気の文章として表示させるのに良いと思います。

なお、円記号/バックスラッシュが変則的なので、コピペが前提のソースコード等には、普通に monospace のフォント指定がお勧めです。

ウェブで等幅なコードブロックが乱れる原因と対策
ウェブに掲載されているソースコードなどは、通例、等幅フォントが用いられています。ところが残念な事に、等幅フォントが指定されていながら、全体として桁が揃っていないことが、技術系サービスの大手でも珍しくなかったりします。

それでは、良き等幅ライフを!

コメント

タイトルとURLをコピーしました