Foros del Web » Creando para Internet » CSS »

'Fonts' y navegadores

Estas en el tema de 'Fonts' y navegadores en el foro de CSS en Foros del Web. Hola amigos, Verán... Tengo un cliente que es abogado, y recientemente he encontrado un bugg de la página en concreto este: El bugg está en ...
  #1 (permalink)  
Antiguo 13/09/2014, 11:21
 
Fecha de Ingreso: abril-2010
Mensajes: 267
Antigüedad: 14 años, 7 meses
Puntos: 1
'Fonts' y navegadores

Hola amigos,
Verán... Tengo un cliente que es abogado, y recientemente he encontrado un bugg de la página en concreto este:



El bugg está en el logotipo, esa imagen está capturada desde el navegador Google Chrome de un Android, el móvil dudo que importe, de todos modos es un Jiayu G3T, el logotipo es así como debería aparecer:



Funciona en todos los sitios perfectamente excepto ahí, el código que uso es este:

Código:
@font-face {
	font-family: 'GalileoFLF-Bold';
	src: url('fonts/galileo-flf-bold/GalileoFLF-Bold.eot') format('eot'),
	url('fonts/galileo-flf-bold/GalileoFLF-Bold.eot?#iefix') format('embedded-opentype'),
	url('fonts/galileo-flf-bold/GalileoFLF-Bold.woff2') format('woff2'),
	url('fonts/galileo-flf-bold/GalileoFLF-Bold.woff') format('woff'),
	url('fonts/galileo-flf-bold/GalileoFLF-Bold.ttf') format('truetype'),
	url('fonts/galileo-flf-bold/GalileoFLF-Bold.svg#GalileoFLF-Bold') format('svg');
	font-weight: normal;
	font-style: normal;
}
Según mis conocimientos debería funcionar perfectamente, lo último que he añadido a sido en woff2, que no sé si lo he añadido bien.

Muchísimas gracias por vuestra ayuda :D
  #2 (permalink)  
Antiguo 13/09/2014, 20:55
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años, 8 meses
Puntos: 17
Respuesta: 'Fonts' y navegadores

El problema que tienes es que el ancho es mucho menor a la longitud de las palabras en el logotipo,, lo que puedes hacer ahi es, indicar en un mediaqueries en esa resolucion que la tipografica de tu logo es menor y listo, con eso deberia adaptarce bien
  #3 (permalink)  
Antiguo 13/09/2014, 20:59
 
Fecha de Ingreso: septiembre-2014
Ubicación: Rosario, Santa Fe
Mensajes: 10
Antigüedad: 10 años, 2 meses
Puntos: 3
Respuesta: 'Fonts' y navegadores

¿La fuente se imprime con un tamaño fijo?

Como dice mi compañero, lo conveniente es arreglarlo desde un mediaqueries del CSS (supongo que lo tenés separado) responsive.

La otra manera es trabajar con font-size que no sean de tamaños fijos.
  #4 (permalink)  
Antiguo 14/09/2014, 03:11
 
Fecha de Ingreso: abril-2010
Mensajes: 267
Antigüedad: 14 años, 7 meses
Puntos: 1
Respuesta: 'Fonts' y navegadores

¡Holaaa juangemelo01 y TommyGun! :D
Muchísimas gracias por vuestra respuesta, investigando he encontrado lo de mediaquires, lo he probado, sí, se imprime en tamaño fijo :/ , lo he probado pero no funciona, de todos modos ayer noche seguí buscando errores y me pasa exactamente lo mismo en Internet Explorer 9 en ordenador.

Os dejo la vista desde el móvil y la de el pc:





EDITO: Me he dado cuenta que en los navegadores que falla, al entrar (es cuando falla), cambias de página de la web y a la segunda carga la fuente perfectamente, ¿Puede ser un error de carga?, ¿Cómo lo soluciono?.

Muchas gracias y un saludo :)

Última edición por alejandromaringomez; 14/09/2014 a las 06:15
  #5 (permalink)  
Antiguo 16/09/2014, 13:56
 
Fecha de Ingreso: julio-2014
Mensajes: 334
Antigüedad: 10 años, 4 meses
Puntos: 30
Respuesta: 'Fonts' y navegadores

añadiendo un font-size en cada media queries según dispositivo se te tiene que arreglar, es obvio que tendrás que eliminar el tamaño de fuente fija que hayas puesto para que coja el valor de cada tipo de pantalla.

NOTA: internet explorer!!! buff!!1 olvídate de eso, es una antigualla, diseña mejor para chorme, safari, mozilla y opera.

Última edición por Triby2; 16/09/2014 a las 14:25 Razón: NOTA
  #6 (permalink)  
Antiguo 16/09/2014, 17:46
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: 'Fonts' y navegadores

Si tienes que cambiar el tamaño de fuente en cada breakpoint estás haciendo un mal diseño responsivo.

A mi me parece que es más bien un problema de line-height. Prueba a mirar los valores computados del inspeccionador de elementos.
__________________
(:

Última edición por pzin; 18/09/2014 a las 03:13 Razón: si/no
  #7 (permalink)  
Antiguo 18/09/2014, 02:39
 
Fecha de Ingreso: abril-2010
Mensajes: 267
Antigüedad: 14 años, 7 meses
Puntos: 1
Respuesta: 'Fonts' y navegadores

¡Hola amiguetes! ,
Lo he hecho y probado, la verdad es que no he solucionado con el line height, pero lo del font size lo hize como podéis ver en la imagen y es muy pequeño y no funciona, la verdad que no sé que puede ser :(

Muchas gracias :D
  #8 (permalink)  
Antiguo 18/09/2014, 03:14
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: 'Fonts' y navegadores

Entonces será mejor que pongas o bien el código completo, publiques en el código en algún playground o que pongas la URL si lo tienes subido a algún sitio.
__________________
(:
  #9 (permalink)  
Antiguo 19/09/2014, 14:23
 
Fecha de Ingreso: abril-2010
Mensajes: 267
Antigüedad: 14 años, 7 meses
Puntos: 1
Respuesta: 'Fonts' y navegadores

¡Hola pzin! ,
Lo tengo subido a http://www.metokes.com/webs/novauditia
  #10 (permalink)  
Antiguo 21/09/2014, 07:29
 
Fecha de Ingreso: julio-2014
Mensajes: 334
Antigüedad: 10 años, 4 meses
Puntos: 30
Respuesta: 'Fonts' y navegadores

Cita:
Iniciado por alejandromaringomez Ver Mensaje
¡Hola amiguetes! ,
Lo he hecho y probado, la verdad es que no he solucionado con el line height, pero lo del font size lo hize como podéis ver en la imagen y es muy pequeño y no funciona, la verdad que no sé que puede ser :(

Muchas gracias :D
Bueno, ves jugando con los valores de font-size, eso sí.... ¿no habrás puesto el font-size FUERA de los media-querieres, verdad?

Si te sale la fuente pequeña, me das a entender que lo has puesto solo en el media-querie para dispositivos..

para solventar ese problema, tienes que poner uno en el general (para cuando lo visualize un ordenador, otro en una media-querie para tables, otro para smartphones y si nos ponemos perfeccionistas, el que va para smarthpones, lo debes de dividir en dos (uno para cuando la pantalla esté en posición landscape (horizontal) y otra para portrait (vertical).

Te añado la lista de media-queries standard, (lo que deberías de tener en todas tus webs para que se visualizen en cualquier tipo de dispositivo existente)

Código CSS:
Ver original
  1. /* Smartphones (portrait and landscape) ----------- */
  2. @media only screen
  3. and (min-device-width : 320px)
  4. and (max-device-width : 480px) {
  5. /* Styles */
  6. }
  7.  
  8. /* Smartphones (landscape) ----------- */
  9. @media only screen
  10. and (min-width : 321px) {
  11. /* Styles */
  12. }
  13.  
  14. /* Smartphones (portrait) ----------- */
  15. @media only screen
  16. and (max-width : 320px) {
  17. /* Styles */
  18. }
  19.  
  20. /* iPads (portrait and landscape) ----------- */
  21. @media only screen
  22. and (min-device-width : 768px)
  23. and (max-device-width : 1024px) {
  24. /* Styles */
  25. }
  26.  
  27. /* iPads (landscape) ----------- */
  28. @media only screen
  29. and (min-device-width : 768px)
  30. and (max-device-width : 1024px)
  31. and (orientation : landscape) {
  32. /* Styles */
  33. }
  34.  
  35. /* iPads (portrait) ----------- */
  36. @media only screen
  37. and (min-device-width : 768px)
  38. and (max-device-width : 1024px)
  39. and (orientation : portrait) {
  40. /* Styles */
  41. }
  42.  
  43. /* Desktops and laptops ----------- */
  44. @media only screen
  45. and (min-width : 1224px) {
  46. /* Styles */
  47. }
  48.  
  49. /* Large screens ----------- */
  50. @media only screen
  51. and (min-width : 1824px) {
  52. /* Styles */
  53. }
  54.  
  55. /* iPhone 4 ----------- */
  56. @media
  57. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  58. only screen and (min-device-pixel-ratio : 1.5) {
  59. /* Styles */
  60. }

Pues bien, en cada una de ellas, deberías de poner un font-size, entre otras características para que se visualize correctamente el texto en este caso.

Aquí herramientas que quizás desconozcas para visualizar desde la web como se ven tus proyectos en otros dispositivos: (de esta manera podrás modificar el css para cada dispositivo, en el mismo momento y así poder hacer un mejor trabajo antes de entregar el proyecto) ;)

http://www.responsinator.com/
http://mattkersley.com/responsive/

solo pega la web de tu proyecto en la esquina superior derecha

Última edición por Triby2; 21/09/2014 a las 08:30 Razón: Añadido css y herramientras

Etiquetas: navegadores, página
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 21:32.