10

私はgoogle-webfontsを使用することと本当にひどい衝突をしています。OKここにコードがあります：

これは頭​​の中にあります：

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

そしてこれはcssファイルにあります：

body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }

「Oswald」は、3つのフォントのフォントファミリです。

  • 本（300）
  • 通常（400）
  • 太字（700）

ご覧のとおり、太字（700）のみをロードしました。（クエリで確認できます）そして、ここまで機能しますが…</ p>

問題は：

デスクトップバージョンの3つのフォント（300,400,700）がコンピューターにインストールされており、これらのフォントがアクティブになっている限り、ブラウザーのhtmlドキュメントに間違ったフォントの太さ（400）が表示されます。

わかった。問題は、私のcssでは「Oswald」がWebフォントではなくローカルフォントを使用することです。ただし、ローカルフォント「Oswald」は「Oswaldnormal」です。グーグルがそれを「オズワルドボールド」ではなく「オズワルド」と呼んでいる理由がわかりません。だから私はこの問題を解決する方法がわかりません。

cssがローカルフォントを指さないようにしたい..フォントの太さが適切であるため、常にWebフォントを表示したい！

あなたはなにか考えはありますか？お願いします？

webfont-callの名前を変更することは可能ですか？

4

1 に答える 1

13

@font-faceGoogleから自動生成されたルールをロードするだけでなく、ニーズに合わせてCSSルールを編集できます。基本的に問題は、彼らのルールがローカルバージョンを優先することです（src: local('Oswald Bold'), local('Oswald-Bold'), ...）。修正されたバージョンは次のようになります。

@font-face {
  font-family: 'WebOswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

これをCSSに手動で追加し、font-family: 'WebOswald';GoogleのWebバージョンのフォントを使用する場合に使用します。

お役に立てば幸いです。

于 2012-08-26T10:42:32.900 に答える