(Principiante a HTML)Photoshop maqueta Fuente no es igual que en HTML
he hecho un Photoshop maqueta de la página web que quiero hacer, pero el texto que he utilizado en la maqueta se ve diferente cuando se ve en Firefox. El texto es fuente Arial, tamaño 18pt y peso normal, y lo he implementado en código HTML, pero se ve diferente.
¿Hay alguna manera de hacer que la fuente se vea igual en HTML que en Photoshop?
Gracias de antemano :)
La respuesta corta es "no". Photoshop tiene lote más funcionalidad de fuente que un navegador web. Aplica todo tipo de algoritmos de suavizado, y puede controlar el kerning, el seguimiento y el espaciado mucho mejor.
Cada navegador y sistema operativo tiene un motor de representación distinto también, por lo que incluso si pudiera obtener el mismo en una combinación de navegador/sistema operativo, se vería diferente en otra.
Sin embargo, revise todos los CSS properties for text para ver si puede conseguir algo con lo que pueda vivir. Si no, su mejor opción es simplemente crear una imagen de su texto y agregarla a su página con un buen texto "alt" y tal.
Bastante. Gracias. – Mozaz
Las diferencias entre la representación HTML y la representación anti-alias de Photoshop no deberían ser una razón para usar imágenes en lugar de texto. Tenga en cuenta el ancho de banda adicional y no le permite al usuario seleccionar el texto. –
@womp: Sé que esta es una respuesta muy antigua, pero para cualquiera que visite aquí, deje de pegar enlaces a w3schools. – Razort4x
No estoy seguro de qué sistema operativo está, pero Windows y Macintosh tienen diferentes sistemas de fuentes.
This post by Joel Spolsky señala que la representación de fuentes se basa en diferencias filosóficas.
¿Es eso lo que estás viendo? Por favor, publique imágenes para que podamos ver de lo que está hablando.
Las fuentes son algo que simplemente no se puede obtener directamente en la web. Si tiene que controlar el aspecto de las fuentes, debe usar imágenes (y obtener un buen resultado, con razón). Simplemente no es posible lograr una visualización de texto perfecta en píxeles en HTML. Esto comienza con las diferencias en las fuentes que tiene el sistema operativo y termina con las diferencias en los motores de diseño del navegador.
Hay dos maneras de hacerlo:
Básicamente, si quiere que se vea exactamente igual y aún se mantenga conforme a los estándares, esto es realmente casi imposible.
Si está buscando cómo convertir las maquetas de Adobe Photoshop en documentos HTML, debe consultar el screencast series en CSS-tricks.com, dirigido por Chris Coyier, un diseñador con mucho talento (no, no soy yo :)) .
Otra cosa que tendrá que entender es que son las personas con los navegadores web las que finalmente controlan el aspecto de su página. Así que no importa cuánto toqueteos para obtener un sitio web de la manera que desea verlo, se verá de forma diferente en la computadora de otra persona
Si necesita coincidencias de fuente perfectas y claras como el cristal, puede usar flash ... pero eso viene con un montón de inconvenientes.
Nunca obtendrá una combinación perfecta de píxeles entre una maqueta y un navegador. Nunca obtendrás una combinación perfecta de píxeles entre los navegadores. Cuando se trata de renderizar fuentes en aplicaciones, hay dos factores que entran en juego. Windows tiene una representación Subpixel que se puede habilitar en el nivel de la aplicación, las aplicaciones implementarán su propia representación subpixel, la kernel predeterminada de la fuente puede diferir, hasta el infinito ... – MyItchyChin