Wiki/フォント

Last-modified: 2023-12-16 (土) 09:18:17

説明

フォントを部分的に指定して表示する。
指定するフォントはあらかじめwikiwikiが用意したfont-familyから選択。
公式案内

プラグイン書式

使用フォントを部分的に指定することができるプラグイン。wikiwiki独自の機能であり、一般的なpukiwikiには搭載されてない。

  • font-family一覧
    &font;
    実行結果
    &font(<sans-serif | sans-serif-tight | serif | monospace | legacy-ui-gothic>){...};
  • インライン型
    &font(serif){みんちょう};つうじょう
    実行結果
    みんちょうつうじょう
  • ブロック型(マルチラン対応)
    #font(serif) {{
    みん
    ちょう
    }}
    つうじょう
    実行結果

    みん
    ちょう

    つうじょう

font-family

以下のfont-familyを指定できる。
基本的に欧文(Mac+Win)、Mac和文、Windows和文の順になっている。
以下斜体は欧文フォントを示してる。

  • sans-serif(標準)
    Verdana, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif
    ゴシック系標準
  • sans-serif-tight
    Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif
    ゴシック系で横幅狭め。狭めといっても半角アルファベットや記号をVerdana→Arialで表示する違い。日本語フォントの部分に違いはない。
  • serif
    Times New Roman, Hiragino Mincho ProN, HiraMinProN-W3, Yu Mincho, YuMincho, serif
    明朝系
  • monospace
    MS Gothic, Osaka-mono, Osaka, Meiryo, Hiragino Kaku Gothic ProN, Hiragino Sans, Menlo, Monaco, Courier New, Courier, monospace
    ゴシック系で等幅
    これだけ和文フォント優先で定義されているため、記号(■や△など)が和文フォント優先で表示できる。
    たくさん書かれているが、Winの人はMS Gothic、Mac系の人はOsaka-monoで表示されるはず。
  • legacy-ui-gothic
    Tahoma, Arial, MS UI Gothic, Meiryo UI, Yu Gothic UI, Osaka, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif
    ゴシック系でシステムUIタイプ。

表示されるフォント

各font-familyに多くのフォントが定義されているが、先頭から読み込んでいって自身のOSが表示できるものが自動で選ばれる。
2020年現在のMacとWindowsのOSに搭載されている標準フォントから概ね以下の太字のフォントで表示される。

font-family半角英数記号全角
Mac&WinMacWin
sans-serif(標準)Verdana
Arial
Hiragino Kaku Gothic ProN
Hiragino Sans
Meiryo
sans-serif-tightArialHiragino Kaku Gothic ProN
Hiragino Sans
Meiryo
serifTimes New RomanHiragino Mincho ProN
HiraMinProN-W3
YuMincho
Yu Mincho
monospaceOsaka-mono
Osaka
MS Gothic
legacy-ui-gothicTahoma
Arial
OsakaMS UI Gothic
Meiryo UI
Yu Gothic UI

記号が小さく表示される問題

前述のように表示されるフォントは定義左側から優先される。一部の記号は欧文フォントで表示できてしまうため意図した和文フォントを使えなかったり、記号を並べたときの統一感が損なわれる問題が発生する。回避策はない。

例えばsans-serifを指定してWinsows7以降のOSで以下の文字列を表示する場合

abcあいう○●×△▲◇

上の文字をWindows7以降の環境で見ると以下のように文字によって異なるフォントで表示される。(Macも概ね同様に見えるはず。)

フォント名使われてる部分(赤)備考
Verdanaabcあいう○●×△▲◇欧文なので基本全角は持ってないのだが、Verdanaは"●×"の文字コードが定義されておりこのフォントが使われる
Arialabcあいう●×△欧文フォントだが"abc"は先にVerdana優先されるのでArialは使われない。○▲はArialに定義がある。
Meiryoabcあいう○●×和文フォント。半角"abc"も表示できるが、Verdanaが優先されてるのでMeiryoは使われない。日本語の"あいう"はこれが使われる。"△◇"は上記欧文フォントが持ってないコードなのでMeiryoで表示される

サンプル

sans-serif (標準)

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

~!"#$%&'()*+,-./:;<=>?@[\]^_`{|}
○●×△▲◇◆□■☆★↑↓→←
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

sans-serif-tight

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

~!"#$%&'()*+,-./:;<=>?@[\]^_`{|}
○●×△▲◇◆□■☆★↑↓→←
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

serif

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

~"#$%&'()*+,-./:;<=>?@[\]^_`{|}
○●×△▲◇◆□■☆★↑↓→←
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

monospace

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

~!"#$%&'()*+,-./:;<=>?@[\]^_`{|}
○●×△▲◇◆□■☆★↑↓→←
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

legacy-ui-gothic

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

~!"#$%&'()*+,-./:;<=>?@[\]^_`{|}
○●×△▲◇◆□■☆★↑↓→←
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

比較

sans-serif (標準)0123ABCDabcd○●×△▲◇◆□■☆★↑↓→←あいうえおoO01lIij!/\~^-+*=%,.;:[](){}
sans-serif-tight0123ABCDabcd○●×△▲◇◆□■☆★↑↓→←あいうえおoO01lIij!/\~^-+*=%,.;:[](){}
serif0123ABCDabcd○●×△▲◇◆□■☆★↑↓→←あいうえおoO01lIij!/\~^-+*=%,.;:[](){}
monospace0123ABCDabcd○●×△▲◇◆□■☆★↑↓→←あいうえおoO01lIij!/\~^-+*=%,.;:[](){}
legacy-ui-gothic0123ABCDabcd○●×△▲◇◆□■☆★↑↓→←あいうえおoO01lIij!/\~^-+*=%,.;:[](){}

記号比較

数値参照文字参照未指定sans-serifsans-serif-tightserifmonospacelegacy-ui-gothic備考
&#9675;普通に変換で出るのはこれ
&#9711;
&#12295;
&#9679;
&#8226;&bull;
&#9678;
&#215;&times;××××××普通に変換で出るのはこれ
&#x2613;
&#10005;
&#8855;&otimes;
&#8853;&oplus;
&#9651;
&#9650;
&#9633;普通に変換で出るのはこれ
&#x2610
&#9632;

参考

名前書体Win7Win8.1Win10Mac
VerdanaP
ArialP
TahomaP
Times New RomanPSerif
CourierSerif
Menlo
Monaco
Hiragino Kaku Gothic ProNP
Hiragino SansP
Hiragino Mincho ProNPSerif
HiraMinProN-W3PSerif
YuMinchoPSerif
OsakaP
Osaka-Mono
Courier NewSerif
MS Gothic
MS PGothicP
MS UI GothicUI
MS MinchoSerif
MS PMinchoPSerif
MeiryoP/等
Meiryo UIUI
Yu GothicP
Yu Gothic UIUI
Yu MinchoPSerif

Font Awesome

https://wikiwiki.jp/sample/fa
https://fontawesome.com/search

経緯