PREタグの中でプロポーショナルフォントを使うTEST

以前から不思議だったのですよね。

PREタグの中は標準では自動的に等幅フォント（総称ファミリネーム＝monospace）と決まっているようです。
何も指定しなければ、「monospace」が指定されたのと同じ状態なわけです。

では、プロポーショナルフォントを指定する総称ファミリーメームは無いの？
⇒検索してみても出てきません、どうやら無いらしいですね。

日本語で言うところの明朝系／ゴシック系を示す「serif」「suns-serif」という指定はありますが、これらのフォントにはプロポーショナルフォントと等幅フォントの両方が存在しております。

そして、PREの中では、自動的に等幅フォントが選ばれてしまうわけですね。

総称ファミリーネームでプロポーショナルフォントを強制することはできないようです。

しかし、フォントが等幅と決められている PRE タグの中でも、プロポーショナルフォントを直接指定してやれば、不等幅フォントを使うことは可能なわけです。

というわけで、ちょっと色々実験

※フォントは環境によって見え方が違う場合があります＝フォントがインストールされていない環境ではフォント名を指定しても適用されませんので、標準フォントになってしまいます。

（この実験も、スマホから見ている人には、全部同じフォントにしか見えないかも？笑）

無指定、PREの外＝その環境（CSS）で指定されている標準フォントになります。

Cocoonデフォールトは遊ゴシック

どうやら遊ゴシックは等幅フォントのようですね
しかし、珍しく？游ゴシックには「UIフォント」も用意されているそうで。

※UIフォント：WindowsのUI用に用意された、とにかく幅を限界まで詰めたフォント

font-family:'Yu Gothic UI'

※ここから先はすべてPREタグの中に入れてみます。

PRE内デフォールト(monospace)

ひとまず何はともあれそうした幸福のための偽りは尊敬を自己についにもたらすために言ってくれるならほとんどとにかく２２年も生きるなど上流にこそ未練がなければ私にそれらが打ち壊すであろう事を見せることはないだろう

ＭＳ ゴシックを指定してみる（Windowsではmonospaceと同じ？）

ひとまず何はともあれそうした幸福のための偽りは尊敬を自己についにもたらすために言ってくれるならほとんどとにかく２２年も生きるなど上流にこそ未練がなければ私にそれらが打ち壊すであろう事を見せることはないだろう

MS Pゴシック

ひとまず何はともあれそうした幸福のための偽りは尊敬を自己についにもたらすために言ってくれるならほとんどとにかく２２年も生きるなど上流にこそ未練がなければ私にそれらが打ち壊すであろう事を見せることはないだろう

MS UIゴシック

ひとまず何はともあれそうした幸福のための偽りは尊敬を自己についにもたらすために言ってくれるならほとんどとにかく２２年も生きるなど上流にこそ未練がなければ私にそれらが打ち壊すであろう事を見せることはないだろう

serif（明朝体）※不等幅？

ひとまず何はともあれそうした幸福のための偽りは尊敬を自己についにもたらすために言ってくれるならほとんどとにかく２２年も生きるなど上流にこそ未練がなければ私にそれらが打ち壊すであろう事を見せることはないだろう

suns-serif（ゴシック体）※等幅

ひとまず何はともあれそうした幸福のための偽りは尊敬を自己についにもたらすために言ってくれるならほとんどとにかく２２年も生きるなど上流にこそ未練がなければ私にそれらが打ち壊すであろう事を見せることはないだろう

serifが何のフォントなのか不明、ＭＳ Ｐ明朝かと思ったら全然違った。

ＭＳ Ｐ明朝

ひとまず何はともあれそうした幸福のための偽りは尊敬を自己についにもたらすために言ってくれるならほとんどとにかく２２年も生きるなど上流にこそ未練がなければ私にそれらが打ち壊すであろう事を見せることはないだろう

ひとまず何はともあれそうした幸福のための偽りは尊敬を自己についにもたらすために言ってくれるならほとんどとにかく２２年も生きるなど上流にこそ未練がなければ私にそれらが打ち壊すであろう事を見せることはないだろう

Windows8.1移行、serifの標準は游明朝になったんですね。

そして不思議なのは、

遊ゴシック⇒等幅
游明朝⇒不等幅

となっているように見えます。

明朝にも等幅フォントはあるわけで、同じ游明朝も等幅と不等幅両方用意してもよかったような気がするのですが、なぜそうなっているのか、この辺、検索してもあまり情報が出てこないのでよく分かりませんでした。

その他、フォントについて調べて分かったこと、まとめ

メイリオは等幅フォント！
等幅で設計されているので、どうやっても不等幅にはなりません。

しかし、Meiryo UIというUIフォントは存在する。

MSゴシック・MS 明朝はTrueTypeフォント。
等幅・不等幅両方存在する。

TrueTypeフォントの他に、より新しいOpenTypeフォントというのが存在する。

OpenTypeフォントは等幅・不等幅をプロパティの指定によってコントロールできるとか。

OpenTypeフォントは基本有料フォントしかないようですが、実は遊シリーズがOpenTypeフォントだと言う話を聞いて、試してみた。

遊ゴシック font-feature-settings:'palt' 1

遊ゴシック font-feature-settings:'palt' 0;

游明朝ではどうか？

遊明朝 font-feature-settings:'palt' 0;

遊明朝 font-feature-settings:'palt' 1;

同じフォントで、字詰め有り・無しが実現できていますね！

※font-feature-settingsの指定には 'normal', 'palt' 以外にもあるのですが、複雑だったので省略(笑)

なんか、よく分からないこともまだ多いのですが、もう、等幅←→プロポーショナル という概念はなくなってきているという感じですかね？