Comunidad de diseño web y desarrollo en internet online

Se ven mal fuentes @font-face en Explorer.

Citar            
MensajeEscrito el 24 Jul 2013 03:41 pm
Hola,

Estoy utilizando la familia raleway y se ve bien en todos los navegadores pc y mac, excepto en Explorer (estoy probando con IE8), donde se ve la tipografía raleway, pero muy pixelizada.

Este es el código de la fuente:

Código CSS :

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

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 25 Jul 2013 01:10 pm
Prueba cambiando la configuración de pantalla de Windows. "Propiedades de pantalla"->"Apariencia"->"Efectos..."->"Usar el siguiente método para suavizar los bordes de las fuentes de pantalla"->"ClearType" (Esto es en Windows XP).

Pero te advierto que IE8 es bastante perro en aceptar fuentes "extrañas".

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 25 Jul 2013 01:50 pm
Gracias DriverOp, probaré lo que comentas, pero he visto otras webs con la raleway y se ve mejor. La fuente la usan desde google font.

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 02 Ago 2013 09:33 pm
Yo tengo un problema parecido:

Código CSS :

@font-face {
   font-family: 'Freestyle';
   src: url('../fonts/Freestyle.eot');
   src: local('☺'), url('../fonts/Freestyle.woff') format('woff'), url('../fonts/Freestyle.ttf') format('truetype'), url('../fonts/Freestyle.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}


Uso El IE10 y no se ve mi fuente, pero cuando activo el modo de compatibilidad si se visualiza. Mi fuente se visualiza en Mozilla Firefox, Google Chorme, Opera y Safari.
Alguna idea?

Por RINGO_thehunter

22 de clabLevel



 

chrome
Citar            
MensajeEscrito el 03 Ago 2013 12:41 am
Prueba con font-squirrel, adicionalmente prueba algunas de las soluciones que ofrecen en stackoverflow

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 03 Ago 2013 12:42 am

RINGO_thehunter escribió:

Yo tengo un problema parecido:

Código CSS :

@font-face {
   font-family: 'Freestyle';
   src: url('../fonts/Freestyle.eot');
   src: local('☺'), url('../fonts/Freestyle.woff') format('woff'), url('../fonts/Freestyle.ttf') format('truetype'), url('../fonts/Freestyle.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}


Uso El IE10 y no se ve mi fuente, pero cuando activo el modo de compatibilidad si se visualiza. Mi fuente se visualiza en Mozilla Firefox, Google Chorme, Opera y Safari.
Alguna idea?


RINGO, si mal no recuerdo, los src deben ser lo último en font-face.

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 03 Ago 2013 09:54 am

Código CSS :

local('☺'),
¿Para qué sirve eso de local?

Como dice Aoyama, prueba con font-squirrel. También hay una aplicación de pago que lo hace, FontXChange.



Aquí comentan el código de font-face. Este es el ejemplo que ponen.

Código CSS :

@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.eot'); /*IE9 Compat Modes*/
   src: url('webfont.eot?#iefix') format('embedded-opentype'), /*IE6-8*/
        url('webfont.woff') format('woff'), /*Modern Browsers*/
        url('webfont.ttf')  format('truetype'), /*Safari, Android, iOS*/
        url('webfont.svg#svgFontName') format('svg'); /*Legacy iOS*/
   }

Código HTML :

body {
       font-family: 'MyFontFamily', Fallback, sans-serif;
}

Por walden

Claber

120 de clabLevel



 

safari
Citar            
MensajeEscrito el 03 Ago 2013 12:46 pm

walden escribió:

Código CSS :

local('☺'),
¿Para qué sirve eso de local?


Le estás diciendo que en la medida de lo posible intente usar fuentes locales del visitante. Lo del smiley es un hack para webkit y OSX si mal no recuerdo, aquí lo explican mejor.

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.