Wie Google Fonts Arbeit in IE machen?

https://stackoverflow.com/questions/3694060

02-10-2019
|

Frage

Ich habe eine Website entwickelt, die die Google Fonts API . Es ist toll, und angeblich in IE getestet wurde, aber wenn in IE 8 die Schriften einfach testen nicht bekommen gestylt.

enthalten ich die Schrift, wie Google instruiert , also:

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

und fügte seinen Namen des vor einer Schriftfamilie in CSS so:

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

Funktioniert wie ein Zauber in Chrome, Firefox, Safari. Keine Würfel in IE 8. Jeder weiß, warum?

Lösung

Das Verfahren, wie es durch ihre technischen Überlegungen Seite ist richtig - so sind Sie auf jeden Fall nichts falsch machen. Allerdings dieser Bug-Report auf Google Code zeigt, dass es eine Problem mit den Schriftarten Google für diese produziert, speziell die IE-Version. Dies scheint nur nur einige Schriftarten zu beeinflussen, aber es ist eine echte bummmer.

Die Antworten auf den Faden zeigen an, dass das Problem liegt mit den Dateien von Google serviert, so gibt es nichts, was man dagegen tun kann. Der Autor empfiehlt, immer die Schriften von alternativen Standorten, wie zB FontSquirrel , und es lokal statt dient, in welchem ??Fall Sie könnte auch in Seiten wie die Liga der Movable Type interessiert sein.

N. B. Ab Oktober 2010 wird das Thema auf dem Google Code Fehlerbericht als festes und geschlossen gemeldet.

Andere Tipps

Sieht aus wie IE8-IE7 kann mehr Google Web Schriftstile durch die gleiche Dateianfrag mit dem link Tags href nicht verstehen.

Diese beiden Verbindungen haben mir geholfen, dies heraus:

Sehen Sie diese offen Google Ausgabe und Blick auf die Kommentare.
Sehen Sie auch diese StackOverlow Antwort Google Web Fonts funktionieren nicht in IE8

Die einzige Art, wie ich es an die Arbeit in IE7-IE8 bekommen haben, ist nur ein Google Web Font Anfrage müssen. Und nur eine Schriftstil hat im href des link Tages:

Also normalerweise würden Sie dies haben, mehrere Schriftarten in der gleichen Anfrage erklärt:

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

Aber in IE7-IE8 fügen Sie ein IE bedingten und geben Sie jeden Google Schriftstil getrennt und es wird funktionieren:

<!--[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]-->

Hope Dies kann helfen, andere!

Google Fonts verwendet Web Open Font Format (WOFF), was gut ist, weil es das empfohlene Schriftformat des W3C ist.

IE-Versionen älter als IE9 nicht unterstützt Web Open Font Format (WOFF), weil es dann nicht wieder vorhanden war. Zur Unterstützung

Sie können Ihre WOFF zu EOT konvertieren hier über, indem sie zuerst zu TTF konvertieren und dann zu EOT: http://convertfonts.com/

Dann können Sie die EOT-Fonts wie diese dienen:

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

Jetzt funktioniert es in

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

Doch

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

als URL an die Schriftart. Wir können dieses Problem beheben, indem zunächst ein src mit nur einer URL angeben, die das EOT-Format ist, dann eine zweite Eigenschaft src angeben, die für die modernen Browser gemeint sind und

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

Also nur weil in der zweiten src Eigenschaft Sie die format('woff') angeben, myfont.woff') format('woff finden) und den ersten spezifizierte (EOT) hält mit .

So, jetzt Sie haben Ihre Google Webfonts arbeitet für

Weitere Informationen über die verschiedenen Schrifttyp und Browser-Unterstützung, lesen Sie diesen perfekten Artikel von Alex Tatiyants: http://tatiyants.com/ how-to-get-IE8-to-Support-html5-Tags-and-Web-Fonts /

Während Yi Jiang Lösung arbeiten kann, glaube ich nicht, das Google Web Font API verlassen wird, um die richtige Antwort hier. Wir servieren Ihnen eine lokale jQuery-Datei, wenn es nicht richtig aus dem CDN geladen wird, nicht wahr?

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

Also warum sollten wir das gleiche für die Schriften nicht tun, die speziell für

<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]-->

Hier ist mein Prozess, wenn benutzerdefinierte Schriftarten verwenden:

Laden Sie die ZIP-Datei der Schriftart von Google, und verwenden Sie Font Eichhörnchen @ Font-face Generator die lokale Web-Schriftart zu erstellen.

Erstellen Sie eine fonts.css-Datei, die die neu erstellten, lokal gehostete Font-Dateien aufruft (nur auf die Datei verknüpfen, wenn

@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;
}

Mit IE bedingten Klassen in der Hauptsheet avoide faux Gewichte und Stile , sehen aus wie Ihre Schriftstile könnten diese:

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,
}

Sicher, es ist ein wenig mehr Arbeit, aber nicht wir kommen diese von IE erwarten? Außerdem wird es zur zweiten Natur nach einer Weile.

Für das, was ihren Wert, konnte ich es auf IE7 / 8/9 und die mehrfache Erklärung Option nicht bekommen Arbeit keinen Unterschied machen.

Die Fehlerbehebung für mich war, als Folge der Anweisungen auf der Technische Überlegungen Seite , wo es hebt ...

Für die beste Anzeige in IE, machen das Stylesheet ‚link‘ Tag der erste Element im HTML 'Kopf' Abschnitt.

Arbeiten über IE7 / 8/9 für mich jetzt.

Ich habe versucht, alle Optionen von oben und sie funktionierte nicht. Dann befinde ich die Google-Schrift (Over the Rainbow) in meinem Ordner (neu) und verwendete IE bedingte unten und es funktionierte perfekt.

<!--[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]-->

Ich hoffe, es wird helfen,

Sie können versuchen, fontsforweb.com wo Schriftarten für alle Browser arbeiten, weil sie in TTF vorgesehen sind, WOFF und EOT-Formate zusammen mit CSS-Code auf Ihrer Seite d.h eingefügt werden.

@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";
}

oder Sie können laden Sie sie in einem Paket mit CSS-Datei gezippt angebracht

dann fügen Sie einfach Klasse jedes Element, das Schrift heißt anzuwenden.

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

Sehen Sie es arbeiten: http://jsfiddle.net/SD4MP/

Es geht um all diese Antworten versuchen, für mich, nichts außer der nächsten Lösung funktioniert: Google Schrift vorgeschlagen

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

Aber, ich bin hier Fremdsprachen Schriftarten verwenden, und es hat nicht nur die Arbeit an IE11. Ich fand diese Lösung aus, die funktioniert:

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

Hoffnung, dass jemand spart wertvolle Zeit

Versuchen Sie, diese Art von Link, wird es in auch IE laufen. hoffe das hilft .

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

Ich hatte das gleiche Problem mit Ihnen. Ich fand eine Lösung, die eine Adobe Web Fonts Code, Arbeit perfekt in Internet Explorer, Chrome, Firefox und Safari verwendet wird.

Weitere Informationen in dieser Seite: http://html.adobe.com/edge/webfonts/

Nach meiner Untersuchung kam ich zu dieser Lösung:

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

beachten müssen: Wir müssen müssen die font-weight richtig dieser Schrift schreiben. Zum Beispiel: font-weight:900; wird nicht funktionieren , wie wir 900 wie 200,300,400,600,700,800 in die URL-Adresse nicht aufgenommen haben, während sie von Google mit dem obigen Link zu importieren. Wir können hinzufügen oder schließen 900 auf die oben genannte URL, aber das wird Arbeit nur, wenn die oben Google Font während das Einbetten dieser Option hat

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow