web-dev-qa-db-ja.com

異なるブラウザー間で異なるフォントを使用するWebサイト

Webサイトwww.amsa.mnのナビゲーションボード項目は、Firefoxで表示されるときに間違ったフォントを使用します。 SafariまたはChromeでWebサイトにアクセスすると、正しいフォントがロードされます。 Firefoxに正しいフォントをロードさせる方法はありますか？

fontsdesignwebsite-design
4
Harry M

http://www.fontsquirrel.com/fontface/generator のようなコンバーターを使用して、「Arimo」フォントをWebフォントに変換する必要があります。 CSSはArimoフォントを参照します。フォントはCSSを介して利用できないため、ローカルにロードしようとしています。ほとんどの人はArimoをインストールしていないため、代わりにデフォルトのフォントが表示されます。

4
NickWebman

Firefoxをチェックするとうまく見えますが、すでに解決策を見つけていると思いますか？そうでない場合...

おそらく宣言の問題か、Firefoxが使用しているフォントの正しいファイルタイプがないことが原因です。

NickWebmanが答えたように、 fontsquirrel.com のような場所に移動し、font-faceセクションに移動して、目的のフォントを見つけてダウンロードするか、既存のフォントの1つを変換します。

コアブラウザは異なるファイルタイプ（.woff、.ttf、.svg、.eotなど）を好む傾向があるため、すべてのブラウザでフォントが表示されるように、すべての異なるファイルタイプを作成/ダウンロードしてください。

TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonts for Internet Explorer 4+
WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG fonts for iPad and iPhone

Internet Explorerの1つの解決策は、Internet Explorerを通常の宣言から分離することです。

<!-- specific for IE - .eot -->

@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/ProximaNova.eot?') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
<!-- for the other browsers - .woff, .ttf, .svg
@font-face {
    font-family: 'ProximaNova';
    src: local('☺'), url('../fonts/ProximaNova.woff') format('woff'),
    url('../fonts/ProximaNova.ttf') format('truetype'),
    url('../fonts/ProximaNova.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

または、 paulirish.com の防弾記事のおかげで、より良い解決策が得られます。

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

フォールバックを置くことを忘れないでください。 websafe fonts すべてがポップになった場合にフォールバックする.

font-family:'yourfontfacefont', Verdana, Tahoma, Arial, Sans-Serif;

上記のすべてのフォントがIEなどで正しく見えない場合でも、以下を追加してみてください。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
-webkit-font-smoothing:subpixel-antialiased;
font-smoothing:subpixel-antialiased;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
letter-spacing:0;
line-height:1;
zoom:1;
1
DBUK

このようにサイトで使用したいフォントをロードできます

@font-face { font-family: Some-Font; src: url('Some-Font.otf'); } @font-face { font-family: Some-Font; font-weight: bold; src: url('Some-Font-Bold.otf'); }

次に、それらを適用します

h3 { font-family: Some-Font, sans-serif; }

これにより、すべてのブラウザで強制されます

@ font-faceに関する良い記事はこちら http://www.miltonbayer.com/font-face/

0
Anagio