2chのAAをOSに依存せず綺麗に表示するCSSの設定方法

2ch の AA のフォントについてなぜかアクセスがあるので、私のサイトを見て混乱される方がいても困るので、書き直しておきます。これまで以下のような記事を書いていますが、どれもブラウザの実装がバグりまくっていたことによって起きた話です。将来バグった時の処方箋として残してますが、現状はバグが治っており気にしないで良いです。

今では決定版とも言える書き方があります。小細工も必要ありません。

@font-face {
  font-family: 'Textar';
  font-style: normal;
  font-weight: normal;
  src: local('Textar'),
  url('https://marmooo.github.io/fonts/textar-light.woff2') format('woff2'),
  url('https://marmooo.github.io/fonts/textar-light.woff') format('woff'),
  url('https://marmooo.github.io/fonts/textar-light.ttf') format('ttf');
}

pre.aa, textarea.aa {
  font-size: 1em;
  line-height: 1.1;
  font-family: 'ＭＳ Ｐゴシック','MS PGothic','梅Pゴシック',Textar,sans-serif;
  white-space: pre;
  word-wrap: normal;
}

梅Pゴシックは私の趣味で、Linux な人に対応しています。最低限度で良いなら、Windows でフォントが不要な人のための MS PGothic と、Linux/Mac/スマホで必要な人のための Web フォント、そして sans-serif を指定しておけば良いです。今回は Web フォントの指定例として textar-light を使っています。

AA 表示用のフォントはたくさんありますが、今やフォントを手動でインストールする人はいないでしょう。よってスマホ等でも AA を見るために Web フォントが必要になります。 AA Hub Fonts で 10 種類ほど配布されているので、ここから好みで選んでも良いでしょう。 Web フォントは結構重たいので、漢字グリフを削除して軽量化した aahub_light は結構おすすめではあります。ただ拡大するとギザギザになるので用途によっては適しません。

そこで Textar フォントから漢字グリフを削除した textar-light というフォントを私も配布しています。興味のある方はこれを利用してみると良いかと思います。

marmooo's blog

2020年8月23日日曜日

2chのAAをOSに依存せず綺麗に表示するCSSの設定方法

0 件のコメント: