68

Google Fonts APIを使用するサイトを開発しています。IE でテストされていると思われますが、IE 8 でテストすると、フォントのスタイルが設定されません。

Googleが指示するように、フォントを含めました。

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"  
 rel="stylesheet" type="text/css" />

そしてその名前を CSS のフォントファミリーの前に追加しました:

body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}

Chrome、Firefox、Safari で魅力的に動作します。IE 8 にはサイコロがありません。理由を知っている人はいますか?

4

11 に答える 11

66

タグを使用した同じファイル リクエストでは、IE8 ～ IE7 が複数の Google Web フォント スタイルを認識できないようです。linkhref

これらの2つのリンクは、これを理解するのに役立ちました:

IE7-IE8 で動作させる唯一の方法は、Google Web Font リクエストを 1 つだけにすることです。そしてhref、linkタグの に 1 つのフォント スタイルのみを含めます。

したがって、通常、同じリクエストで複数のフォント スタイルを宣言すると、次のようになります。

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />

ただし、IE7-IE8 では IE 条件を追加し、各 Google フォント スタイルを個別に指定すると機能します。

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->

これが他の人を助けることを願っています!

于 2012-06-04T18:03:49.827 に答える
53

技術的な考慮事項のページで示されているように、この方法は正しいので、間違ったことをしていないことは間違いありません. ただし、 Google Code に関するこのバグ レポートは、Google がこのために作成したフォント、特に IE バージョンに問題があることを示しています。これは一部のフォントにのみ影響するように見えますが、これは非常に残念です。

スレッドの回答は、問題が Google が提供するファイルにあることを示しているため、それに対してできることは何もありません。著者は、 FontSquirrelなどの別の場所からフォントを取得し、代わりにローカルで提供することを提案しています。その場合、League of Movable Type などのサイトにも興味があるかもしれません。

注: 2010 年 10 月の時点で、この問題は修正済みとして報告され、Google Code バグ レポートでクローズされています。

于 2010-09-12T08:12:03.883 に答える
7

Yi Jiang の解決策は機能するかもしれませんが、ここで Google Web Font API を放棄することが正しい答えだとは思いません。CDN から適切にロードされていない場合、ローカルの jQuery ファイルを提供しますよね?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>

では、フォント、特に < IE9 についても同じことをしないのはなぜでしょうか?

<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->

カスタムフォントを使用するときの私のプロセスは次のとおりです。

  1. Google からフォントの ZIP フォルダーをダウンロードし、Font Squirrel の @font-face Generatorを使用してローカル Web フォントを作成します。

  2. fonts.css新しく作成された、ローカルでホストされているフォント ファイルを呼び出すファイルを作成します (上記のように、IE9 未満の場合にのみファイルにリンクします) 。注: @font-face ジェネレーターがこのファイルを作成します。

    @font-face {
  font-family: 'cardoitalic';
  src: url('cardo-italic-webfont.eot');
  src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('cardo-italic-webfont.woff') format('woff'),
    url('cardo-italic-webfont.ttf') format('truetype'),
    url('cardo-italic-webfont.svg#cardoitalic') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cardobold';
  src: url('cardo-bold-webfont.eot');
  src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('cardo-bold-webfont.woff') format('woff'),
    url('cardo-bold-webfont.ttf') format('truetype'),
    url('cardo-bold-webfont.svg#cardobold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cardoregular';
  src: url('cardo-regular-webfont.eot');
  src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('cardo-regular-webfont.woff') format('woff'),
     url('cardo-regular-webfont.ttf') format('truetype'),
     url('cardo-regular-webfont.svg#cardoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

  3. メイン スタイルシートで IE 条件付きクラスを使用して偽の太さとスタイルを回避すると、フォント スタイルは次のようになります。

    h1{
  font-size:3.25em;
  font-weight:normal;
  font-style:italic;
  font-family:'Cardo','cardoitalic',serif;
  line-height:1.25em;
}
h2{
  font-size:2.75em;
  font-weight:700;
  font-family:'Cardo','cardobold',serif;
  line-height:1.25em;
}
strong
,b{
  font-family:'Cardo','cardobold',serif;
  font-weight:700,
}
.lt-ie9 h1{
  font-style:normal;
}
.lt-ie9 h2{
  font-weight:normal;
}
.lt-ie9 strong,
.lt-ie9 b{
  font-weight:normal,
}

確かに少し余分な作業ですが、これは IE に期待されることではないでしょうか? その上、しばらくすると第二の性質になります。

于 2013-01-31T16:42:31.850 に答える
4

何の価値があるのか​​というと、IE7/8/9 で動作させることができず、複数の宣言オプションを使用しても何の違いもありませんでした。

私にとっての修正は、強調表示されている技術的考慮事項ページの指示の結果でした...

IE で最適に表示するには、スタイルシートの「link」タグを HTML の「head」セクションの最初の要素にします。

現在、IE7/8/9 で動作します。

于 2012-08-19T13:50:30.443 に答える
2

上記のすべてのオプションを試しましたが、うまくいきませんでした。次に、Google フォント (Over the Rainbow) をフォルダー (新規) に配置し、以下の条件付き IE を使用したところ、完璧に機能しました。

<!--[if IE]>
<style type="text/css">
    @font-face {
    font-family: "Over the Rainbow";
    src: url("../new/over.ttf");
    src: local("Over the Rainbow"), url("../new/over.ttf");
    }
</style>
<![endif]-->

それが役立つことを願っています

于 2012-08-29T14:44:20.233 に答える
1

これらすべての答えを試すことがすべてです。私にとっては、次の解決策以外は何も機能しません: Google フォントが提案されました

@import 'https://fonts.googleapis.com/css?family=Assistant';

しかし、ここでは外国語のフォントを使用しており、IE11 でのみ動作しませんでした。この解決策が機能することがわかりました：

@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';

誰かの貴重な時間を節約したい

于 2016-09-10T15:07:58.153 に答える
1

フォントは TTF、WOFF、および EOT 形式で提供され、ページに貼り付ける準備ができている CSS コードがあるため、すべてのブラウザーでフォントが機能する fontsforweb.com を試すことができます。

@font-face{ 
    font-family: "gothambold1";
    src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot');
    src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype");
}
.fontsforweb_fontid_5903 {
    font-family: "gothambold1";
}

または、CSS ファイルが添付されたパッケージに圧縮されてダウンロードできます

次に、クラスを任意の要素に追加して、そのフォントを適用します。

<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2>

動作を確認してください: http://jsfiddle.net/SD4MP/

于 2011-07-08T15:10:42.823 に答える
0

このタイプのリンクを試してください。IEでも実行されます。お役に立てれば 。

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>
于 2012-09-18T19:56:10.213 に答える
0

私はあなたと同じ問題を抱えていました。私はAdobeWebFontsコードを使用して解決策を見つけました。これは、Internet Explorer、Chrome、Firefox、およびSafariで完全に機能します。

このページの詳細：http：//html.adobe.com/edge/webfonts/

于 2012-09-25T16:50:18.523 に答える
0

調査の結果、次の解決策にたどり着きました。

//writing the below line into the top of my style.css file
@import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew');

遵守する必要があります:font-weightこのフォントを正しく 記述する必要があります。例:上記のリンクを使用して Google からインポートする際に、URL アドレスにlikeが含まれていないため、font-weight:900; 機能しません。上記の URL に追加または含めることができますが、埋め込み時に上記のGoogle フォントにこのオプションがある場合にのみ機能します。900200,300,400,600,700,800900

于 2018-09-14T21:03:56.803 に答える