8

これは一般的な問題であり、解決策があるようです。問題は、Web フォントが chrome で途切れ途切れになることです。解決策は、.svg 呼び出しを .woff 呼び出しの前に移動することです。ここで説明: http://www.fontspring.com/blog/smoother-web-font-rendering-chromeおよびここ: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

問題は、Google Web フォントを使用していて、次のようにフォントをインポートしていることです。

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

@font-faceそして、上記の代わりにcssタグを使用してインポートする方法がわかりません。試してみましたが、Google は ttf のフォントのみを提供し、svg や woff は提供していないため、行き詰まりました。

お役に立てれば幸いです。

4

3 に答える 3

2

この修正を適用する場合は、フォントを自分でホストする必要があります。

Google Fonts リンクはスタイルシートのリクエストであり、指定したパラメータとブラウザの検出に基づいて動的に構築されます。リンクの例:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

実際に自分でリクエストを行う場合curl:

$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic

これが送り返されるものです：

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 400;
  src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 700;
  src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

最も簡単な方法は、Google Web Fonts に戻り、ここに移動してダウンロード矢印をクリックして、問題のフォントをダウンロードすることです。

次に、ダウンロードしたフォント ファイルを参照して、ここから提案された修正を使用できます。

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘webfont.svg#svgFontName’) format(‘svg’),
    url(‘webfont.woff’) format(‘woff’),
    url(‘webfont.ttf’)  format(‘truetype’);
}
于 2013-05-16T21:38:50.427 に答える
0

すべてのスタイルを適切にリセットしましたか?

一貫性のないレンダリング エクスペリエンスは、ブラウザのデフォルトが原因である可能性があります。

reset.css は、すべての要素をデフォルト値に戻します。これにより、ブラウザ間の不一致が減少します。reset.css には多くの例がありますが、最も人気のあるものの 1 つはmeyerweb reset cssです。不整合を減らすもう 1 つの方法は、normalize.css を使用することです。

要するに、2 つのアプローチの違いは、reset.css はすべてのブラウザー固有のスタイルをリセットするだけであるのに対し、normalize.css はクロスブラウザーの既定値を作成することによってより広い範囲を持っていることです。

両者の違いについては、normalize.css の開発者がここで説明しています。

これらすべてのリンクが役に立たない場合は、font-weight を常に正しく設定し、必要なすべての font-weight をインポートするようにしてください。

ここでフォントの太さについて読むことができます: http://css-tricks.com/watch-your-font-weight/ また、normalize.ccs を使用するときにもこの手法を適用する必要があります。 .css です。

于 2013-08-01T21:22:03.823 に答える
-1

これを各要素のスタイルシートに追加します。

opacity: .99;

例えば ​​-

p, li { 
  opacity: .99; 
}

なぜこれが機能するのかわかりませんが、機能しました。

于 2014-01-02T18:42:30.430 に答える