3点リーダー(…)や引用符(“、”)の表示のされ方を主要ブラウザで比べてみました(↑なんか下についてるの気になりますよね)。

和文と英文がサンセリフで表示され、3点リーダーは縦位置中央に、引用符は左右が異なる形になるのがとりあえずの理想です。

画像でかいので気をつけてね。

なるべく指定を少なくする方向で考えてみると、FireFoxとChromeは指定なし、Safariはヒラギノのみ指定、IEはMS Pゴシック(またはメイリオ)のみ指定、とするのが良さそうです。

これを実装するには……?
CSSハックだと面倒そうなので、CSSでは指定なしとしてでなるべく短く書いてみました。

1
(function(){var n=navigator,f=function(p,u,s){if(n.platform.indexOf(p)!=-1&&n.userAgent.indexOf(u)!=-1){document.write('<style type="text/css">body{font-family:'+s+';}</style>');}};f("Win","MSIE",'"MS Pゴシック"');f("Mac","Safari",'"Hiragino Kaku Gothic Pro"');})();

伝統的なfont-familyの指定は

1
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

こんなでしたが、必要な部分のみ指定する方がスマートですよね。

当然ながら全部bodyへの指定です。bodyに指定してるのにいくつかの要素で継承しないアレなブラウザがあったような気もしますが、今後の案件で実際に使えるか試してみたいと思います。