web-dev-qa-db-ja.com

Metro BootstrapのGoogle ChromeでSegoe UIフォントが機能しないのはなぜですか?

FirefoxでMetro bootstrapを表示すると、フォントは本来のように見えますが、ChromeではデフォルトでHelveticaと想定されます。問題は、Firefoxに表示される「ナイス」フォントの場所がわからないことです。

フォントの名前はSegoe UIですが、Bootstrapパッケージにはその名前のフォントファイルはなく、@font-face宣言で参照されておらず、SiFRまたはCufonもありません。 Firefoxがそれを表示する方法を知っている理由がわかりません。

Segoe UIはFirefoxにバンドルされていますか?この問題を解決する方法がわかりませんが、もっと簡単な解決策があれば、Font Squirrelを介してまったく新しい@font-face宣言を追加するのはやり過ぎでしょうか?

以下の画像では、左側がFirefoxによるページのレンダリング方法、右側がChromeによるレンダリング方法です。

Metro bootstrap font comparison between Chrome and Firefox

1
3Nex

いいえ、Segoe UIはFirefoxにバンドルされていません。

Segoe UIは、Windows VistaおよびMicrosoft Office 2007以降のWindowsのインターフェイス要素のデフォルトです。したがって、Segoe UIおよびその他のSegoeバリアントは、Office 2007以降またはWindows Vista以降をインストールすることで取得できます。

詳細についてはこちらをご覧ください。

したがって、Windows XPまたはWindows以外のOSを実行しているマシンには、このフォントがインストールされていない場合があります。 Metro bootstrap CSSを見ると、「Helvetica Neue」にフォールバックするはずです。これは、ほとんどのMacにインストールされているフォントです。

Segoe UIバリアントまたはHelvetia NeueのいずれもブラウザのデフォルトのSans-serifフォントにフォールバックしない場合。皮肉なことに、これはSegoe UIのようです(少なくとも、私のマシンでは)。

これもSegoeでページをレンダリングしないため、chromeを実行しているシステムにSegoeフォントが含まれていないと仮定します。

私が知る限り、Word for MacはSegoeフォントをインストールしません。

3
Amy

私は問題のWindowsフォントに精通していませんが、この問題はさまざまなブラウザーがフォント名を検索する方法が原因である可能性があります。 WebKitは、一致するフォントのPostScript名を最初にチェックしてfont-family名を検索します。したがって、たとえばfont-family: "UniverseLT330", "UniversLT", "Univers", san-serif;がある場合、WebKitは、faceではなくfamily。 Mozillaは姓の一致のみを検索するため、使用可能な場合は「Univers」に一致し、そうでない場合はsans-serifに一致します。 Chromeが拾い上げてFirefoxが見つからないというSegoe UIの前に異なるフォント名を持っている可能性がありますか?ただし、CSSを確認せずに、暗闇でちょっと突き刺します。

0
Nicholas Shanks