otf - font face html
@ font-face no funciona con una versión específica de Internet Explorer 11 (4)
Sé que hay muchas preguntas similares, pero esta situación parece realmente extraña. @ font-face parece estar roto para Internet Explorer 11 (Windows 7 Pro). Específicamente, Versión: 11.0.9600.17728 , Versión de Actualización: 11.0.18 .
@ font-face funciona bien para mí en Chrome, Firefox, Safari, Opera (tanto en Linux como en Windows, donde corresponda). De hecho, incluso está funcionando en la versión de Internet Explorer: 11.0.9600.17633 , Versión de actualización: 11.0.16 , también se ejecuta en Windows 7 en una máquina diferente que tengo.
No hay nada en la consola del desarrollador que indique que hay algún problema para obtener las fuentes. He simplificado mi html / css a cosas muy básicas para reproducir el problema. En el caso a continuación, ninguna de las fuentes personalizadas funciona (para esa versión específica de IE):
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<p>This font should be Roboto Thin</p>
<p>There should be icons below. If not, then font-face is not working.</p>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span>h</span>
<span>i</span>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
</body>
</html>
... y el CSS:
@charset "UTF-8";
@font-face {
font-family: ''robotothin'';
src: url(''roboto-thin-webfont.eot'');
src: url(''roboto-thin-webfont.eot?#iefix'') format(''embedded-opentype''),
url(''roboto-thin-webfont.woff'') format(''woff''),
url(''roboto-thin-webfont.ttf'') format(''truetype''),
url(''roboto-thin-webfont.svg#robotothin'') format(''svg'');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ''typicons'';
src: url(''typicons-regular-webfont.ttf'');
}
p {
font-family: robotothin;
font-size: 26px;
color: #666;
}
span {
font-family: typicons;
font-size: 30px;
color: #0062A8;
}
Puedes encontrar ese código corriendo aquí .
Si veo esa página usando la versión de IE que causa problemas, la fuente de texto será la predeterminada y, en lugar de los íconos, solo verá las letras en las etiquetas de span .
Dado que @ font-face está funcionando en todos los demás navegadores que he probado (incluso en una versión diferente de IE 11), ¿es probable que esto sea un error con esa versión de IE, y hay algo que pueda hacer para corregir o depurar aún más?
El problema puede estar relacionado con el uso de HTTPS en versiones específicas de Internet Explorer. Descubrí que la versión 11.0.9600.19035, actualización versión 11.0.65 que se ejecuta en Win 7 también se ve afectada.
Aunque Google dice que es compatible con Microsoft Internet Explorer versión 6+, sus fuentes se ven afectadas de la misma manera que se describe anteriormente.
Servir la fuente a través de HTTP traerá una advertencia de "contenido mixto". Después de aceptar la advertencia, la fuente se mostrará en los IE afectados, pero NO en los no afectados.
Actualmente no conozco ninguna solución, ni siquiera una forma de detectar las versiones afectadas a través de HTML / CSS / JavaScript.
Esto podría estar relacionado con un problema con la configuración de seguridad como se describe en este informe de error .
En Opciones de Internet vaya a:
- La pestaña de seguridad
- Nivel de seguridad para esta zona.
- Nivel personalizado
- Descargas
- Descarga de fuentes
Si está deshabilitado, entonces necesitas habilitarlo.
Se corrigió eliminando el encabezado "Vary" para los archivos "eot" en el nivel de apache
<Location ~ /.eot$>
Header unset Vary
</Location>
