2

GoogleWebフォントで奇妙な動作が発生しています。現在、スタイルシートを埋め込むのと同じように使用していますが、正常に機能しています。

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta' rel='stylesheet' type='text/css'>

しかし、この@ font-face値をcssファイルに使用すると、正しく機能しません。

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

これらのコードに何が起こっているのか、私は両方の上で同じように動作していると思います。アイデアの人はいますか？

ノート。また、このフォントをシステムにダウンロードしてサーバーからロードすることも計画しています。前もって感謝します。

4

3 に答える 3

6

IEでフォントを機能させるには、.eot拡張子が必要です。ここでジェネレーターを使用できますhttp://www.fontsquirrel.com/fontface/generator

于 2012-10-15T13:35:12.330 に答える
1

IEはWOFF形式を理解していません。したがって、Googleコードのように、さまざまなフォント形式を処理するCSSコードを使用する必要があります。最も簡単な方法は、Google Web Fontsサイトにアクセスして、そこからフォントパッケージをダウンロードすることです。さまざまな形式と、それらを使用するためのCSSコードが含まれています。

于 2012-10-15T14:07:30.730 に答える
1

あなたは正しい@Caeleaです。IEでフォントを機能させるには.eot拡張子を追加する必要があります。

最後に問題をさらに掘り下げて、私は解決策を得ました。以下のURLをIEのナビゲーションバーに貼り付けるだけです。

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta

次に、IE（ .eotファイルを使用）およびWebkitブラウザー用の関連するcssを入手しました。各フォントをダウンロードして、アプリケーションコードに保存しました。現在、現場で正常に機能しています

以下のコードを参照してください

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot);
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/orienta/v1/4h2F_2nQc3QO1h97-0ufEg.eot);
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/4h2F_2nQc3QO1h97-0ufEg.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

迅速な対応をありがとうございました。素晴らしいアイデアを共有してくれた@JukkaK.Korpelaに感謝します

編集

グーグルフォントeotを取得するために、私はIEでフォントのウェブサイトを閲覧したので、グーグルはそこにIEがサポートするフォントをロードしました:)。

于 2012-10-16T05:49:27.240 に答える