[SOLUCIONADO] Texto en imagen que no se deforme al redimensionar

[Kadmon]

Buenas,

Tengo una web cuyo título "El nombre de la web" está colocado en la cabecera escrito en Monotype Corsiva y para que se muestre con esa fuente hago uso de las web fonts.

El problema es que me parece una tontería cargar toda una fuente para cuatro letras que quiero mostrar con esa fuente. Por eso pensé en crear una imagen con ese rótulo escrito.

El problema de la imagen es que se ve bien cuando se muestra a su tamaño normal pero se ve mal, se ven las letras dentadas, cuando se redimensiona para adaptarse a los distintos tamaños de pantalla y dado que la web se ve en ordenadores, tabletas, teléfonos... es necesario redimensionar.

Mi pregunta es ¿cómo se puede poner el rótulo en un formato escalable y que no se deforme?

La forma que encontré fue poner el rótulo en texto en vez de como imagen y cargar la fuente pero para cuatro letras me parece una tontería cargar una fuente entera.

Otra forma que se me ocurre es la de reducir el tamaño del archivo de la fuente, si es que se puede.

[xfxstudios]

Primero que nada tienes que tomar en cuenta que la imagen se va a re-dimensionar, lo cual te va a traer problemas si no cuentas con tamaños que se adapten a las distintas posibles resoluciones, podrías intentar utilizar un svg, el cual se adapta a cualquier resolución y mantiene la calidad.

MUESTRA

[Kadmon]

Gracias. Estuve mirando tu ejemplo pero el problema que le encuentro es que sigo necesitando de la fuente. En tu caso usas Verdana que la tiene la mayoría de dispositivos, pero yo quisiera usar Monotype que la tiene windows pero android, p ej, no, y el logotipo se vería con otra fuente distinta.

[g3kdigital]

Tienes que transformar el texto o tipografía en curvas y exportarlo en formato SVG.

Lo puedes hacer usando un software de edición vectorial como inkscape que es libre o illustrator.

Pasarlo a curvas, básicamente significa que el texto deja de ser editable y se convierte en solo formas vectoriales complejas o paths. Como en esta imagen SVG: http://grafinetsa.gutierrezedgar.com...t-animated.svg

Lo otro que se me ocurre es que solo uses esas cuatro letras en el archivo de fuente, es algo de más nivel que veo innecesario para 4 letras, pero eso sí, disminuye el tamaño del archivo tipográfico, esto lo puedes hacer exportando cada letra en un svg distinto y subirlo a fontastic.me o alguna otra página que te permite editar tipografías para usarlas en forma de iconos.

[Kadmon]

Iniciado por g3kdigital

Tienes que transformar el texto o tipografía en curvas y exportarlo en formato SVG.

Gracias, ahora sí. Lo hice con Inkscape.

Y ya de paso probé lo de reducir el archivo fuente con FontForge, borrando los caracteres que no necesito.

Perfecto, gracias a los dos.

[Rafael]

Pero si ya lo estás haciendo en inkscape conviértelos a trazos para que ya no necesites la fuente para nada. Esto va a mejorar un poquito tu página ya que no vas a hacer una doble solicitud al servidor. Uno para el archivo y uno para la fuente, o lo que es peor, una solicitud para cada letra.

Toca tu texto > Trayecto > Objeto a trayecto.

Listo ya no hay fuentes que ligar.

[Kadmon]

Iniciado por Rafael

Pero si ya lo estás haciendo en inkscape conviértelos a trazos para que ya no necesites la fuente para nada.

Sí, así lo hice. Lo de reducir la fuente fue para ver como se hacía.

Aunque reduciendo la fuente sería una sola petición: escribo el texto en el cuerpo del html (<h1>aquí el texto</h1> ) y en el css enlazo la fuente:

@font-face {
[..]
url('../fuentes/MTCORSVA.woff') format('woff')
[..]
}