Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 139

Visitas el mes pasado: 191

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (X)

Tipos de letras

imagen css3

Problemas con el tipo de letra

Uno de los problemas típicos de los diseñadores está en elegir el tipo de letra que aparecerá en las distintas secciones de la página. El problema está en que el estilo de letra o fuente (indicada por la propiedad font-family), es tomada del ordenador del usuario, por lo que si el usuario no tiene instalado ese tipo de letra, el navegador tomará otro por defecto, con lo que la página no se verá tal y como queremos que se vea.

Esto tiene solución en CSS3, donde podemos poner un tipo de letra aunque el usuario no la tenga instalada en su ordenador. Para ello debemos incluir el archivo con el tipo de letra en nuestra página.

Archivos de fuentes.

Tal como hemos dicho anteriormente, lo primero que debemos hacer para incluir un tipo de letra que suponemos que no tiene instalada el usuario en su ordenador, es incluir el archivo que contiene ese tipo de letra a nuestra página.

Supongamos que en nuestro ordenador (con S.O. windows) hemos visto en un procesador de textos (Microsoft Word, por ejemplo) un tipo de letra que nos interesa para nuestra página. Lo primero que debemos hacer es copiar el archivo con el tipo de letra (fuente) en nuestra página, normalmente en la carpeta "objetos" donde guardamos imágenes y otros elementos adicionales de la página.

Necesitamos, en primer lugar localizar el archivo de la fuente. Para ello nos fijamos en el nombre que tiene ese tipo de letra por ejemplo "Poor Richard", (he elegido este tipo de letra porque lo tengo yo en mi ordenador, pero podía haber elegido cualquier otro.).

Windows guarda los archivos de fuentes en la siguiente carpeta: MiPC/WINDOWS/Fonts. Si abres esta carpeta verás que están ahi todos los archivos de fuentes. Localizamos el archivo que tiene el mismo nombre que la fuente. En la barra superior pulsamos en "edición / copiar". Una vez copiado lo pegamos en la carpeta "objetos" de nuestra web.

si quieres puedes cambiarle el nombre al archivo (para quitar espacios en blanco o caracteres raros que no se admiten en enlaces). El archivo con la fuente ya está en nuestra web, ahora debemos asociar mediante CSS la fuente (font-family) al texto.

La regla @font-face

Para que la página reconozca el archivo de fuente como un tipo de letra, utilizaremos la regla @font-face de la siguiente manera:

@font-face { font-family: <nombre>; scr: url(<ruta>);}

@font-face no es una propiedad, sino una regla completa en la que @font-face actúa como selector. Dentro de los corchetes incluiremos las siguientes propiedades:

Para incluir la fuente anterior "poorRichard" en la página escribiremos en CSS:

@font-face { font-family: mifuente; src: url(objetos/poorRichard.ttf }

Después ya podemos utilizar el nombre de fuente como valor para la propiedad font-family:

p { font-family: mifuente; }

El nuevo tipo de letra se verá en todos los navegadores, excepto en Internet Explorer, esto es debido a que Internet Explorer sólo reconoce los archivos de fuente con la extensión .eot; Además los I-phone y los i-pad necesitan también los archivos de fuentes con otra extensión: .svg. Ocurre que la mayoría de los archivos de fuentes tienen la extensión .ttf ó otf. Debemos pues convertir el archivo de fuente a los formatos eot y svg.

Conversión de tipos de fuentes.

Para convertir un tipo de fuente a otro nesesitamos alguna herramienta como un programa o una aplicación que nos haga este trabajo. Una de las mejores herramientas la tenemos en la web, en la página @fonface Generator.

Al abrir esta página vemos un recuadro como este:

convertidor de fuentes

Pulsamos en el botón "Add Fonts" y nos sale un cuadro de búsqueda, en el que buscamos el archivo de fuente en nuestro ordenador, y lo mandamos a la página. Si en la página no aparece el botón "add fonts" prueba a abrir la página con otro navegador. (en Firefox y Opera es posible que no se vea el botón).

Una vez mandado marcamos el botón "Agreement:", y en la parte de debajo del cuadro saldrá un botón de descarga. Descargamos y guardamos el archivo.

El archivo descargado es un archivo comprimido tipo .zip; Lo descomprimimos (mediante WinZip o WinRar), y vemos que consta de varios archivos de fuentes en distintos formatos, y además tiene un archivo CSS con el código de la regla @font-face lista para que se vean las fuentes en todos los navegadores.

Podemos simplemente copiar los archivos de fuentes en nuestra página, y despues añadir el archivo CSS al nuestro, hay que tener cuidado de que si cambia la ruta hacia los archivos, debemos cambiarla también en las "url" del archivo CSS.

Podemos también copiar los archivos de fuentes y crear nosotros nuestras propias reglas @font-face

Además en este mismo sitio tenemos una gran cantidad de fuentes listas para ser descargadas, para ello en la barra superior pulsa en la pestaña "find fonts". Aparece una página con cientos de modelos de fuentes. Para descargar el archivo zip con los tipos de extensiones, pulsa encima de cualquiera de ellas en "Get Kit".

Ejemplo de párrafo con fuentes propias.

Siguiendo los pasos anteriores hemos cogido el tipo de letra "Poor Richard" y hemos hecho la conversión en "@font-face Generator", después hemos copiado los archivos con extension .ttf, .eot y .svg en la carpeta objetos de nuestra web.

Después creamos el código CSS para poder ver el texto de la caja de abajo con este tipo de letra.

@font-face { font-family: miletra; src: 
             url(objetos/poorrich-webfont.ttf); }
@font-face { font-family: miletraIE; src: 
             url(objetos/poorrich-webfont.eot); }
@font-face { font-family: miletraIphone; src: 
             url(objetos/poorrich-webfont.svg); }
#capa1 { width: 500px; border: 1px solid blue; }
#capa1 p { font: normal 1em miletra, miletraIE, miletraIphone; }

El resultado de aplicar el código anterior es el siguiente: El tipo de letra de este texto se verá igual en todos los navegadores, incluidos los I-pad e I-phone.


En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.






En la siguiente página veremos Un nuevo modelo de distribuir los elementos tanto en la página como dentro de un bloque. El modelo de cajas flexibles.

Cajas Flexibles



Manual de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com