Tipos de fuentes en css

Fuentes

Holas 🙂 en css se plantea mucho sobre las fuentes, lo ideal… es usarle las propiedades del css para que se vea bonito al usuario, y para nosotros fácil de manejar.

El css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarlas, no todas :p por que son demasiadas pero si las mas importantes.

Recuerda algo, por el momento no se pueden usar fuentes que el visitante no tenga instaladas, por ejemplo este tipo de letra, es muy bonita y hasta agradable, pero el problema es que si nosotros la instalamos en nuestra pc y trabajamos con css o en html con ese tipo de letra y la subimos a un servidor, esta en NUESTRA PC se va a ver muy bien, el problema es cuando nuestros usuarios abran nuestro sitio web, ellos no verán correctamente por que en la pc del usuario no esta instalada esta fuente.

Por ahora no existe forma de hacer solución a esto, pero lo único que podemos hacer es usar las fuentes default de “windows”, “linux”, “Mac os”, en fin… los sistemas operativos mas usados.

principalmente las fuentes default son:

Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Cada renglón representa un grupo de fuentes, estos grupos están hechos para que tratar de que la web en cualquier sistema operativo sea visible CASI igual, vamos a ver su funcionamiento:

Arial, Helvetica, sans-serif

Si en el sistema operativo no se encuentra ARIAL, el navegador continua con la siguiente, que es Helvatica y si por cuestiones de configuración o lo que sea sigue con sans-serif.

Y que pasa si en el sistema operativo (Mi preferido 😛 Linux! ), no se encuentra ninguna de el grupo de fuentes?, pues muy sencillo el navegador tiene por defecto configurada un tipo de letra… esto permite que se pueda ver sin problemas.

Ahora… ya que sabemos esto, pasamos a la creación de CLASES PARA FUENTES

Lo primero es crear una fuente:

.fuente_titulos{
}

por que le coloque ese nombre?, Recuerda que es mas fácil identificar el css con nombres relacionados, entonces como es un tipo de fuente, entonces se le coloca al comienzo pues FUENTE, recuerda no dejar espacios.

ahora pasamos a crear las propiedades de esa clase, entonces:

.fuente_titulos{
color:#00699C;
font-size:1.1em;
font-family:”trebuchet MS”, Arial, Helvetica, sans-serif;
}

Lo primero, la propiedad COLOR, es lógico, es el color que le queremos darle a la fuente.
En lo segundo hay una parte que necesito hablar con ustedes 😛 , y es relacionada con el tamaño de fuente. En css se admiten varios tipos de “medidas” para el tamaño del texto, una de ellas es el PX, Que muchos lo conocen, 12px, 14px, etc… pero… es recomendable que usemos EM, osea 0.8138 em, 0,7340 em, etc… esto lo explicare mas adelante, pero les voy a dar el truco para usar tamaños en em, todo esta en la conversión. Si ustedes digamos tienen 13 px, para pasarlo a em simplemente cojen y multiplican 13 x 0.0626 , osea cojen el valor en px y lo multiplican por 0.0626, este ultimo valor es un numero que equivale a 1 px, entonces al momento que multiplicamos pues nos da el valor jeje.

Lo tercero es el grupo de fuentes, entonces el dreamweaver ya viene con la opción de colocar las básicas igual arriba ya les escribí cuales son. recuerda que solo se puede declarar un grupo, también puedes crear tus propios grupos, pero estos ya están organizados para que sean compatibles y similares.

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , , , , , , , , , , , , , , ,
Publicado en General
2 comments on “Tipos de fuentes en css
  1. ANTONIO dice:

    Buenos días:

    Buena la explicación que das sobre fuentes en css.

    Podrías explicar mejor lo de la conversión de “em”? Sucede que tomo 13px y lo multiplico por 0,0626, como afirmas, y da 0,8138. ¿Ese es el valor que coloco?: 0,8138em?

    Gracias mil.

    Antonio

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
A %d blogueros les gusta esto: