3

等幅フォントを使用した pre で、画面にいくつかの出力があります。Chrome と Firefox の両方の Mac で正しく表示されます。ただし、Windows では、モノスペースが失われます。

これが私のサイトの例です:

▥▥▥▥▥▥▥▥▥▥
▥♖.......▥
▥........▥
▥........▥
▥........▥
▥........▥
▥........▥
▥........▥
▥.......☆▥
▥▥▥▥▥▥▥▥▥▥

Windowsでも、各文字が同じ量のスペースを占めるように修正するにはどうすればよいですか?

ここにいくつかのテストテキストがあります:

0123456789
..........
▥▥▥▥▥▥▥▥▥▥

更新: Windows が ▥ などの特定の文字を表示する方法に問題があるようです。これを回避する方法はありますか?

4

2 に答える 2

2

Chrome の Computed Styles タブを見ると、問題の理由は、3 つの異なるフォント フェイスからグリフを取得していることです。

Courier New -- 72 Glyphs
Lucida Sans Unicode -- 36 Glyphs
Arial Unicode MS -- 2 glyphs

これらの各面のサイズは異なります。

可能な解決策

  • ボーダーグリフを CSS ボーダーに置き換える
  • 「空の」セルを、チェスの駒と同じ領域、おそらく U+3000 の「表意文字スペース」からのグリフに置き換えます。 
  • ul要素を表示するために flexboxのようなものを使用してください - プログラムで各要素を選択できるという利点があります!

幸運を

于 2014-05-19T12:52:09.317 に答える