Machetes, favoritos, opiniones… de un programador
CSS
Inserta cualquier tipografía en tu sitio web usando @font-face
Leo en CSSBlog un interesante artículo sobre cómo usar el elemento @font-face para incrustar y usar cualquier tipografía en tu sitio web.
@font-face es una propiedad muy útil para definir en un sitio web una o más fuentes que el usuario no tenga instalada en su PC. Sólo es necesario subir la fuente a nuestro sitio web y definirla via CSS.
Para el tipo de fuente, puede usarse una en formato OpenType (.otf) o bien en formato Truetype (.ttf). Vemos un ejemplo si quisiéramos usar la tipografía gratuita Myndraine en los titulares H1:
@font-face {
font-family: "Myndraine";
src: url(http://www.fontex.org/download/Myndraine.otf) format("truetype");
}
h1 {
font-family: "Myndraine", Verdana, sans-serif;
}
Y eso es todo. @font-face está soportada por Internet Explorer 7+, Firefox 3.5+ y Safari 3+ .
Via: CSSBlog
Tipografías standard y cómo usarlas en HTML
Muchas veces una tipografía dada nos puede parecer muy bonita, pero a la hora de usarla en el sitio web que estamos armando nos pueden terminar decepcionando. Y es porque se ven distinto según el sistema operativo que usemos. Para evitar esto hay que saber cuales son las tipografías estándares, y sus equivalentes en distintos sistemas operativos.
En la siguiente imagen se pueden ver los equivalentes entre Windows Vista, Windows anteriores y MacOS.
Y a continuación repasamos el código CSS de las tipografías estándares:
Reset de CSS
El objetico de resetear la hoja de estilos es reducir las inconsistencias del navegador en elementos como alturas de línea, márgenes y tamaños de fuente de encabezados… El razonamiento general detrás de esto puede leerse en este post de Meyerweb. Los estilos de reset suelen aparecer en frameworks de CSS.
Los estilos de reset que se presentan aquí son intencionalmente genéricos. No hay un color o fondo predeterminados para el elemento BODY, por ejemplo. Particularmente, no se recomienda usar tal cual en tus propios proyectos: debería ser ajustado, editado, extendido y tuneado para que coincida con la base de reseteado específico que cada diseño requiera.
En otras palabras, es el puntapié inicial, no una caja negra que “se mira pero no se toca”.
Estos estilos de reset son gratuitos y de dominio público. Puede descargarse una copia del archivo para modificarlo a gusto sin problemas. Y si lo prefieren copiar y pegar, a continuación se muestra el código:
