Búsqueda personalizada
 
 
 
 
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:

<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 tamao de la fuente (veremos ms adelante otros sistemas de medida), en nuestro caso indicamos en pxeles:

    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 sern ms rellenos). La segunda regla define slo 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 maysculas tipo normal o pequeas.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion