解決の報告、ありがとうございます。
しおぱん さんが書きました:
Firefoxの環境設定→「コンテンツ」→「フォントとカラー」→「詳細設定」→「Web ページが指定したフォントを優先する」のチェックを外し、自分でボールドファミリーが存在するフォントを指定したら直りました。
私の考えでは
1 問題が発生するホームページが指定しているフォントにはボールドファミリーが存在しない
2 画面上では気が付かないが高解像度出力(印刷)した場合に気が付く
ではないでしょうか。
たしかに、単一の書体しか持っていないフォントに比べれば、ボールドやイタリックの書体をファミリーとして持っているフォントは、スタイル指定に対して高品質な表示が期待できます。
例として挙げられている Yahoo! JAPAN トップページは、body のフォントファミリーが次のように指定されています。
font-family:"MS PGothic", Arial, "Hiragino Kaku Gothic ProN", "Osaka", sans-serif;
Firefox のフォント設定で [Web ページが指定したフォントを優先する] が有効(チェック付)になっていると、この中からユーザー環境にあるものが使われ、「ウェブ」や「ニュース」はそのフォントでの表示を前提にしつつ、別に指定されている font-weight: bold; が適用されます。
当方の Windows 7 / 8 環境にある Firefox 42.0 では、優先順位として MS PGothic が適用されます。
MS PGothic は 標準書体しかなく、太字(ボールド)指定は文字を重ね合わせて太らせる処理がおこなわれますが、「ウェブ」や「ニュース」など font-weight: bold; が指定された文字でも「二重にズレる」現象は確認できません。もちろん、プリントにおいても同様です。
[Web ページが指定したフォントを優先する] のチェックを外し(無効化)、太字(ボールド)書体を持たない他のフォント(例:IPA P ゴシックその他)を意識的に指定して表示させてみましたが、やはり「二重にズレる」現象は確認できませんでした。
ボールド書体を持っているフォントの表示品質が高いのは当然として、スタイルの太字(ボールド)指定を強制的な太字化処理で対応している場合でも、表示品質以前に「二重にズレる」という不正常な表示になってしまうのは、やはり問題があると思います。
印刷の場合も、印字品質は低くなるにしても、太字(ボールド)指定された文字が、太字ではなく「二重にズレる」というのは、指定された結果を出せていないという点で、正常とは言い難いのではないでしょうか。
もし、ボールド書体をファミリーに有するフォントでなければ、本質的にスタイルの太字(ボールド)指定は使えない ―― ということになれば、もっとあちこちで問題視されているように思います。
が、そういう事情をふまえた上でなお、しおぱん さんがご報告くださった方法は、有効な回避策になると思います。
同時に、ボールドファミリーを持たない単一書体のフォントであっても、低品質なりに font-weight: bold; を反映させなければならないのに、「二重にズレる」現象が起こっているという問題は残ったままです。
Mac 環境でのみ起こる問題なのか、そうだとして Mac 環境では必ず発生するのか、それともこの問題が起こらないMac 環境もあるのか、さらに Windows その他の環境下でも起こりうるのか、そのあたりもハッキリしていません。
Firefox では「太字が二重にズレる」Web ページを、他のブラウザで表示(あるいはプリント)したときは問題の太字部分がどのようになるのかは、最初の質問者が(プリントに関して?)「Safariでは再現しません」と簡単に書いているだけで、他の情報はありません。
こういう何かモヤモヤした感じは残りますが、回避方法がひとつわかっただけでも進展はあったと思います。ありがとうございました。
(余談)
Firefox のフォント設定で、[Web ページが指定したフォントを優先する] のチェックを外す(無効化する)と、最近増えている Web フォントで指定された要素が適切に表示されないケースが出てきます。
一般的な傾向として、海外のサイト(主に欧文)では Web フォントの利用が増えています。
日本語サイトでは、日本語 Web フォントの使用はあまり見かけません。文字種が多く負荷がかかる場面があるからだと思います。しかし、アルファベットや記号類は日本語サイトでもしばしば利用されています。
例えば、Google が公開しているフォントに関する次のようなサイトがあります。
・Google Fonts
https://www.google.com/fonts/このページを、[Web ページが指定したフォントを優先する] の有効・無効を切り替えて眺めてみてください。多様な書体のフォントがどのように表示されるかを体感できると思います。
結局、[Web ページが指定したフォントを優先する] を無効にしていると、多様な種類の Web フォント書体の区別や、Web フォントで Normal / Bold が切り替えられたような指定に対しては対応できず、ユーザー側で指定したフォントで一律に表示されることがわかります。