4

私のウェブサイトでは、Google ウェブ フォントのTitillium Webを使用しています。Google Chrome、IE、Opera、Safari では完全にレンダリングされますが、Firefox ではテキストがひどいものに見えます。

Google フォント リンク:

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>

HTML :

<p id="main-top-text" class="txt-style">WELCOME TO <span class="site-colour">NATHAN DA SILVA,</span></p>

<p id="main-bottom-text" class="txt-style">ENJOY YOUR STAY.</p>

CSS :

.txt-style {
    font-family: 'Titillium Web', sans-serif;
    font-size: 60px;    
    line-height: 70px;
    color: #666666;
    text-align: center;
}

ここでそれがどのように見えるかを見ることができます: http://www.nathandasilva.co.uk/v3

これを Firefox で見やすくするための修正を知っている人はいないのではないでしょうか?

4

6 に答える 6

2

font-weight を宣言すると役立つことがよくあります。

font-weight: 200;
于 2013-04-16T08:13:58.503 に答える
1

すべての Google Web フォント (特に Roboto) に問題があり、それを修正するには Direct2d アクセラレーションを強制的にオンにする必要があることがわかりました。グラフィック カードは Intel HD4000 です。

あなたまたは別の読者に関連する場合に備えて、私のために働いた解決策を投稿してください：

  1. about:config に移動します
  2. gfx.direct2d.force-enabled を見つける
  3. True に設定して Firefox を再起動します
于 2016-01-30T21:03:22.083 に答える
0

明らかに、Firefox はデフォルトでフォントを「クロスサイト」からブロックし、XSS 攻撃を防ぎます。

フォントがロードされているかどうかは Firebug で確認できます。これは、(HTML 要素を調べたときに) スタイル タブでフォントが「灰色」に表示されるためです。

また、Firefox のビルトイン開発者コンソール (メニュー > Web 開発者 > Web コンソール) をチェックして、フォントの読み込みエラーを探してください (Firebug はこれらを報告していないようです)。これは、問題がどこにあるかを特定するのに役立ちます。

この問題を解決するには、外部フォントを受け入れるようにサイトを構成できます。たとえば、次のようにします。

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

また、他のフォント (つまり、Google 以外のもの) については、サーバー上でフォントをホストできる場合は、それらを相対的に参照して問題を回避することもできます。例えば。：

@font-face { 
  font-family: 'museo_sans_100regular'; 
  src: url('/wp-content/uploads/museosans_100-webfont.eot'); 
  src: local('☺'), local('museo_sans_100regular'), 
    url('/wp-content/uploads/museosans_100-webfont.woff') format('woff'), 
    url('/wp-content/uploads/museosans_100-webfont.ttf') format('truetype'), 
    url('/wp-content/uploads/museosans-100-webfont.svg#museo_sans_100regular')     format('svg');
}
于 2014-01-22T00:30:41.597 に答える
0

最終的には問題ないようです。ブラウザのキャッシュをクリアしてから、もう一度試してください。

于 2013-04-16T08:13:57.947 に答える