Tipografia para mi web

[laligadelescracho]

Soy principante en el tema y quisiera saber si ahi alguna posibilidad de diseñar mi web con la tipografia MAGNETO ¿como se puede hacer? ya que cuando la subo aparece otra tipografia. Ya se que se debe a que otras compus no tienen la tipografia que yo deseo pero me explicaron que haciendola imagen se puede visualzar pero no me gusta como queda!!! yo quiero esa tipografia en mi web y que todos la puedan ver!! sera que con HTML no se pude realizar lo que yo deseo?? el programa que utilizo para deseñar es DREAMWEAVER 8.
Se los agradecere al que pueda ayudarme!!!

[kazafun]

Hasta ahora no se ha podido, poco a poco se va introduciendo nuevas caracteristicas de CSS y entre ellas font-face que te permitiria usar cualquier tipografia. Hasta ahora el resultado no es del todo satisfactorio por el renderizado de las distintas tipografias, por lo que sigue siendo poco usada. Además de que no es soportado por todos los navegadores.

Es extraño que no te guste como queda en imagen, porque siempre tendrá más calidad que la propia tipografía.
Por supuesto es mas valorable que los contenido sean indexables que sean "bonitos".

Busca en google o en este foro con la keyword "reemplazar texto por imagen", es otra opcion.

[jomaruro]

Hola:

Quizá te interese este hilo de las FAQ's de CSS.

Saludos.

[cristian_cena]

Acepta la sugerencia de jomaruro, el articulo de kseso? no tiene desperdicio. Veras que el autor menciona (al principio) una técnica llamada sIFR, bien, ésta representa otra buena alternativa, que consiste en trabajar con CSS, Flash y JavaScript.

Este artículo también puede serte útil, ya que habla de las fuentes SVG (si no me equivoco kseso? no toca este tema).

Si te interesa el sIFR puedes pasar por estos dos artículos:

- Manual de sIFR paso a paso (fuente: diseñorama)
- sIFR: Tipografías en html (fuente: Unijimpe)

Espero te sirva, Saludos!

p/d: Mira un catálogo de fuentes web. Fuente: blog de Darío Ferrer

[morior]

Yo estuve trabajando en el tema de tener fuentes propias en mi página web y miré el tema ése de font-face kseso, pero después de pasarme una tarde entera dándole y dándole cuando conseguí subir las fuentes al navegador instalaras etc, resulta que sólo se veía bien en firefox y en safari si no recuerdo mal, ni en chrome ni en IE se me veía así que, como comentan por aquí, creo que es algo que aún está por llegar.

[cristian_cena]

Claro, porque "Las fuentes SVG son soportadas por Chrome 0.3+ sin tener que usar un hack de línea de comando, junto con Opera 9 y iPhone OS 3.1." Este es el motivo que me hizo optar por sIFR.

[Carlangueitor]

Yo también optaría por un plugin como cristian_cena, pero yo no elegiría sIRF (basado en flash) yo utilizo Cufon, (con javascript), aunque solo cuando necesito una cantidad considerable de texto en alguna fuente "no segura", normalmente uso imágenes para textos cortos, ¿que tipo de texto es el que vas a usar?

Saludos

[cristian_cena]

Hola carlangueitor, como va:

Iniciado por Carlangueitor

normalmente uso imágenes para textos cortos, ¿que tipo de texto es el que vas a usar?

..y en esos textos cortos usas <img> ? o background-image ? Si usas <img> utilizas el atributo alt?

Estoy pensando implementar cufon ya que por ahi quisiera no tener que depender del plugin, si tienes alguna buena guía a mano te agradecería me la enseñes xD.

Saludos!

p/d: ahh.. sabes que tal se comporta cufon respecto de accesibilidad?, un tema que por ahi se (me) complica con javascript.

[Carlangueitor]

Iniciado por cristian_cena

Hola carlangueitor, como va:


..y en esos textos cortos usas <img> ? o background-image ? Si usas <img> utilizas el atributo alt?

Estoy pensando implementar cufon ya que por ahi quisiera no tener que depender del plugin, si tienes alguna buena guía a mano te agradecería me la enseñes xD.

Saludos!

Todo depende cual es el caso, por ejemplo el logo de una web, en este caso uso img con sus atributos ALT y TITLE, pero claro dentro de un h1 para que no pierda su valor semántico. Sería algo así:

Código html:

<h1><a href="#"><img src="imagen.png" alt="Título de la Pagina" title="Título de la Página" /></a></h1>
 

En un menú lo hago diferente, coloco mi lista desordenada (ul) con enlaces normales dentro de span, les pongo el fondo con background (que además sirve para cuando quiero efectos en hover) y un display none en el span), Sería algo así:

Código HTML:

<ul>
<li><a href="#"><span>Enlace</span></a></li>
</ul>
 

Código CSS:

ul li a{
background: ulr(imagen.png) no-repeat;
display: block;
width: 100px;
height: 20px;
{
ul li a span{
display: none;
}
 

El cufon lo uso por ejemplo en una plantilla de wordpress, ya que puede variar el contenido según el blog (en especial cuando haces plantillas para vender).

Saludos