Font-face + Chrome + Option Select

[mumraa]

Hola a todos! espero no estar equivocandome al elegir la seccion para este tema..

Tengo un problema y estoy un poco mareado. No se que es lo que sucede..
Estoy usando la fuente 'ASAP' con font-face y se ve perfectamente alisada, salvo en Firefox (pero se que no soporta el propiedad asique no me molesta).

El tema es que he incluido la fuente para usar dentro de titulares, algunos textos introductorios y, (aqui el problema ) en elementos de formularios (input, textarea y selects).

Sobre inputs y textarea's, font-face anda de 10.

Pero cuando trabaja en selects, por alguna razon suceden problemas segun el navegador:

- En Firefox e IE no hay problemas..


- Safari y Opera, no se muestran los valores desplegados. Si el espacio, pero sin texto. (en Opera, no muestra espacios entre palabras).
- En chrome, si despliega texto pero todos caracteres raros e incluso solapados unos sobre otros.

En estos 3, por mas que no se vean o no se entiendan las opciones, al elegir una muestra bien la palabra..

saben a que puede deberse??' es muy extraño esto..

saludos!!!

PD: les agrego una imagen para que vean

[alberto510a]

Hola, no todas las fuentes son compatibles al 100% por lo cual te recomiendo buscar alguna parecida más genérica para que te asegures la compatibilidad.

Saludos!

[mumraa]

Pero es raro no crees? se muestra bien en todos lados, solo tengo problema en los selects.. estas seguro que el problema es de compatibilidad?

[alberto510a]

No es tan raro, digamos que hay varios grupos de navegadores unos son los que se le conoce como webkit que son chrome, opera y safari los más importantes, aquí los demás:

http://es.wikipedia.org/wiki/WebKit

...moz que corresponde a firefox y internet explorer es individual por lo cual sino te funciona en chrome por ejemplo es muy normal que en los de su mismo grupo tampoco.

Saludos!

[tonigomila1988]

Hola mumraa:

para decirlo de una manera directa, los select son raros XD

Se que hay algunas páginas que ofrecen unos menús selects prediseñados.

Están hechos con JS y CSS para que adquieran un estilo.

Saludos

[mumraa]

gracias a todos por responder,

entiendo lo de los grupos de navegadores. por eso les comentaba que webkit tenia problemas y en especial, chrome en donde aparecen corrompidas las letras..

acabo de mirar en el inspector y sale esto:

Código:

Resource interpreted as Font but transferred with MIME type image/svg+xml

o sea, creen no puede solucionarse mas que quitando el fontface de los formularios?
voy a googlear sobre hacer esto desde JS

[alberto510a]

Hombre podrías usar otra fuente para los sitios que se vea mal pero no se cómo se notaría estéticamente

[ArturoGallegos]

una opción viable a mi ver seria en lugar de un select utilizar una lista <ul> y con CSS simular el select, sumado a eso creas un input oculto y con javascript o jquery pasas el valor de la lista que el usuario seleccione.

de esa forma podemos aplicar cualquier estilo para mostrar/simular un select

[mumraa]

Alberto no te enojes compadre! :P

pensé en esa solución, pero preferí intentar solucionarlo..

ArturoGallegos, esa puede ser, pero creo tengo algo mas simple. Por si a alguno le sirve he encontrado una forma (un parche mejor dicho):

Uso el font-face normalmente en el sitio aplicandolo adonde lo necesito (etiquetas h1, p o lo que sea) pero cuando se trata de elementos de formulario esta el problema.
Entonces, aplico el mismo estilo de la fuente a input's y textarea's.

Y para los selects, duplico el estilo a ej "font-select" pero remuevo esta linea:

Código:

url('../fonts/asap-regular-webfont.svg#asapregular') format('svg'),

ya que es el formato svg el que crea problemas al no poder crear imagen dentro del select.

Como no son tantos selects los que tengo (si inputs) todo el formulario se ve alisado, salvo estos. pero no es muy notorio..


que piensan?


saludos

[pzin]

Iniciado por alberto510a

No es tan raro, digamos que hay varios grupos de navegadores unos son los que se le conoce como webkit que son chrome, opera y safari los más importantes, aquí los demás:

http://es.wikipedia.org/wiki/WebKit

...moz que corresponde a firefox y internet explorer es individual por lo cual sino te funciona en chrome por ejemplo es muy normal que en los de su mismo grupo tampoco.

Saludos!

En realidad Opera y Chrome se cambian a Blink. Safari será el único importante que se quede con WebKit, y sólo importante por el tema de Safari móvil, sino no habría ni que nombrarlo.

Firefox usa Gecko, no sé que será eso de "moz". IE usa Trident como motor de renderizado, que es uno propio.

[alberto510a]

Perdona pzin pero todos no somos tan expertos como tú. Y sólo trataba de darle una idea perdón si fue tan mala.

[pzin]

Sólo es una corección.