Foros del Web » Creando para Internet » CSS »

Font-face + Chrome + Option Select

Estas en el tema de Font-face + Chrome + Option Select en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/06/2013, 11:53
 
Fecha de Ingreso: marzo-2012
Mensajes: 102
Antigüedad: 7 años, 11 meses
Puntos: 1
Font-face + Chrome + Option Select

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

Última edición por mumraa; 12/06/2013 a las 12:08 Razón: agrego imagen
  #2 (permalink)  
Antiguo 12/06/2013, 12:11
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 6 años, 9 meses
Puntos: 35
Respuesta: Font-face + Chrome + Option Select

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!
__________________
No hay preguntas tontas, sino tontos que no preguntan.
  #3 (permalink)  
Antiguo 12/06/2013, 12:15
 
Fecha de Ingreso: marzo-2012
Mensajes: 102
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Font-face + Chrome + Option Select

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?
  #4 (permalink)  
Antiguo 12/06/2013, 12:25
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 6 años, 9 meses
Puntos: 35
Respuesta: Font-face + Chrome + Option Select

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!
__________________
No hay preguntas tontas, sino tontos que no preguntan.
  #5 (permalink)  
Antiguo 12/06/2013, 12:25
 
Fecha de Ingreso: mayo-2011
Ubicación: Palma de Mallorca
Mensajes: 108
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: Font-face + Chrome + Option Select

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
  #6 (permalink)  
Antiguo 12/06/2013, 12:32
 
Fecha de Ingreso: marzo-2012
Mensajes: 102
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Font-face + Chrome + Option Select

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
  #7 (permalink)  
Antiguo 12/06/2013, 12:50
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 6 años, 9 meses
Puntos: 35
Hombre podrías usar otra fuente para los sitios que se vea mal pero no se cómo se notaría estéticamente
  #8 (permalink)  
Antiguo 12/06/2013, 13:43
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.620
Antigüedad: 12 años
Puntos: 1104
Respuesta: Font-face + Chrome + Option Select

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
  #9 (permalink)  
Antiguo 12/06/2013, 15:23
 
Fecha de Ingreso: marzo-2012
Mensajes: 102
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Font-face + Chrome + Option Select

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
  #10 (permalink)  
Antiguo 13/06/2013, 05:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 6 meses
Puntos: 2111
Respuesta: Font-face + Chrome + Option Select

Cita:
Iniciado por alberto510a Ver Mensaje
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.
  #11 (permalink)  
Antiguo 13/06/2013, 07:45
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 6 años, 9 meses
Puntos: 35
Perdona pzin pero todos no somos tan expertos como tú. Y sólo trataba de darle una idea perdón si fue tan mala.
  #12 (permalink)  
Antiguo 13/06/2013, 08:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 6 meses
Puntos: 2111
Respuesta: Font-face + Chrome + Option Select

Sólo es una corección.

Etiquetas: chrome, font-face, option, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:14.