Come rendere Google Fonts lavoro in IE?

https://stackoverflow.com/questions/3694060

02-10-2019
|

Domanda

ho sviluppato un sito che utilizza il di Google Font API . E 'grande, e presumibilmente è stato testato in IE, ma quando si verifica in IE 8 caratteri semplicemente non ottenere stile.

ho inserito il tipo di carattere, come Google istruisce , in tal modo:

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

e ha aggiunto il suo nome alla parte anteriore di una famiglia di font in CSS in tal modo:

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

Funziona come un fascino in Chrome, Firefox, Safari. Non ci sono dadi in IE 8. conosco nessuno perché?

Soluzione

Il metodo, come indicato dalla pagina considerazioni tecniche , è corretto - così si sta sicuramente non facendo nulla di male. Tuttavia, questo bug report su Google Code indicano che v'è un problema con i font Google prodotti per questo, in particolare la versione di IE. Ciò sembra soltanto interessare solo alcuni tipi di carattere, ma è un vero e proprio bummmer.

Le risposte sul filo indicano che le bugie problema con i file di Google di servendo, quindi non c'è niente che tu possa fare al riguardo. L'autore suggerire ottenere i font da posizioni alternative, come FontSquirrel , e servire a livello locale, invece, nel qual caso si potrebbe anche essere interessati a siti come la Lega di Movable Type .

NB. Come di ottobre 2010 il problema viene segnalato come fisso e chiuso la segnalazione di bug di Google Code.

Altri suggerimenti

appare come IE8-IE7 non può comprendere molteplici stili di Google Web Font attraverso la stessa richiesta file utilizzando il tag link href.

Queste due collegamenti mi ha aiutato a capire questo:

aperta problema di Google, e guardare i commenti.
Si veda anche questa risposta StackOverlow Google Web Fonts non funzionano in IE8

L'unico modo che ho ottenuto di lavoro in IE7-IE8 è di avere una sola richiesta di Google Web Font. E avere un solo stile di font nella href del tag link:

Quindi normalmente si avrebbe questo, dichiarando molteplici stili dei caratteri nella stessa richiesta:

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

Ma in IE7-IE8 aggiungere un IE condizionale e specificare ogni stile del carattere Google separatamente e funzionerà:

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

Spero che questo può aiutare gli altri!

Google Fonts utilizza Web Open Font Format (WOFF), che è un bene, perché è il formato di font raccomandata dal W3C.

versioni di IE più vecchi di IE9 non supportano Web Open Font Format (WOFF) perché non esisteva allora. Per il supporto

È possibile convertire il vostro WOFF per EOT qui da prima convertirlo in TTF e poi a EOT: http://convertfonts.com/

Poi si può servire il tipo di carattere EOT in questo modo:

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

Ora funziona in

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

Tuttavia,

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

come URL per il tipo di carattere. Siamo in grado di risolvere questo problema specificando prima uno src con un solo URL, che è il formato EOT, quindi specificando una seconda proprietà src che è destinata per i browser moderni e

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

Quindi, solo perché nella seconda proprietà src di specificare il format('woff'), myfont.woff') format('woff url) e dovrà continuare ad usare il primo specificato uno (EOT) .

Quindi, ora avete ottenuto il vostro Google webfonts a lavorare per

Per ulteriori informazioni sui vari tipi di font e il supporto del browser, leggere questo articolo perfetto per Alex Tatiyants: http://tatiyants.com/ how-to-get-IE8-to-supporto HTML5-tag-e-web-fonts /

Mentre la soluzione di Yi Jiang può funzionare, non credo abbandonando l'API di Google Web Font è la risposta giusta qui. Serviamo un file jQuery locale quando non è caricata correttamente dalla CDN, giusto?

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

Quindi, perché non dovremmo fare lo stesso per i font, in particolare per

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

Ecco il mio processo di quando si utilizza caratteri personalizzati:

Scarica la cartella ZIP del tipo di carattere da parte di Google, e utilizzare Font Squirrel di @ Font-face Generator per creare il font web locale.

Creare un file fonts.css che richiama i file di font, ospitati in locale di nuova creazione (solo collegamento al file se

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

Utilizzo di IE classi condizionali nel foglio di stile principale per avoide pesi e stili faux , gli stili dei caratteri potrebbero apparire così:

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

Certo, è un po 'di lavoro in più, ma non abbiamo noi si aspettano questo da IE? Inoltre, diventa una seconda natura dopo un po '.

Per quanto il suo valore, non ho potuto farlo funzionare sull'opzione dichiarazione multipla IE7 / 8/9 e non ha fatto alcuna differenza.

La correzione per me è stato come un risultato delle istruzioni sul Considerazioni tecniche pagina dove si mette in evidenza ...

Per una migliore visualizzazione in IE, rendono il tag foglio di stile 'link' la prima elemento nella sezione HTML 'testa'.

Opere attraverso IE7 / 8/9 per me ora.

Ho provato tutte le opzioni di cui sopra e non ha funzionato. Poi ho individuato il tipo di carattere google (Over the Rainbow) nella mia cartella (nuovo) ed usato IE condizionale qui sotto e tutto ha funzionato perfettamente.

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

Spero che vi aiuterà

Si può provare fontsforweb.com in cui i caratteri stanno lavorando per tutti i browser, perché sono forniti in TTF, WOFF e EOT formati con codice CSS pronto per essere incollato sulla pagina cioè.

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

oppure è possibile scaricarli in formato zip in un pacchetto con file CSS allegato

poi basta aggiungere classe a qualsiasi elemento di applicare tale carattere cioè.

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

vederlo lavorare: http://jsfiddle.net/SD4MP/

Si tratta di provare tutte quelle risposte, per me, non funziona nulla, tranne la soluzione successiva: Google Font suggerito

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

Ma, sto usando qui i caratteri in lingua straniera, e non ha funzionato su IE11 solo. Ho scoperto questa soluzione che ha funzionato:

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

La speranza che salvare qualcuno tempo prezioso

Prova questo tipo di collegamento, verrà eseguito anche in IE. spero che sia di aiuto .

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

Ho avuto lo stesso problema con voi. Ho trovato una soluzione utilizzando un codice Adobe Web Fonts, perfetta opera in Internet Explorer, Chrome, Firefox e Safari.

Maggiori info in questa pagina: http://html.adobe.com/edge/webfonts/

Dopo la mia indagine, sono arrivato fino a questa soluzione:

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

deve attenersi: Dobbiamo bisogno di scrivere la font-weight correttamente di questo tipo di carattere. Ad esempio: font-weight:900; non funziona come noi non abbiamo incluso 900 come 200,300,400,600,700,800 nel indirizzo URL durante l'importazione da parte di Google con il link qui sopra. Possiamo aggiungere o includere 900 a quanto sopra URL, ma che la volontà lavoro solo se sopra Google Font ha questa opzione, mentre l'incorporamento

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow