02. Otras propiedades CSS

background-image: aquí va la ruta donde se ubica la imagen.

background-size:

• contain: Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.
• cover: Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.

background-position: Define la posición inicial de la imagen de fondo.

background-color: En caso de no cargar la imagen carga un color de fondo.

background-attachment: En el caso de fixed la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.

.imagen-fondo {
background-image: url("fondo.jpg");
background-size: cover;
background-position: center center;
background-color: blue;
/* background-attachment: fixed;*/
}

Pasos a seguir:

• Descargar una fuente de www.dafont.com/es o de otra web de tipografías y comprobar que están todos los caracteres.
• Convertir la fuente a varios formatos para que la reconozcan todos los navegadores en www.fontsquirrel.com/tools/webfont-generator
• Guardar en la carpeta fonts de tu proyecto los formatos: TrueType (ttf), EOT Lite, WOFF y SVG
• fontsquirrel genera un codigo, que adaptamos de esta manera:

@font-face{ font-family: 'MIFUENTE'; src: url('../fonts/WEBFONT.eot'); src: url('../fonts/WEBFONT.eot?#iefix') format('embedded-opentype'), url('../fonts/WEBFONT.woff') format('woff'), url('../fonts/WEBFONT.ttf') format('truetype'), url('../fonts/WEBFONT.svg#webfont') format('svg'); }

Donde MIFUENTE es nombre que llamamos a la fuente, WEBFONT es el nombre que trae la fuente que hemos descargado. Adaptamos la ruta en este caso ../fonts/WEBFONT.ttf

• Para llamar a la fuente: desde el html llamar al CSS mediante un selector con la propiedad font-family y el nombre de MIFUENTE

• Este sería un ejemplo:

  CSS
  @font-face { font-family: 'medieval'; src: url('../../fuentes/cardinal-webfont.eot'); src: url('../../fuentes/cardinal-webfont.eot?#iefix') format('embedded-opentype'), local('medieval'), url('../../fuentes/cardinal-webfont.woff') format('woff'), url('../../fuentes/cardinal-webfont.ttf') format('truetype'), url('../../fuentes/cardinal-webfont.svg#webfont') format('svg'); }
  
  .mifuente{ font-family: 'medieval', Arial, sans-serif; }
  
  Html
  <p class="mifuente">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

  En este caso añadimos local('medieval'), para que si el usuario tiene esa fuente instalada no se descargue.

• Ejemplo con código más sencillo que no tiene en cuenta los navegadores más antiguos

@font-face { font-family: MIFUENTE; src: url(webfont.ttf); }

Y bien!!!! aquí tenemos un ejemplo de tipografía descargada e importada con @fontface