web-dev-qa-db-ja.com

IEでGoogle Fontsを機能させる方法は？

Google Fonts API を使用するサイトを開発しています。それは素晴らしいもので、おそらくIEでテストされていますが、IE 8でテストする場合、フォントのスタイルは設定されません。

Google instructs のようにフォントを含めました。したがって、

<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.理由は誰にもわかりませんか？

cssinternet-explorerwebfontsgoogle-webfonts
66
Isaac Lubow

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

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

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

53
Yi Jiang

IE8-IE7はlinkタグhrefを使用して同じファイルリクエストで複数のGoogle Web Fontスタイルを理解できないようです。

これらの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]-->

これが他の人に役立つことを願っています！

66
Jonathan Marzullo

Google FontsはWeb Open Font Format（WOFF）を使用していますが、これはW3Cが推奨するフォント形式であるため、優れています。

IE9よりも古いバージョンのIEは、Web Open Font Format（WOFF）をサポートしていません。これは、当時存在していなかったためです。 <IE9をサポートするには、Embedded Open Type（EOT）でフォントを提供する必要があります。これを行うには、Googleの埋め込みスクリプトを使用する代わりに、独自の@ font-face cssタグを記述する必要があります。また、元のWOFFファイルをEOTに変換する必要があります。

ここでWOFFをEOTに変換するには、まずTTFに変換してからEOTに変換します。 http://convertfonts.com/

次に、次のようにEOTフォントを提供できます。

@font-face {
    font-family: 'MyFont';
    src: url('myfont.eot');
}

現在、<IE9で動作します。ただし、最新のブラウザではEOTがサポートされなくなったため、最新のブラウザではフォントが機能しなくなりました。したがって、両方を指定する必要があります。 srcプロパティは、フォントのURLをコンマで区切り、タイプを指定することでこれをサポートします。

src: url('myfont.woff') format('woff'),
     url('myfont.eot') format('embedded-opentype');

ただし、<IE9はこれを理解せず、最初の引用と最後の引用の間のテキストを取得するだけなので、実際には次のようになります。

myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype

フォントのURLとして。これを修正するには、まずEOT形式であるurlを1つだけ使用してsrcを指定し、次に最新のブラウザー向けの2番目のsrcプロパティを指定しますが、<IE9は理解できません。 <IE9は理解できないため、タグを無視し、EOTは引き続き機能します。最新のブラウザでは、サポートされている最後に指定されたフォントが使用されるため、おそらくWOFFが使用されます。

src: url('myfont.eot');
src: url('myfont.woff') format('woff');

したがって、2番目のsrcプロパティでformat('woff')を指定するため、<IE9はそれを理解せず（または実際にはURL myfont.woff') format('woffでフォントを見つけることができません）、最初に指定されたもの（eot）を使用し続けます。

これで、<IE9および最新のブラウザーでGoogle Webfontが機能するようになりました！

さまざまなフォントタイプとブラウザサポートの詳細については、Alex Tatiyantsによるこの完璧な記事を参照してください。 http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web -fonts /

15
gitaarik

Yi Jiangのソリューションは機能するかもしれませんが、Google Web Font APIを放棄することは正しい答えではないと思います。ローカルjQueryファイルは、CDNから適切にロードされていない場合に提供されますか？

<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 Generatorがこのファイルを作成します。

    @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条件クラスを使用して faux weights and styles を回避すると、フォントスタイルは次のようになります。

    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にこれを期待するようになりませんか？それに、しばらくすると第二の自然になります。

7
Matt

その価値については、IE7/8/9で動作させることができず、複数宣言オプションは何の違いも生じませんでした。

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

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

IE7/8/9で動作します。

4
Adam

上記のすべてのオプションを試しましたが、機能しませんでした。次に、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]-->

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

2
PhotoAlbert

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

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

しかし、私はここで外国語のフォントを使用しており、IE11でのみ動作しませんでした。私はこの解決策を見つけました：

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

誰かの貴重な時間を節約できることを願っています

1
amitgur

Fontsforweb.comは、すべてのブラウザでフォントが機能している場所で試すことができます。これは、フォントがTTF、WOFF、およびEOT形式で提供されているため、CSSコードがページに貼り付けられる状態になっているためです。

@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/

1
Pawel

あなたにも同じ問題がありました。 Internet Explorer、Chrome、Firefox、およびSafariで完璧に機能する、Adobe Web Fontsコードを使用したソリューションを見つけました。

このページの詳細： http://html.Adobe.com/Edge/webfonts/

0
Thyago Quintas

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

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>
0
sam

私の調査の後、私はこの解決策に到達しました：

//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');

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

0
Reza Mamun