Descubrir tipo de letra empleado en web

[plomez]

Hola a todos, a ver si podéis echarme un cable con una página web en la que emplean un tipo de letra a mi parecer no estándar y que me gustaría descubrir cómo lo hacen. La web en cuestión es [URL="http://css-tricks.com/perfect-full-page-background-image/"]ésta[/URL]. Y el tipo de letra al que me refiero se encuentra en los "nickname" de los comentaristas justo debajo del artículo. Si me guardo la página y la visualizo desde mi Pc el tipo de letra desaparece. ¿Cómo diantres han logrado ese efecto? Por cierto, grandes las diferencias al visualizarlo en Firefox o Internet Explorer:

Firefox:
[URL=http://img814.imageshack.us/i/66997610.jpg/][IMG]http://img814.imageshack.us/img814/8472/66997610.th.jpg[/IMG][/URL]


Internet Explorer:
[URL=http://img510.imageshack.us/i/94041526.jpg/][IMG]http://img510.imageshack.us/img510/3364/94041526.th.jpg[/IMG][/URL]

[Manuellama]

http://www.fonts.com/findfonts/Detai...oductId=378963

Tandelle Font Family 24px

http://www.fonts.com/findfonts/Detai...378963#tryfont

[quinqui]

Hola, plomez

Cuando quieras averiguar los efectos de una página, utiliza el visor de código fuente de tu navegador, de modo que podrás ver los estilos (STYLE) que estén directos en la página, y/o el enlace a el o los archivos CSS que generan el estilo de la página.

Por ahora, utilizando ese medio, yo encontré en una de las hojas CSS del sitio web esto:

Código css:

cite {
 display:block;
 margin-top:3px;
 font-family:"tandelle-1","tandelle-2",HelveticaNeue,Helvetica,Arial,serif;
 text-transform:uppercase;
 font-style:normal;
 color:black;
 font-size:24px }
 

Como la fuente que utilizan es esa "tandelle", debieras buscarla y subirla a tu servidor también para que tus páginas la carguen.

Saludos!

Editado: Y ahí Manuellama te ha dejado el link para encontrar la fuente :)

[plomez]

Iniciado por Manuellama

[url]http://www.fonts.com/findfonts/Detail.htm?ProductId=378963[/url]

Tandelle Font Family 24px

[url]http://www.fonts.com/findfonts/Detail.htm?ProductId=378963#tryfont[/url]

Gracias por la pronta respuesta. Veo que has localizado el tipo de letra, pero sigo sin saber cómo puedo utilizarla yo en una web. Hasta ahora pensaba que la única manera de emplear fuentes no estándar era sustituyéndolas por imágenes. ¿Se trata de algún servicio que ofrece fonts.com?

Gracias de nuevo

[plomez]

Iniciado por quinqui

Hola, plomez

Cuando quieras averiguar los efectos de una página, utiliza el visor de código fuente de tu navegador, de modo que podrás ver los estilos (STYLE) que estén directos en la página, y/o el enlace a el o los archivos CSS que generan el estilo de la página.

Por ahora, utilizando ese medio, yo encontré en una de las hojas CSS del sitio web esto:

Código css:

cite {
 display:block;
 margin-top:3px;
 font-family:"tandelle-1","tandelle-2",HelveticaNeue,Helvetica,Arial,serif;
 text-transform:uppercase;
 font-style:normal;
 color:black;
 font-size:24px }
 

Como la fuente que utilizan es esa "tandelle", debieras buscarla y subirla a tu servidor también para que tus páginas la carguen.

Saludos!

Editado: Y ahí Manuellama te ha dejado el link para encontrar la fuente :)

Ya lo intenté, pero el código de esa página es inmenso. No tengo la habilidad que me demostráis vosotros :P

Con el último párrafo me estás diciendo que existe la posibilidad de que yo suba cualquier tipo de fuente al servidor donde la tengo alojada y podría ser capaz de que cualquiera que visitara mi web podría verla con ese tipo de letra?

[quinqui]

Iniciado por plomez

Con el último párrafo me estás diciendo que existe la posibilidad de que yo suba cualquier tipo de fuente al servidor donde la tengo alojada y podría ser capaz de que cualquiera que visitara mi web podría verla con ese tipo de letra?

Mmh, pues en teoría, si ellos lo lograron.... Yo que tú hago la prueba :)

[plomez]

Iniciado por quinqui

Mmh, pues en teoría, si ellos lo lograron.... Yo que tú hago la prueba :)

jejje, no seas malote. Si sabes el secreto dime que me tiene intrigado el tema.
A la noche probaré que ahora me tengo que marchar. Me has dejado con la mosca...

[Manuellama]

http://xa.ly/oSf

Ahí tienes la fuente Tandelle.
:)

http://www.fontsamurai.com/2007/04/tandelle.php De ahí la saqué.

[emprear]

Están utilizando @font-face con una fuente aparentemente llamada "myriad-pro"
Buscando por ahi encontré un directorio web con numerosas variantes de esa fuente

http://greatersharpstown.com/fonts/fonts/

algunos elemento tiene aplicada la propiedad css text-shadow

Saludos

[plomez]

Gracias a todos por vuestras respuestas. Lo que a mí realmente me intriga, independientemente de la fuente utilizada, es saber cómo consigue insertar un tipo de fuente no estandar y que se vea en todos los ordenadores, cuando supuestamente éstos no la tienen instalada. ¿Alguien sabría decírmelo?

[emprear]

Justamente es lo que te he dicho, es una propiedad CSS llamada @font-face

andá a http://www.fontsquirrel.com/
y ahi mismo, generá tu propio "kit" de fuentes, o descarga alguno de los "prefabricados". (esta última opción es la mejor para ver el funcionamiento)

Una vez descargado el zip, extraelo y mirá el ejemplo que incluye, el resto está en el código fuente


Saludos

[plomez]

Iniciado por emprear

Justamente es lo que te he dicho, es una propiedad CSS llamada @font-face

andá a [url]http://www.fontsquirrel.com/[/url]
y ahi mismo, generá tu propio "kit" de fuentes, o descarga alguno de los "prefabricados". (esta última opción es la mejor para ver el funcionamiento)

Una vez descargado el zip, extraelo y mirá el ejemplo que incluye, el resto está en el código fuente


Saludos

Gracias emprear, no había entendido que era eso lo que querías decirme. Lo estudiaré mañana que ahora se me cierran los ojos de cansancio. Prometo decir algo ;)

[plomez]

Qué grande eres emprear!! Si señor!! me acabas de abrir un mundo nuevo

He descargado un kit de los que vienen preparados y lo he probado en mi pc. Funciona. Seguidamente lo he subido al sitio web y... FUNCIONA!!

Y lo mejor es que parece que permite también, además de las fuentes que ya hay, utilizar cualquiera que se me antoje. Genial!! muchísimas gracias de nuevo.

[emprear]

De nada colega:

Y tene en cuenta que con las .eot y las .ttf te va a funcionar en todos los navegadores (ttf para FF, Opera, chrome, Safari y .eot para IE), los otros formatos, woff, svg son prescindibles


Saludos

[plomez]

Iniciado por emprear

De nada colega:

Y tene en cuenta que con las .eot y las .ttf te va a funcionar en todos los navegadores (ttf para FF, Opera, chrome, Safari y .eot para IE), los otros formatos, woff, svg son prescindibles


Saludos

¿y esto desde cuándo existe? yo llevo unos cuantos años desconectado del mundo de las páginas web. De cuando se utilizaban tablas para estructurar el contenido. Ahora todo se realiza mediante etiquetas DIV y estilos CSS y me encuentro algo perdido. Estoy buscando un tutorial que no esté desfasado donde poder meterme de lleno con esta nueva manera de realizar las webs. ¿Me aconsejáis alguno? Muchísimas gracias una vez más.

[emprear]

Eso existe desde hace bastante, estaba en Css 2.0, en el 2.1 lo quitaron, despues estaba el tema de que navegador lo reconocía y como crear las fuentes, que era toda una historia, en IE y con un programa llamado WFET o algo asi, se podían usar... pero bueno, todo eso ya es historia, ahora existe en Css 3 y como viste, crear las fuentes es una cosa simple y los browsers la soportan todos. Incluso IE6.


Por lo de aprender, si como decis ya tenés experiencia con tablas en el diseño web, par hacer la transición concentrate en como posicionar Divs y en el uso de floats, una vez que tenes resuelto eso, lo demás viene solo.

http://www.wmasterfacil.com/0033maquetacion.html
http://www.barelyfitz.com/screencast...s/positioning/
http://www.luiscanada.com/manualCSS/...nto-9pasos.php

Saludos

[disenodepaginas]

muy buenos los links de maquetacion. gracias !

[plomez]

Muchas gracias emprear por las molestias tomadas . Me has sido de gran ayuda. Revisaré esas páginas que has compartido que tienen una pinta muy buena.

Poquito a poco y buscando tiempo libre seguro que termino cogiéndole el truquillo.