En Photoshop, ¿puedo exportar fuentes que estén configuradas en ‘fuerte’, ‘nítido’, etc.?

Cada sistema operativo tiene su propia forma de representar las fuentes.

Cada aplicación que ejecute dentro de ese sistema operativo, incluidos los navegadores y Photoshop, puede tener su propia forma de representar las fuentes.

Por lo tanto, cada vez que ve una fuente que se muestra, ya sea en el título de una ventana, el texto en una página web o dentro de Photoshop, hay un código que reinterpreta los datos digitales en el archivo de fuente. Alguien tenía que escribir ese código, cada vez, y tomar decisiones sobre cómo se representaría el archivo de fuente digital en varias pantallas.

En Photoshop, tiene ese agradable menú desplegable que le permite elegir entre algunas variedades de código de representación de fuentes y especificar cómo se representan las fuentes. Strong , Sharp , etc. En la mayoría de los navegadores, solo obtienes lo que ese navegador ofrece, o la representación de fuentes se heredará del sistema operativo, pero no puedes especificar qué código de representación de fuentes se usará.

Por lo tanto, el renderizado de fuentes en Photoshop no es más “artificial” que el renderizado de fuentes en Mac OS X, Windows, Internet Explorer, Firefox, etc. Son solo diferentes partes de código que deciden cómo se renderizará realmente el archivo de fuente digital en su pantalla De alguna manera tiene que pasar de datos en el disco duro a una serie de píxeles que se iluminan, y cada pieza de software que realiza la tarea es diferente.

Como respuesta de Kelly Wirht a In Photoshop, ¿puedo exportar de alguna manera las fuentes que están configuradas en “fuerte”, “nítido”, etc.? señala, usted tiene cierto control sobre la representación de fuentes con las propiedades modernas de CSS (busque “CSS y tipografía” para obtener más información), pero no hay forma de hacer que las cosas se muestren exactamente como Photoshop las representa a menos que trasplante el código de representación de fuentes de Photoshop en todos los navegadores que verán su sitio (lo que obviamente es imposible).

Lo único que puede hacer para obtenerlo exactamente como Photoshop es renderizarlo en Photoshop, guardar archivos de imágenes estáticas y tener un sitio empantanado, de malas prácticas y lleno de imágenes con texto previamente renderizado. Es posible superponer imágenes de texto previamente renderizadas (que son malas) con texto escalable / de búsqueda / seleccionable real (que es bueno) como un truco / solución alternativa, pero obviamente esto todavía es menos que óptimo.

Básicamente, abandonaría la esperanza de hacer coincidir perfectamente Photoshop, en todas partes y siempre, y usar CSS para hacer todo lo posible para que las cosas se vean de la manera que usted desea en la mayoría de los navegadores. Incluso puede encontrar a alguien que tenga un conjunto preestablecido de reglas CSS destinadas a hacer precisamente eso.

Como dijeron Archie D’Cruz y Kevin Gómez, no hay realmente una manera de hacer que las fuentes en una página web se vean exactamente como los archivos PSD. A menos que esté guardando el texto como una imagen, pero creo que hay más desventajas en eso. Guardar texto como una imagen hace que su página web tarde más en cargar, más difícil de responder, peor para el SEO, etc.

Ahora que CSS es tan poderoso, mi recomendación sería usar CSS para que el texto se vea lo más cerca posible del PSD. Incluso si no sabe mucho sobre el lado del desarrollo, puede usar herramientas de desarrollador en Chrome / Safari / Firefox para obtener una vista previa de su CSS.

1. Resalte el texto y haga clic derecho, luego seleccione “Inspeccionar elemento” en el menú.

2. Aparecerá un conjunto de herramientas para desarrolladores. Aquí puede ajustar el tamaño de fuente, el peso, el color, la opacidad, etc. para que se vea más cerca de la versión PSD.

3. Una vez que tenga el aspecto que desea, guarde el CSS en su sitio. O mostrar al desarrollador.


Habiendo dicho todo esto, tenga en cuenta que cada navegador web representará el texto de forma ligeramente diferente. Y los usuarios pueden tener su propia configuración que afecta la forma en que se muestra el texto. Desafortunadamente, es imposible tener un control del 100% sobre cómo se verá exactamente para cada usuario, pero creo que CSS será lo más cerca que pueda estar.

¡Buena suerte!

Bueno, tal como Archie le dijo, los estilos nítidos y fuertes son efectos de fuente especiales que afectan la forma en que Photoshop representa el texto. Lamentablemente, no hay manera de lograr esto usando HTML o CSS en lo que a mí respecta.

Pero aún puede probar algunas alternativas inteligentes, por ejemplo, puede vectorizar las letras con Illustrator (o cualquier otro editor de gráficos vectoriales) y usarlas como imágenes (aunque sería un poco complicado), o incluso crear su propia fuente (I estoy bastante seguro de que es posible, lamentablemente no sé mucho sobre el tema), podría intentar buscar una fuente de estilo similar, hay muchas páginas con muchas fuentes de donde elegir, puede probar estas si lo desea: Fuentes en google.com, Font Squirrel | Fuentes comerciales gratuitas; solo trata de pensar fuera de la caja de una manera que sirva para lograr lo que intentas hacer.

Además, los encontré en una búsqueda rápida en Google, podría ser útil para usted: Usar la imagen de fondo para reemplazar el texto.

Incluso si esto fuera posible, lo mejor que podría esperar sería hacer coincidir la representación de la fuente en su pantalla. Esto no significa que coincidiría con cualquier otro navegador en cualquier otra plataforma, de hecho, casi con seguridad no lo haría.

No estoy seguro de por qué querría de todos modos, porque el tipo, al menos el tamaño del texto, generalmente es más legible cuando lo representa el navegador que en el archivo .psd original.

A menos que esté utilizando el tipo como píxeles (es decir, no representados como tipo sino como imágenes), no estoy seguro de que exista un punto para exportar fuentes como las ve en Photoshop.

Los estilos disponibles en Photoshop (fuerte, nítido, etc.) son “artificiales”, al igual que el antiguo “falso falso” de Quark XPress … no se pueden representar como vectores en la forma exacta en que se ven en la pantalla.

Además, cada navegador web tiene su propio motor de representación de fuentes que hace que el tipo se vea un poco diferente de todos modos, por lo que puede ser un poco demasiado esperar que se vea igual que en Photoshop.