CSS también proporciona numerosas propiedades para personalizar el tipo de letra. Éstas van desde el tipo de letra hasta el estilo y las sombras.
Las propiedades de fuente de CSS incluyen información sobre la fuente, el estilo de fuente y el peso de la fuente. Por supuesto, estas propiedades son útiles sobre todo para los elementos HTML que contienen texto(p, i, etc.). Sin embargo, también pueden utilizarse para tablas.
El tipo de letra a utilizar puede determinarse mediante font-family.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutoriales.es</title> <meta charset="UTF-8" /> <style> p {font-family:verdana, Serif;} h1 { font-family: "Courier New", Courier, monospace; } </style> </head> <body> <div> <h1>PSD-Tutorials.es</h1> <p>Este es un párrafo con una <strong>palabra en negrita</strong>.</p> <h2>Este es un encabezado con una <strong>palabra en negrita</strong>.</h2> </div> </body> </html>.El resultado se ve así en el navegador:
Las fuentes típicas son, por ejemplo, Arial, Helvetica y Tim Roman. Los tipos de letra deseados se asignan a la propiedad CSS font-family. Si especifica varias fuentes, el orden es decisivo. Si la primera fuente especificada está disponible, se utilizará. Los tipos de letra deseados deben separarse entre sí mediante comas. La última instrucción suele ser una familia de fuentes genérica. Una familia de fuentes genérica de este tipo ofrece a los navegadores la posibilidad de seleccionar una fuente al menos similar a la especificada.
- serif = un tipo de letra con gracias
- sans-serif = un tipo de letra sin gracias
- cursiva = fuente para escritura cursiva
- fantasy = un tipo de letra para escritura inusual
- monospace = un tipo de letra con caracteres de igual grosor.
El estilo de fuente
Puede utilizar la propiedad font-style para determinar el estilo de la fuente. Si la fuente seleccionada lo permite, puede utilizar el valor italic para forzar una fuente cursiva.
Otras fuentes pueden ser inclinadas usando oblicua.
La siguiente propiedad CSS que se puede utilizar para influir en el tipo de letra se llama font-variant. Puede utilizarse para definir versalitas.
Para ello, asigne el valor small-caps a font-variant.
El tamaño de la fuente
Por supuesto, también es muy importante especificar un tamaño de fuente. Para ello, CSS proporciona la propiedad font-size. Los tamaños de fuente pueden especificarse en unidades muy diferentes.
- EM
- REM
- píxel
- Porcentaje
- Palabras clave
Las siguientes variantes están disponibles como palabras clave:
- xx-pequeño - muy, muy pequeño
- x-small - muy pequeño
- small - pequeño
- smaller - más pequeño que en el elemento padre
- medium - mediano
- grande - grande
- x-large - muy grande
- xx-large - muy, muy grande
- larger - más grande que en el elemento padre
He aquí un ejemplo de cómo puede establecerse el tamaño de la fuente:
.one {tamaño de fuente: 10px;} .two {tamaño de fuente: 20px;} .three {tamaño de fuente: 110%;} .four {tamaño de fuente: xx-large;}Y así es como se ve en el navegador:
Tenga en cuenta que el tema de la definición del tamaño de letra es muy complejo, ya que las distintas unidades de medida tienen cada una sus ventajas e inconvenientes.
Puede encontrar una buena descripción general de qué unidad de medida es mejor utilizar y cuándo en la página http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Esto es para los que no quieran leerla: Utilice especificaciones relativas como em para la visualización desde la pantalla. Para la maquetación de impresión, sin embargo, utiliza unidades absolutas como pt.
El peso de la fuente
Seguimos con el llamado peso de la fuente. Se utiliza para determinar el grosor y el peso de una fuente. Para ello se utiliza la propiedad font-weight.
.bold { font-weight:bold; }
Esta sintaxis se utiliza para mostrar el texto etiquetado en negrita.
Los valores posibles son bold, bolder (extra bold), lighter (thinner) y normal. También se admiten los valores numéricos 100, 200, 300, 400, 500, 600, 700, 800 y 900. Estos valores van de extrafino(100) a extranegrita(900).
Resumir definiciones
En relación con las definiciones de fuentes, la propiedad line-height, que puede utilizarse para definir la altura de línea, también desempeña un papel importante. Volveré sobre esta propiedad más adelante. Sólo es necesario mencionarla aquí porque juega un cierto papel en relación con la propiedad font que se muestra a continuación.
Puede combinar la información de visualización de fuentes presentada hasta ahora. Para ello se utiliza la propiedad general font. Ésta comprende o incluye las siguientes especificaciones individuales.
- estilo de fuente
- font-variant
- font-weight
- tamaño de fuente
- altura de línea
- font-family
Se pueden combinar diferentes formatos de fuente utilizando font. Puede especificar las propiedades mencionadas, pero no es obligatorio utilizarlas todas. Sin embargo, las propiedades para el tamaño y la familia de la fuente son obligatorias.
Gracias a la notación abreviada, los archivos CSS pueden ser más cortos y claros.
No obstante, debe respetarse el orden que se muestra a continuación. Si se anotan las dos propiedades font-size y line-height, deben ir separadas por una barra. Si en este punto sólo se especifica un valor, éste corresponde a font-size.
Un ejemplo:
p { font: italic small-caps bold 1.3em/1.5em Georgia,Tim,Serif; }font-size-adjust se desarrolló para mostrar las fuentes aproximadamente del mismo tamaño. Diferentes fuentes tienen diferentes alturas x con la misma altura de fuente. Sin embargo, las fuentes con una altura x mayor son más fáciles de leer. Por lo tanto, puede ocurrir que un documento sea difícil de leer si la fuente original no está disponible y se sustituye por otra con una altura x menor. Con font-size-adjust debería ser posible compensar esta diferencia.
Un ejemplo:
h1 { font-family: Verdana, 'Times New Roman', 'Courier New'; font-size-adjust: 0.61; }
En el próximo tutorial, aprenderá otras formas de personalizar el tipo de letra de su sitio web.
