2chのAAをOSに依存せず綺麗に表示するCSSの設定方法 (非Windows対策版)

(注) この記事の内容は古いです。ここに書かれている細かなテクニックは、ブラウザの実装の問題によるもので、今は治っています。昔はブラウザのバグで大変だったねという歴史と、細かなテクニックを覚えておくために残していますが、歴史はどうでもいいから AA をすぐに表示したい人は、こちらをどうぞ。

(以下保管用) 2chのAAをOSに依存せず綺麗に表示する方法を何回か記事にしたけど、直近1年でのブラウザの実装変化によって混沌としてしまったので、現時点で採用している方法を簡潔に書き直しました。過去の歴史を見たい人は以下を参考にして欲しい。

簡潔と言ったからには結論から書いてしまう。今使ってるCSSはこんな感じです。フォントは今まで通り、https://yamacraft.github.io/textar-font/ を利用している。

@font-face {
  font-family: 'Textar';
  font-style: normal;
  font-weight: normal;
  src: local('Textar'),
  url('/fonts/textar-min.woff') format('woff'),
  url('/fonts/textar-min.ttf') format('truetype'),
  url('/fonts/textar-min.svg') format('svg');
}

pre.aa {
  font-size: 1em;
  line-height: 1.1;
  font-family: '梅Pゴシック',Textar,sans-serif;
  white-space: pre;
  word-wrap: normal;
}
/* 今はもう以下の記述は不要です
   https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/
   https://jeffclayton.wordpress.com/2015/02/01/css-os-platform-specific-hacks/
   https://stackoverflow.com/questions/15190340/css-platform-specific-hacks
   http://browserhacks.com/
*/
/* IE8 */
@media \0screen {
  pre.aa { font-family: 'ＭＳ Ｐゴシック','MS PGothic','梅Pゴシック',Textar,sans-serif; }
}
/* IE9+ */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  pre.aa { font-family: 'ＭＳ Ｐゴシック','MS PGothic','梅Pゴシック',Textar,sans-serif; }
}
/* Edge */
@supports (-ms-ime-align:auto) {
  pre.aa { font-family: 'ＭＳ Ｐゴシック','MS PGothic','梅Pゴシック',Textar,sans-serif; }
}

ポイントは5つ。

CSSハックでLinuxにおけるＭＳＰゴシックの問題に対応する、JavaScriptでレンダリング処理するより高速だしJavaScriptを切っても動く
CSSハックはIE/Edgeの判定で対応するのが無難 (バージョンアップで機能しなくなった時の影響が小さい、表示が崩れる事がない)
@font-faceに条件を付けないと重そうだけど、PageSpeed Insightsには影響しない
それどころか最近のブラウザではフォント処理は最適化されていてデバッガに表示されない＝賢い処理をしてくれているからブラウザに任せたほうが良い
上記に伴ってスマホだけ読み込む判定処理も利点はなくなってきた (最初の1回の遅さを気にしなければ)

注意点も3つ書いておこう。 (1) @font-face に local('MS PGothic') を書いてはいけない。 LinuxにおけるＭＳＰゴシックの問題が生じる。 (2) CSSハックは不安定なものである事を忘れちゃ駄目。このCSSを利用する際は、CSSハックがブラウザのバージョンアップ後にも動く事を、バージョンアップのたびに確認して使って欲しい。 (3) IE/Edge以外でWindowsを判定するCSSはない (昔は部分的にならあったけど) ので、Chrome/FirefoxなどではTextarで表示するようになっている。これを不満と思えば以前示したようにJavaScriptで処理するか、フォント切り替えフォームを用意しよう。

上記3点にだけ注意すれば、AAの表示は上記のコードで今のところは万全と思う。 CSSの指定の意味とか、どのフォントが良いとか、フォントを切り替えられたほうがユーザビリティが良いかもとか、細かな点については過去の投稿を見て欲しい。

marmooo's blog

2019年1月4日金曜日

2chのAAをOSに依存せず綺麗に表示するCSSの設定方法 (非Windows対策版)

0 件のコメント: