Vieites: /* font */

2010-01-13T11:06:31Z

font

Página nueva

As follas de estilo nos permiten total control sobre o formato do texto nas páxinas web. Vexamos as propiedades CSS 2 relacionadas có texto:

== font-family ==
Especifica a fonte (ou lista de fontes). Exemplos:
<source lang="css">
h1 {font-family: Arial; }
#cabeceira {font-family: Courier, monoespace; }
p.nova {font-family: "Trebuchet MS", Verdana, sans-serif; }
</source>
: Hai que darse conta que o tipo de letra elixido debe estar instalado no equipo cliente. Polo que, se intentamos escoller un tipo de letra "raro", é interesante acudir ao seguinte [http://www.microsoft.com/typography/fonts/ recurso en liña de Microsoft], onde podemos atopar as fontes que se instalan por defecto có Windows, cós programas de Microsoft,... Ademáis de enlaces os tipos de letra que ten un equipo por defecto se ten instalado un Macintosh OS X, sistema UNI,...

== font-size ==
Este atributo configura o tamaño do texto.

Mentres que o HTML estándar prevé tan só 7 niveles predefinidos para o tamaño do texto, as follas de estilo CSS permiten un control moito mais preciso e elástico, sen limitacións.
* '''Pulgadas:''' A súa abreviatura é '''in''', clásica unidade de medida, en web case non se emprega.
<source lang="css">
body { font-size:15in; }
</source>

* '''Centímetros:''' A súa abreviatura é '''cm''', unidade de medida común en moitos países occidentais pero pouco na web.
<source lang="css">
body { font-size:10cm; }
</source>

* '''Píxel:''' A súa abreviatura é '''px''', trátase dos puntos da pantalla do ordenador, e hai que ter en conta que varían segundo a resolución do monitor configurada polo usuario.
<source lang="css">
body { font-size:15px; }
</source>

* '''Puntos:''' A súa abreviatura é '''pt'''. Cada punto representa 1/72 de pulgada mais ou menos. Os puntos refírese ó espazo vertical ocupado en pantalla, mentres que a anchura aumenta en proporción ó aumento da altura.
<source lang="css">
body { font-size:15pt; }
</source>

* '''Porcentaxe:''' A súa abreviatura é '''%''', unidade de medida variable sen valores predeterminados. O valor porcentual refírese ao tamaño por defecto aplicado no navegador.
:: Así, nun navegador que visualiza por defecto fontes de 14 píxeles, un valor do 200% corresponde a 28 píxeles. Dita medida pode variar de usuario a usuario, dependendo da resolución do navegador.
<source lang="css">
body { font-size:200%; }
</source>
:: A medición porcentual forma parte dun sistema de proporcións relativas, é dicir, que depende do tamaño configurado no navegador.
:: Comentar que tamén existen outros valores que poden substituír ao de porcentaxe: ''smaller'', ''larger''.
*'''em:''' Unidade de medida relativa que equivale ao porcentaxe da letra que por defecto mostraría o navegador, é dicir, 1em é igual ao tamaño da letra por defecto. Nos navegadores este tamaño é de 16px, polo que temos que 1em = 16px.
<source lang="css">
h1 {font-size:2.5em}
p {font-size:0.875em}
</source>

:: '''A mellor solución de traballo será configurar un tamaño por defecto en tanto por cento, e para cada elemento da páxina configurar o tamaño en ''em''.'''
<source lang="css">
body {font-size:100%; }
h1 {font-size:2.5em; }
p {font-size:0.875em; }
</source>

== font-weight ==
Este atributo '''''font-weight''''' establece o espesor ou intensidade das fontes, como '''''<b>''''' para o HTML clásico. É posible asignar ata 7 valores diferentes: ''normal'', ''bold'', ''bolder'', ''lighter'', ''100'', ''200'', ''300'', ''400'', ''500'', ''600'', ''700, ''800'' ou ''900''

== font-style ==
Este atributo indica o estilo para a fonte. É posible asignar tres valores distintos:
* '''''normal'' : '''Normal non visualiza ningún estilo particular e toma o estilo definido por defecto no navegador. É posible usar "Roman" en lugar de normal.
<source lang="css">
<style>
body { font-style:normal }
</style>
</source>

* '''''italic'' : '''O típico texto en cursiva que xa coñecemos do HTML clásico (''<i>'').
<source lang="css">
<style>
BODY { font-style:italic }
</style>
</source>

* '''''oblique'' : ''' Este atributo funciona aparentemente como "italic".
<source lang="css">
<style>
body { font-size:oblique }
</style>
</source>

== font-variant ==
Este atributo é similar a '''''font-size''''', pero diferénciase por asignar un estilo todo en maiúsculas se se lle da o valor '''''small-caps'''''. Se non está dispoñible na máquina cliente a versión en maiúsculas grandes das fontes, o estilo empregará as maiúsculas adaptando as medidas. Os valores posibles que se poden asignar son '''''normal''''' e '''''small-caps''''', para o valor "normal" o texto non aparecerá en maiúsculas, aparecerá "normal".
<source lang="css">
<style>
body { font-variant: small-caps; }
</style>
</source>

== font ==
A propiedade '''''font''''', permítenos establecer tódolos atributos do tipo de letra nunha soa declaración. Así esta propiedade engloba as seguintes: ''font-style'', ''font-variant'', ''font-weight'', ''font-size/line-height'', ''font-family'', ''caption'', ''icon'', ''menu'', ''message-box'', ''small-caption'' e ''status-bar''.
As súa sintaxe será así:
<source lang="css">
font: [<font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
</source>
:: Se se omite o tamaño, ''font-size'', ou o tipo de letra, ''font-family'', ou se intercambia a súa posición, a declaración da propiedade ''font'' é incorrecta e se ignora o seu valor:

Vexamos varios exemplos:
<source lang="css">
p { font: 12px arial; }
p { font: italic small-caps bold 12px arial; }
p { font: oblique small-caps 900 12px/14px arial; }
p { font: menu; }
p { font: 80% sans-serif; }
p { font: x-large/110% "new century schoolbook", serif; }
p { font: bold italic large Palatino, serif; }
p { font: normal small-caps 120%/120% fantasy; }
</source>

== text-decoration ==
Este atributo permite adorna-lo texto con subliñados e outros efectos. Pode asumir distintos valores (''none'', ''underline'', ''overline'', ''line-through'', ''blink'' e ''inherit''):

<source lang="css">
body { text-decoration: none; }
body { text-decoration: underline; }
body { text-decoration: line-through; }
body { text-decoration: blink; }
</source>

Outro efecto de moda últimamente, é o de eliminar os subraiados nos enlaces. Para elo, é necesario emprega-lo seguinte código:
<source lang="css">
a { text-decoration: none; }
</source>

En base o exemplo anterior, pódese programar que o subliñado soamente apareza cando pasamo-lo rato por riba do enlace:
<source lang="css">
a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
</source>

Deste xeito, cando o hiperenlace está inactivo non aparecerá subliñado, mentres que cando o rato toca o enlace o subliñado será activado.

== text-transform ==
Esta propiedade controla as letras nun elemento.

<source lang="css">
p { text-transform: uppercase; }
</source>

Valores posibles da propiedade '''''text-transform''''':
* '''''none'' : ''' Por defecto. Define texto normal, con maiúsculas e minúsculas.
* '''''capitalize'' : ''' Cada palabra no texto comezará con maiúsculas.
* '''''uppercase'' : ''' Tódalas palabras do texto aparecerán en maiúsculas.
* '''''lowercase'' : '''Tódalas palabras do texto aparecerán en minúsculas.

== line-height ==
Esta propiedade establece a distancia entre liñas.

<source lang="css">
p { line-height: 1.4; }
p { line-height: 14pt; }
p { line-height: 140%; }
</source>

Valores posibles:
* '''''normal'' : ''' Valor por defecto. Establece a distancia normal entre as liñas.
* '''''number'' : ''' Este número será o factor de multiplicación respecto ao tamaño '''''font-size''''', dando como resultado a distancia entre liñas.
* '''''length'' : ''' Establece unha distancia fixa entre as liñas.
* '''''%'' : ''' Establece unha distancia proporcional (%) respecto a '''''font-size'''''.

== text-indent ==
Esta propiedade identa a primeira liña de texto nun elemento.

Exemplo:
<source lang="css">
p { text-indent: 20px; }
p { text-indent: -12px; }
</source>

Valores posibles:
* '''''length'' : ''' Define unha identación fixa. O valor por defecto é 0.
* '''''%'' : ''' Define a identación en porcentaxe % respecto ó ancho do elemento pai.

== text-align ==

Esta propieda estable a alineación do texto:

<source lang="css">
p { text-align: center; }
</source>

Valores posibles:
* '''''left'' : ''' Fai alineación do texto á esquerda.
* '''''right'' : ''' Fai alineación do texto á dereita.
* '''''center'' : ''' Centra o texto.
* '''''justify'' : '''Alineación por ambos lados.

== letter-spacing ==
Esta propiedade incrementa ou decrementa o espaciado entre caracteres.

<source lang="css">
p { letter-spacing: 12px; }
p { letter-spacing: -0.5px; }
</source>

Posibles valores:
* '''''normal'' : '''O valor por defecto.
* '''''length'' : '''Define un espaciado fixo entre caracteres.

== white-space ==
Esta propiedade permítenos establecer como se xestiona os espacios en blanco nun elemento.

<source lang="css">
p { white-space: normal; }
</source>

Posibles valores:
* '''''normal'' : ''' Por defecto. Os espacios en branco adicionais son ignorados polo navegador.
* '''''pre'' : ''' Os espacios en branco adicionais son utilizados. Equivale ao emprego da marca '''''pre''''' no html.
* '''''nowrap'' : ''' Non se produce axuste de liña automática. Esto quere dicir que o texto permanecerá na mesma liña ata que atopemos unha marca '''''<br />'''''.

== direction ==
Esta propiedade establece en que dirección se escribe o texto.

<source lang="css">
div { direction: rtl; }
</source>

Posibles valores:
* '''''ltr'' : ''' Por defecto. O texto escríbese de esquerda a dereita.
* '''''rtl'' : ''' O texto será escrito de dereita a esquerda.

--[[Usuario:Vieites|Manuel Vieites]] e -- [[Usuario:Veiga|Rafael Veiga]] feb 2008

Propiedades de fonte e texto - Historial de revisiones

Vieites: /* font */