css - ttf - font face sass

@ font-face funciona en IE8 pero no en IE9

Question

Como se describió anteriormente, tengo problemas con @ font-face que no se muestra en IE9, aunque se muestra bien en todos los demás navegadores, incluidos IE8 y anteriores. Además, cuando se ve localmente en mi computadora, IE9 muestra la fuente, pero no cuando está completamente en vivo.

El sitio es:

bigwavedesign.co.uk/gcc/gcc/

El código usado es:

    @font-face {
                font-family: ''LeagueGothicRegular'';
                src: url(''league_gothic_0-webfont.eot'');
                src: local(''League Gothic Regular''), url(''league_gothic_0-webfont.woff'') format(''woff''), url(''league_gothic_0-webfont.ttf'') format(''truetype''), url(''league_gothic_0-webfont.svg#webfonta36nFpyE'') format(''svg'');font-weight: normal;font-style: normal;
}

Alguien alguna idea de por qué esto podría estar ocurriendo?

¡Aclamaciones!

==========================================

EDITAR

He encontrado el siguiente sitio que muestra la misma fuente correcta en IE9, ¿alguna idea de cómo lo hizo?

http://iamthomasbishop.com/

Answer 1

Abalore +1

Mi solución:

@font-face {
    font-family: "OfficinaSansBookSCC";
    src: url(''font/OfficinaSansBookSCC.eot''); 
    src: url(''font/OfficinaSansBookSCC.eot'') format(''embedded-opentype''), 
         url( ''font/OfficinaSansBookSCC.ttf'' ) format("truetype");
} 

trabajando en IE 7-9, Chrome, Opera, Firefox.

primera línea necesaria para IE 9, segunda para IE 7-8.

Answer 2

Acabo de tener el mismo problema con Web Fonts alojado en un sitio IIS7, como sugirió Grillz, el problema se reducía a los tipos MIME.

He elegido usar "application / octet-stream" según las respuestas al tipo Mime para la pregunta WOFF .

1. Abra IIS y seleccione el sitio que aloja las fuentes (debe ser el mismo nombre de dominio para IE9 y Firefox)
2. Haga doble clic en "Tipos de Mime"
3. Haga clic en "Agregar ..." en la esquina superior derecha.
4. En "Extensión de nombre de archivo:", ingrese ".woff"
5. En "Tipo MIME:", ingrese "application / octet-stream"

Espero que eso le ahorre a alguien 10 minutos en el futuro.

Answer 3

Bueno, ya que ha editado su publicación, el siguiente texto no será la respuesta. ¿Estás señalando el directorio correcto? ¿Hay alguna posibilidad de que esto sea una cuestión de tipo mimo del servidor?

=============================================== ==

Esto podría ser:

Es importante tener en cuenta que su sitio debe mostrarse en documentMode 9 para aprovechar las nuevas características incluidas con IE9 (que incluye todas las funciones nuevas en IE9, no solo las relacionadas con las fuentes web). Si no ha oído hablar antes de documentMode, Microsoft ha creado una guía que explica qué es y cómo puede usarla en su sitio.

de http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/

Answer 4

Deberías echarle un vistazo a paulirish.com/2009/bulletproof-font-face-implementation-syntax publicación en el blog. Paul Irish tiene algunas cosas que decir sobre los problemas que te encuentras y presenta lo que él llama una declaración "a prueba de balas" de la fuente de la fuente.

paulirish.com/2009/bulletproof-font-face-implementation-syntax

Answer 5

En IE9 - F12 mira la pantalla de depuración para ver si hay algún error CSS3117. Ver también: IE9 bloquea la descarga de fuente web de origen cruzado

Answer 6

Mi solución es declarar dos fuentes diferentes:

@font-face {
    font-family: "Dereza bold";
    src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype"); 
}

@font-face {
    font-family: "IE Dereza bold";
    src: url("../../assets/eot/dereza_bold.eot");
}

Y entonces:

.divclass {
  font-family: "Dereza bold", "IE Dereza bold";
}

Answer 7

Para nosotros, el truco era simplemente cambiar el formato en los archivos .eot que estamos sirviendo.

Funciona en IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.

@font-face {
    font-family: ''Museo'';
    src: url(''/ui/museo300.eot?'') format(''eot''),
         url(''/ui/museo300.ttf'')  format(''truetype'')
}

Se convierte en:

@font-face {
    font-family: ''Museo'';
    src: url(''/ui/museo300.eot?'') format(''embedded-opentype''),
         url(''/ui/museo300.ttf'')  format(''truetype'')
}

Answer 8

Quería agregar otra cosa que posiblemente podría salir mal en este escenario. IE9 tiene una regla que descarta todas las declaraciones @ font-face que no se pueden almacenar en caché después de la primera carga. IE9 realmente usará la fuente correctamente en la primera pantalla, pero en renovaciones posteriores, se deshabilitará @ font-face. Descubrí esto después de cerrar mi navegador por casualidad, y luego lo volví a abrir para encontrar que mi fuente funcionaba misteriosamente, solo para dejar de trabajar una actualización más tarde.

Para solucionar esto, simplemente necesita asegurarse de que la solicitud que sirve su fuente tenga un encabezado de respuesta Cache-Control de algo que no-cache . Yo recomendaría configurarlo a max-age=3600 . Esto asegurará que tu fuente esté almacenada en caché durante una hora. IE9 luego podrá mostrar su fuente de manera consistente.

Answer 9

Tuve este problema Resulta que me faltaba una coma en la declaración de la familia de fuentes.

Answer 10

http://www.fontsquirrel.com usa esto para su muestra de CSS que funcionó bien para el proyecto en el que estaba trabajando.

@font-face {
    font-family: ''QuicksandBook'';
    src: url(''/Quicksand_Book-webfont.eot'');
    src: url(''/Quicksand_Book-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''/Quicksand_Book-webfont.woff'') format(''woff''),
         url(''/Quicksand_Book-webfont.ttf'') format(''truetype''),
         url(''/Quicksand_Book-webfont.svg#QuicksandBook'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

Answer 11

Font Squirrel también proporciona una herramienta generadora maravillosa para ayudarte a crear un kit de fuentes que incluirá los formatos necesarios, CSS ya escritos e incluso una página de demostración para ver cómo se usa, junto con ayuda con los problemas que puedas encontrar.

Fue muy fácil incorporar su salida a mi sitio y solucionó el problema perfectamente.

Answer 12

Sin respuesta, solo confirmación: tengo un tipo similar de problema. La fuente funciona en todas las otras versiones de IE excepto IE9, ambas usando IETester y el navegador original. Al cambiar el modo de documento (herramientas F12 dev), la fuente funciona. Aunque no me gustaría mucho.

Actualización : Con un truco logré que funcionara. Parece que IE9 está utilizando la versión .woff de la fuente (que había excluido) durante el .eot que pensé que sería. Usé el generador @ font-face de fontsquirrel para obtener todas las variaciones de fuente diferentes y las smileyface en mi proyecto, usando smileyface . No tuve que alterar mi archivo .htaccess. Ahora funciona bien y tiene el mismo aspecto en todas las versiones de IE:

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

( Incluso me enojé con el uso text-shadow Mark "Tarquin" Wilton-Jones, aplicando el mismo aspecto a las versiones de IE como el resto del mundo del navegador. ¿La vieja escuela? ¡Se ve genial! ¿Valió la pena? Bueno, aprendí mucho. ;)