FirefoxでMetro bootstrapを表示すると、フォントは本来のように見えますが、ChromeではデフォルトでHelveticaと想定されます。問題は、Firefoxに表示される「ナイス」フォントの場所がわからないことです。
フォントの名前はSegoe UIですが、Bootstrapパッケージにはその名前のフォントファイルはなく、@font-face
宣言で参照されておらず、SiFRまたはCufonもありません。 Firefoxがそれを表示する方法を知っている理由がわかりません。
Segoe UIはFirefoxにバンドルされていますか?この問題を解決する方法がわかりませんが、もっと簡単な解決策があれば、Font Squirrelを介してまったく新しい@font-face
宣言を追加するのはやり過ぎでしょうか?
以下の画像では、左側がFirefoxによるページのレンダリング方法、右側がChromeによるレンダリング方法です。
いいえ、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フォントをインストールしません。
私は問題のWindowsフォントに精通していませんが、この問題はさまざまなブラウザーがフォント名を検索する方法が原因である可能性があります。 WebKitは、一致するフォントのPostScript名を最初にチェックしてfont-family
名を検索します。したがって、たとえばfont-family: "UniverseLT330", "UniversLT", "Univers", san-serif;
がある場合、WebKitは、faceではなくfamily。 Mozillaは姓の一致のみを検索するため、使用可能な場合は「Univers」に一致し、そうでない場合はsans-serif
に一致します。 Chromeが拾い上げてFirefoxが見つからないというSegoe UIの前に異なるフォント名を持っている可能性がありますか?ただし、CSSを確認せずに、暗闇でちょっと突き刺します。