Las fuentes con CSS
Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas.
Podemos cambiar el color, el tipo de fuente, la intensidad, el tamaño, etc.
Para definir el tipo de fuente usamos la propiedad «font-family».
Es recomendable usar un tipo de fuente común, que todos los navegadores reconozcan (ej.:Arial, Verdana, Helvetica, sans serif, etc.).
Propiedad | Descripción | Valores | Detalles | |
---|---|---|---|---|
font | Atajo para establecer el resto de propiedades sobre las fuentes a la vez. | font-style | Estilo de fuente | |
font-variant | Variante de fuente | |||
font-weight | Peso de la fuente | |||
font-size/line height | Tamaño de la fuente | |||
font-family | Familia de fuetes | |||
caption | Fuente a utilizar en los botones, menús desplegables, etc. | |||
icon | Ícono | |||
menu | Fuente de los menús desplegables | |||
message-box | Fuente de las caja de mensajes | |||
small-caption | Pequeña leyenda | |||
status-bar | Fuentes de la barra de estado | |||
font-family | Familias de fuentes. | nombre-familia | Nombre de la familia de fuentes | |
familia-genérica | Familia genérica | |||
font-style | Estilo de la fuente. | normal | Estilo normal | |
italic | Itálica | |||
oblique | Oblicua | |||
font-variant | Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas. | normal | Normal | |
small-caps | Mayúsculas pequeñas | |||
font-weight | Intensidad de la fuente. | normal | Normal | |
bold | Negrita | |||
bolder | Negrita mas fuerte | |||
lighter | Suave | |||
100 | Valor 100 | |||
200 | Valor 200 | |||
300 | Valor 300 | |||
400 | Valor 400 | |||
500 | Valor 500 | |||
600 | Valor 600 | |||
700 | Valor 700 | |||
800 | Valor 800 | |||
900 | Valor 900 | |||
font-size | Tamaño de la fuente. | xx-small | XX-Pequeña | |
x-small | X-Pequeña | |||
small | Pequeña | |||
medium | Mediana | |||
large | Grande | |||
x-large | X-Grande | |||
xx-large | XX-Grande | |||
larger | Máxima | |||
smaller | Mínima | |||
tamaño | Tamaño | |||
% | Porcentaje | |||
font-size-adjust | Especifica un valor de relación para un elemento que preserve la altura de la letra «x» de la fuente elegida en primera instancia en la fuente sustituida. | none | No preserva la altura de la fuente | |
número | número | |||
font-strech | Flexibilidad de la fuente. Expande o comprime horizontalmente la fuente.Nota: por ahora los navegadores no soportan el uso de esta propiedad. | normal | normal | |
wider | expande al siguiente valor | |||
narrower | comprime al siguiente valor | |||
ultra-condensed | ultra comprimido | |||
extra-condensed | extra comprimido | |||
condensed | comprimido | |||
semi-condensed | semi comprimido | |||
semi-expanded | semi expandido | |||
expanded | expandido | |||
extra-expanded | extra expandido | |||
ultra-expanded | ultra expandido |
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Deja una respuesta