この修正プログラムを適用する場合は、フォントを自分でホストする必要があります。
あなたのGoogleフォントリンクは、あなたが提供するパラメータとブラウザの検出に基づいて動的に構築されるスタイルシートのリクエストです。
<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フォントに戻り、hereに行き、ダウンロード矢印をクリックして問題のフォントをダウンロードしてください。
次に、あなたがダウンロードしたフォントファイルを参照し、suggested fix from hereを使用することができます。
@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’);
}
お返事ありがとうございます！ 私はしばらくそれを弄っていて、「ほとんど」働いています。問題は、新しい自己ホストフォントメソッドでは、すべてのブラウザが元のGoogleスタイルシートリクエストリンクとは異なるフォントをレンダリングしているようです。 FirefoxとIEはそれをもう少し大きく太って太らせるし、Chromeはそれを少し良くしているように見えるが、あまり正しくない。 下記の画像例を参照してください。 ！http：//www.gadaffi.dk/example.jpg ：/ – Farsen
私が言及したように、GoogleのWebフォントはブラウザを検出に使用しているため、要求を行っているユーザーのブラウザに合わせて若干異なるものが返されます。これには完璧な解決策はありません。私のアドバイスは、一般的に、ピクセル完全一致クロスブラウザを目指すことを止めることです - それはそのように動作するはずです。 –
これはWindows/Chromeの問題で、DirectWriteの問題をブラウザで修正するか、上記のようにフォントのgoogle apisでsvgの順序を修正することができるためです。いずれにしても、窓8 +クロムのウッドチッパーを通過したようです。 – Mark