|
|
Titular: Poner la fuente que quieras en tu pagina Web
Páginas Web
Cuestiones sobre el diseño de páginas web
Fecha de publicación: 2010-05-31 / 18:13:13
articulo con 5839 visitas.
Contiene 2 comentarios.
El contenido ha sido aprobado por
Broco
Premios que ha ganado el artículo:
|
|
 |
|
 |
Poner la fuente que quieras en tu pagina Web
Bueno hay varios problemas a la hora de elegir una buena fuente para tu web, mas que nada por que para que funcione la tiene que tener el usuario instalada esto es un gran problema la hora de diseñar.
pero hay una forma de meter la fuente en la web sin necesidad que el usuario la tenga, para ello tenemos que llamar a la fuente con @font-face con css, pero hay un gran problema que es que FireFox,safari,chrome solo leen fuentes .ttf y IE solo lee .eot, lo único que tenemos que hacer es descargarnos nuestra fuente .ttf de cualquier pagina de descargas de fuentes
y convertirlas a .eot conservando la .ttf evidentemente, una vez tengamos la fuente .ttf vamos a  http://ttf2eot.sebastiankippe.com/ y desde ahí la convertimos a .oet.
Lo que tenemos que hacer es subir las 2 fuentes (.eot y ttf) a nuestro servidor .
Bien ya tenemos la fuente en este caso la mía se llama mifuente.ttf y mifuente.eot por lo que usare este codigo:
Código:
<style>
@font-face {
font-family: mifuente1;
src: url('http://dominio.com//mifuente.ttf');
}
@font-face {
font-family: mifuente2;
src: url('http://dominio.com//mifuente.eot');
}
</style>
Hay que destacar 3 cosas:
1. El enlace tiene que ser completo si ponemos /mifuente.ttf no funcionara, es necesario la URL completa.
2. Hemos metido 2 fuentes por que el navegador primero intentara poner una y si no puede aplicarla pondrá la otra.
3. En font.family emos puesto el nombre que seria "mifuente2 o mifuente1", esto sirve para decirle al navegador que fuente queremos que use, le decimos el nombre y listo
Para decirle al navegador que si no funciona una fuente osea la otra se utiliza una coma, un ejemplo:
Código:
<span style="font-family:mifuente1,mifuente2">Hola Mundo</span>
Como veis he puesto (font-family:mifuente1,mifuente2) la coma es como si fuese una O, le dice ponme mifuente1 o mifuente2...
Bueno espero que os haya servido ;-)
|
 |
|
 |
|
 |
Jesús Rubén
( J35U5R )
  
Karma:
|
Mensajes: 2150
Noticias: 4
Artículos: 4
Juegos: 70
Películas: 6
|
Enlaces: 0
Comentarios: 34
Honor: 288
Popularidad:
200
Discos: 13 |
|
|
|
|
Comentario de articulo 2010-05-31 / 18:16:46 |
|
|
| Comentario de
Jesús Rubén: |
Aprobado por:
<EmilianO> |
Muy buen artículo Broco, hacer que funcione en los 3 principales navegadores es muy importante, creo que lo usaré cuando llegue el momento :-)
+K |
|
|
Mensajes: 294
Noticias: 0
Artículos: 0
Juegos: 2
Películas: 1
|
Enlaces: 4
Comentarios: 11
Honor: 12
Popularidad:
19
Discos: 1 |
|
|
|
|
Comentario de articulo 2010-06-06 / 15:02:00 |
|
|
| Comentario de
tutykeN1: |
Aprobado por:
killbill07 |
|
|
|
Ver más noticias