No es un bug, es una característica no documentada

viernes, 9 de enero de 2015

Lenguajes de marcas. CSS (IV)

13:33 Posted by Inazio , No comments
Vamos a ver como podemos incrustar texto con diversas fuentes en nuestra página web.

Antes se usaban "fuentes seguras", como Helvética, Arial, y en todo caso a lo mejor Sans-serif

font-family: arial, helvetica, sans-serif

En este caso el navegador usaba primero la arial, si no la tiene la helvetica, y si no una cualquiera sin serifear.

Ahora podemos usar un código especial para cargar una fuente en la página web, que se descargará al ordenador del usuario.

Es @font-face (el arroba indica que declararemos una nueva fuente).

Es decir:


Y posteriormente hacer referencia al parrafo donde aplicar esta fuente:


Código para usar en la web:

@font-face {
  font-family: 'Akronim';
    src: url('fonts/Akronim-Regular.eot'); /* Para Internet Explorer */
    src: local('Akronim'), /* Para el resto de navegadores */
         url('fonts/Akronim-Regular.ttf') format('truetype'),
         url('fonts/Akronim-Regular.woff') format('woff'),
         url('fonts/Akronim-Regular.svg') format('svg')
}

p {
    font-family: 'Akronim', cursive;
    font-size:1.5em;
}

/* dafont.com para conseguir fuentes */

Para la práctica de hoy nos descargaremos una fuente X para realizar la prueba


y en el css de nuestra página, escribimos lo siguiente:


y para que afecte sólo a lo que queremos:


Y ya podemos ver el resultado por pantalla


0 comentarios:

Publicar un comentario