Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


4 - Propiedades relacionadas a fuentes.







Contamos con una serie de propiedades relacionadas a fuentes:

font-family
font-size
font-style
font-weight
font-variant

Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
h2 {
font-family:verdana;
font-size:20px;
}
</style>
</head>
<body>
<h1>Titulo de nivel 1</h1>
<h2>Titulo de nivel 2</h2>
</body>
</html>

Como podemos observar, hemos definido dos reglas de estilos para las marcas h1 y h2, eso significa que el navegador utilizará esas reglas de fuentes para todas las partes de la página que se utilicen dichas marcas HTML.

La primera regla definida para la marca h1 es:

h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}

Recordemos que para definir la regla de estilo debemos indicar el nombre de la marca HTML a la que definiremos el estilo y luego, entre paréntesis, todas las propiedades y sus valores separados por punto y coma.

La primera propiedad inicializada es font-family, algunas de las fuentes más comunes que puede acceder el navegador son:

Arial
Arial Black
Arial Narrow
Courier New
Georgia
Impact
Tahoma
Times New Roman
Verdana

En caso que la fuente no esté disponible el navegador selecciona el estilo por defecto para esa marca HTML.

Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha):

font-family: verdana, arial, georgia;

La segunda propiedad inicializada es font-size, hay varias medidas para indicar el tamaño de la fuente (veremos más adelante otros sistemas de medida), en nuestro caso indicamos en píxeles:

font-size:30px;

La tercera propiedad es font-style, que puede tener los siguientes valores :

normal
italic
oblique

La última propiedad es font-weight, pudiendo tomar los siguientes valores:

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres serán más rellenos).




La segunda regla define sólo dos propiedades relacionadas a la fuente:

h2 {
font-family:verdana;
font-size:20px;
}

Las propiedades que no se inicializan quedan como responsabilidad al navegador, quien elegirá los valores correspondientes.




Existe una última propiedad no utilizada en este ejemplo que es font-variant que puede asumir estos dos valores:

small-caps
normal

Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.









Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría CSS

  • Medallas
  • 0
    Favoritos
  • 9855
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados