WPF のフォントは汚い?
◆ TextOptions.TextFormattingMode
◆ Display を選んで GDI 互換の表示方法にすれば細くなる
◆ Display を選んで GDI 互換の表示方法にすれば細くなる
これの続き
自分でコンソール風なウィンドウを作ったら なんかフォントが太くてみにくいです
太い
作ったの
mintty のコンソール(理想)
同じフォントとフォントサイズを指定しています
となると WPF の表示方法が問題に思えます
WPF のテキスト表示のオプションを探していると
というプロパティを発見
値を切り替えて表示を確認してみました
左側が TextFormattingMode="Display"
右側が TextFormattingMode="Ideal"
上側が TextHintingMode="Animated"
下側が TextHintingMode="Fixed"
それぞれの 3 つが上から
TextRenderingMode="Aliased"
TextRenderingMode="ClearType"
TextRenderingMode="Grayscale"
です
右側の Ideal が全体的に太くて見づらくなっています
上下を比べると 左側 (Display) のほうは違いないように見えますが 右側(Ideal) のほうは 上側 (Animated) だと少しボヤけて見えます
3 つのレンダリングモードは 右側 (Ideal) だとわずかですが真ん中の ClearType が綺麗で他はちょっときたなく見えます
左側 (Display) だと上の Aliased だけギザギザしています
Aliased では bilevel anti-aliasing が適用されるようです
バイというと 2 つなので高度なことをしていなくて 比較的綺麗さが足りないものによくある名前です
Grayscale は黒と白の間の中間の灰色を使えるのでちょっと綺麗な Anti-aliasing
ClearType は Windows の設定で調整できるフォントの表示方法です
この結果からもわかりますが 綺麗にしたいなら ユーザが調整してる ClearType にしておくのが一番でしょう
Animated と Fixed はアニメーション中かそれ以外の通常の動いていない固定のテキスト それぞれに適した形にしているのだと思います
アニメーション中はちょっと太くなるくらいが見やすいのかな?
TextHintingMode には Auto があるので Auto にしておけばそのときに向いてる方にしてくれるはずです
最後に TextFormattingMode ですが
Display は GDI 互換の text metrics を
Ideal は WPF で使われてる ideal font metrics を使って描画されるようです
WPF ではすべて Direct3D で描画されるとか ベクタグラフィックスで正確なズームができるとか言われてますし Ideal はそのあたりに都合がいい方法というところでしょうか
GDI 互換は WindowsForms など昔からある GUI と互換のある表示方法なので 今回の理想の mintty みたいな普通に Win32API で作られてるソフトと同じ表示にするにはこっちを選べばいいということのようです
まずはさっきと同じ 100%
80% 表示だとこうなります
Ideal は太すぎてさっきより見づらいです
Display も見やすいとはいえませんが 全体では左下ブロックの真ん中が一番かなと思います
右上の Ideal+Animated はもう光ってますよね
次に 300%
ズームにした場合は Ideal が綺麗です
ただやっぱりちょっと太いなぁとは思いますけど
Display のほうはズーム倍率によってはボヤけて見えます
倍率によっては Ideal よりちょっとノイズが見えるだけで綺麗です
また この倍率は FontSize とは別にズーム表示したものです
FontSize 自体を変えた場合は 大きくてもこの画像のようにボヤけて見えることは試した限りなかったです
FontSize に小数を入れてもくっきりでした
実害はなさそうなので デフォルトは WPF 用の Ideal ですが これまでのが好みなら Display にしても良さそうです
なんとなくですが Ideal のこの太さ Mac ユーザが好みそうな気がしました
Windows に MacType? を入れて太くしてる人をたまに見かけます
私的には ないわー と思ってますけど
しかし Windows は対抗したのか Windows 10 の游ゴシックで細すぎ かすれて読みづらい というヒドイフォントを出してくれました
極端じゃなくてもうちょっと間のいい感じにしてもらいたいですね
あと 透明度の方はさらに 続く です
自分でコンソール風なウィンドウを作ったら なんかフォントが太くてみにくいです
太い
作ったの
mintty のコンソール(理想)
同じフォントとフォントサイズを指定しています
となると WPF の表示方法が問題に思えます
WPF のテキスト表示のオプションを探していると
- TextOptions.TextFormattingMode
- TextOptions.TextHintingMode
- TextOptions.TextRenderingMode
というプロパティを発見
値を切り替えて表示を確認してみました
TextOptions
<Grid Background="#222">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Foreground="White" FontFamily="monaco" FontSize="10pt" Grid.Column="0">
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
<LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
</TextBlock>
<TextBlock Foreground="White" FontFamily="monaco" FontSize="10pt" Grid.Column="1">
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
<LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
</TextBlock>
</Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Foreground="White" FontFamily="monaco" FontSize="10pt" Grid.Column="0">
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
<LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
</TextBlock>
<TextBlock Foreground="White" FontFamily="monaco" FontSize="10pt" Grid.Column="1">
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
<LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType">ABCDabcd</TextBlock><LineBreak/>
<TextBlock TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale">ABCDabcd</TextBlock><LineBreak/>
</TextBlock>
</Grid>
結果
左側が TextFormattingMode="Display"
右側が TextFormattingMode="Ideal"
上側が TextHintingMode="Animated"
下側が TextHintingMode="Fixed"
それぞれの 3 つが上から
TextRenderingMode="Aliased"
TextRenderingMode="ClearType"
TextRenderingMode="Grayscale"
です
右側の Ideal が全体的に太くて見づらくなっています
上下を比べると 左側 (Display) のほうは違いないように見えますが 右側(Ideal) のほうは 上側 (Animated) だと少しボヤけて見えます
3 つのレンダリングモードは 右側 (Ideal) だとわずかですが真ん中の ClearType が綺麗で他はちょっときたなく見えます
左側 (Display) だと上の Aliased だけギザギザしています
Aliased では bilevel anti-aliasing が適用されるようです
バイというと 2 つなので高度なことをしていなくて 比較的綺麗さが足りないものによくある名前です
Grayscale は黒と白の間の中間の灰色を使えるのでちょっと綺麗な Anti-aliasing
ClearType は Windows の設定で調整できるフォントの表示方法です
この結果からもわかりますが 綺麗にしたいなら ユーザが調整してる ClearType にしておくのが一番でしょう
Animated と Fixed はアニメーション中かそれ以外の通常の動いていない固定のテキスト それぞれに適した形にしているのだと思います
アニメーション中はちょっと太くなるくらいが見やすいのかな?
TextHintingMode には Auto があるので Auto にしておけばそのときに向いてる方にしてくれるはずです
最後に TextFormattingMode ですが
Display は GDI 互換の text metrics を
Ideal は WPF で使われてる ideal font metrics を使って描画されるようです
WPF ではすべて Direct3D で描画されるとか ベクタグラフィックスで正確なズームができるとか言われてますし Ideal はそのあたりに都合がいい方法というところでしょうか
GDI 互換は WindowsForms など昔からある GUI と互換のある表示方法なので 今回の理想の mintty みたいな普通に Win32API で作られてるソフトと同じ表示にするにはこっちを選べばいいということのようです
サイズ
サイズを変えてみますまずはさっきと同じ 100%
80% 表示だとこうなります
Ideal は太すぎてさっきより見づらいです
Display も見やすいとはいえませんが 全体では左下ブロックの真ん中が一番かなと思います
右上の Ideal+Animated はもう光ってますよね
次に 300%
ズームにした場合は Ideal が綺麗です
ただやっぱりちょっと太いなぁとは思いますけど
Display のほうはズーム倍率によってはボヤけて見えます
倍率によっては Ideal よりちょっとノイズが見えるだけで綺麗です
また この倍率は FontSize とは別にズーム表示したものです
FontSize 自体を変えた場合は 大きくてもこの画像のようにボヤけて見えることは試した限りなかったです
FontSize に小数を入れてもくっきりでした
実害はなさそうなので デフォルトは WPF 用の Ideal ですが これまでのが好みなら Display にしても良さそうです
なんとなくですが Ideal のこの太さ Mac ユーザが好みそうな気がしました
Windows に MacType? を入れて太くしてる人をたまに見かけます
私的には ないわー と思ってますけど
しかし Windows は対抗したのか Windows 10 の游ゴシックで細すぎ かすれて読みづらい というヒドイフォントを出してくれました
極端じゃなくてもうちょっと間のいい感じにしてもらいたいですね
あと 透明度の方はさらに 続く です