css - otf - font face sass

Internet Explorer @ font-face está fallando

Question

Estoy tratando de hacer que Internet Explorer renderice mis bonitas fuentes. No funciona. Funcionan bien en Firefox y puedo ver en mis registros de acceso de Apache que IE ha sacado las fuentes. Así que está analizando la etiqueta CSS de la fuente de la fuente, simplemente no los renderiza.

El sitio que utilicé para convertir las fuentes fue: http://www.kirsle.net/wizards/ttf2eot.cgi . Probé esa herramienta WEFT de Microsoft, pero no funcionaría correctamente. Después de instalarlo y abrirlo, decía ''La primera vez que lo ejecutas, haz esto ...'' y luego cuelga continuamente.

Aquí está mi CSS:

@font-face
{
   font-family: ''HelveticaLTCN'';
   src: url(''HelveticaNeueLTCom-LtCn_0.eot'');
   src: local(''HelveticaNeuel TCom LtCn''), url(''HelveticaNeueLTCom-LtCn_0.ttf'') format(''TrueType'');
}

¿Alguna idea de por qué IE no está procesando las fuentes?

EDITAR: También debería mencionar, estoy llamando a la fuente con:

p .mytext
{
   font-family: HelveticaLTCN;
}

Answer 1

Estaba teniendo el mismo problema que Panas. Convertí de ttf a eot usando onlinefontconverter.com. Bueno, parece que ese era el problema: ¡simplemente intenté fontsquirrel.com como atsjr señaló y todo funciona bien!

Answer 2

Esto funcionó para mí:

@font-face {
    font-family : ''din-pro'';
    src         : url(''../fonts/din/DINPro-Medium.woff'') format(''woff'');
    src         : url(''../fonts/din/DINPro-Medium.otf'') format(''otf'');
    src         : url(''../fonts/din/DINPro-Medium.ttf'') format(''truetype'');
    font-weight : 500;
    font-style  : normal;
}

@font-face {
    font-family : ''din-pro'';
    src         : url(''../fonts/din/DINPro-Regular.woff'') format(''woff'');
    src         : url(''../fonts/din/DINPro-Regular.woff2'') format(''woff2'');
    src         : url(''../fonts/din/DINPro-Regular.ttf'') format(''truetype'');
    font-weight : 400;
    font-style  : normal;
}
@font-face {
    font-family : ''din-pro-ie'';
    src         : url(''../fonts/din/DINPro-Regular.eot?'');
    font-weight : 400;
    font-style : normal;
}
@font-face {
    font-family : ''din-pro-ie'';
    src         : url(''../fonts/din/DINPro-Medium.eot?'');
    font-weight : 500;
    font-style : normal;
}

Tenga en cuenta que he definido la fuente para IE por separado con un sufijo -ie . Cuando use la fuente, haré algo como p { font-family : din-pro, din-pro-ie } . Probado y trabajando desde IE5 hacia adelante usando emulación.

Answer 3

IE no aceptará una fuente que incluya una cadena de formato en el descriptor src; esa segunda línea src podría ser la culpable. ¿Qué sucede si lo elimina (o elimina la cadena de formato?)

A continuación, a veces, IE puede ser un poco pedante sobre si usa o no comillas alrededor de valores en CSS. Pruebe font-family: "HelveticaLTCN" lugar?

Answer 4

Internet Explorer se vuelve un poco dudoso con las otras definiciones @ font-face allí. Anteriormente, me pareció una ayuda increíble: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

En resumen, recomiendan que la mejor manera sea la siguiente. El único cambio es agregar un signo de interrogación al final de la url de la fuente. Extraño, ¿no?

@font-face {
  font-family: ''Graublau Web'';
  src: url(''GraublauWeb.eot?'') format(''eot''), url(''GraublauWeb.woff'') format(''woff''), url(''GraublauWeb.ttf'') format(''truetype'');
}

Hay una serie de otras alternativas enumeradas, a saber, en torno a la especificación de etiquetas de @ font-face separadas para el archivo EOT de los demás.

Answer 5

La mejor definición para font-face es:

@font-face {
  font-family: ''Graublau Web'';
  src: url(''GraublauWeb.eot?'') format(''eot''), url(''GraublauWeb.woff'') format(''woff''), url(''GraublauWeb.ttf'') format(''truetype'');
}

Answer 6

Lo que funcionó para mí es la siguiente declaración:

@font-face {
    font-family: ''Frutiger45LightBoldItalic'';
    src: local(''☺''), url(''../font/frutiger-bolditalic-webfont.woff'') format(''woff''), url(''../font/frutiger-bolditalic-webfont.ttf'') format(''truetype''), url(''../font/frutiger-bolditalic-webfont.svg#webfontR2tDy7QH'') format(''svg''), url(''../font/frutiger-bolditalic-webfont.eot'');
}

De modo que solo hay 1 atributo src y .eot está al final del mismo, sin signo de interrogación.

Lo que probé antes y no funcionó:

• poner .eot en una línea separada (antes o después del otro src )
• poniendo un signo de interrogación después de .eot

Answer 7

Mientras lucho con un problema similar, noté que de alguna manera la definición de DOCTYPE afecta las fuentes incrustadas en IE . Cuando DOCTYPE definición de DOCTYPE la fuente se mostró correctamente.

Answer 8

Recuerde que: .eot fonts debe ser el último "src". Si no, IE reescribirá la configuración y bloqueará la fuente.

@font-face {
    font-family: "Aller Bold";
    src: url(fonts/Aller_Bd.ttf) format("truetype");
    src: url(fonts/Aller_Bd.eot);
}

Answer 9

Si has tirado la toalla o si todavía estás luchando con esto, te recomiendo fuertemente la ardilla tipográfica . Reemplaza a WEFT mucho mejor que cualquiera de los otros generadores en línea .eot. Como una gran ventaja, proporciona todos los formatos cruzados necesarios en un archivo zip junto con una página de muestra CSS + HTML que funciona. Es lo más cercano a @fontface nirvana.

Answer 10

Siempre es mejor dirigir el atributo de la fuente de la cara localmente y no en línea, por ejemplo url (''../ fonts / font-name.eot''). IE y otros navegadores no "verán" las fuentes cuando está ejecutando su página web en un servidor local.

Answer 11

Tuve los mismos problemas que muchas personas aquí encontraron. El problema resultó ser simplemente que IE tiene un límite de caracteres más corto en el valor de la familia de fuentes. Le di a mi familia de fuentes un nombre más corto y finalmente funcionó usando el CSS que escupió la ardilla.

¡Uno raro!

Answer 12

Una cosa que debes verificar es

El archivo .css y .eot deben estar en la misma carpeta si lo hace url (''HelveticaNeueLTCom-LtCn_0.eot'')

o hacer una ruta de url completa como src: url ( http://www.example.com/path/to/url/Helvetica.eot )

Las citas son opcionales por lo que sé.

ps # Estoy haciendo la inserción de fuentes en mi blog por mucho tiempo, está funcionando bien.

Answer 13

Una cosa que es especial acerca de IE es que requiere que el nombre de la familia de fuentes sea exactamente el mismo que el nombre que se encuentra en las propiedades de la fuente. Si bien Chrome y otros le permiten nombrar la familia de fuentes lo que quiere, ese no es el caso para IE

Answer 14

este código podría resolver mi problema en IE:

  @font-face {
      font-family: ''kurdish'';
      src: url(''font/zkurd_aras.eot?'') format(''eot''), url(''font/zkurd_aras.woff'') format(''woff''), url(''font/zkurd_aras.ttf'') format(''truetype'');}