CSS
Tipografía

Sintaxis

• font: [ font-style ] [font-variant] [font-weight] font-size [/ line-height] font-family ;
• estilo de fuente : estilo de fuente
• variante de fuente : variante de fuente
• font-weight: font-weight ;
• tamaño de letra : tamaño de letra ;
• línea-altura: línea-altura ;
• Familia de fuentes : Familia de fuentes ;
• color: color ;
• comillas: ninguna | cadena | inicial | heredar ;
• estiramiento de la fuente : estiramiento de la fuente ;
• text-align: text-align ;
• texto-sangría: longitud | inicial | heredar ;
• texto desbordado: clip | puntos suspensivos | cadena | inicial | heredado ;
• text-transform: none | capitalize | mayúsculas | minúsculas | initial | inherit ;
• text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit ;
• font-size-adjust: number | none | initial | inherit;
• fuente-estiramiento: ultra-condensado | extra-condensado | condensado | semi-condensado | normal | semi-expandido | expandido | extra-expandido | ultra-expandido | inicial | heredado;
• guiones: ninguno | manual | auto
• tab-size: número | longitud | inicial | heredar ;
• espacio entre letras: normal | longitud | inicial | heredar ;
• espacio entre palabras: normal | longitud | inicial | heredar ;

Parámetros

Observaciones

Tamaño de fuente

HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS:

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

El texto dentro de #element-one tendrá un tamaño de 30px , mientras que el texto en #element-two 10px tendrá un tamaño de 10 10px .

La taquigrafía de la fuente

Con la sintaxis:

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

Puede tener todos los estilos relacionados con la font en una declaración con la abreviatura de la font . Simplemente use la propiedad de font y ponga sus valores en el orden correcto.

Por ejemplo, para hacer que todos los elementos p estén en negrita con un tamaño de fuente de 20 px y usar Arial como la familia de fuentes, normalmente lo codificaría de la siguiente manera:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

Sin embargo, con la abreviatura de la fuente se puede condensar de la siguiente manera:

p {
    font: bold 20px Arial, sans-serif;
}

Nota : como font-style font-variant font-weight , font-weight y line-height son opcionales, los tres se omiten en este ejemplo. Es importante tener en cuenta que el uso del método abreviado restablece los otros atributos no dados. Otro punto importante es que los dos atributos necesarios para que funcione el método abreviado de font-size son font-size font-family . Si ambos no están incluidos, el acceso directo se ignora.

Valor inicial para cada una de las propiedades:

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - depende del agente de usuario

Pilas de fuentes

font-family: 'Segoe UI', Tahoma, sans-serif;

El navegador intentará aplicar la fuente tipográfica "Segoe UI" a los caracteres dentro de los elementos seleccionados por la propiedad anterior. Si esta fuente no está disponible, o si la fuente no contiene un glifo para el carácter requerido, el navegador retrocederá a Tahoma y, si es necesario, cualquier fuente sans-serif en la computadora del usuario. Tenga en cuenta que cualquier nombre de fuente con más de una palabra como "Segoe UI" debe tener comillas simples o dobles a su alrededor.

font-family: Consolas, 'Courier New', monospace;

El navegador intentará aplicar la fuente tipográfica "Consolas" a los caracteres dentro de los elementos seleccionados por la propiedad anterior. Si esta fuente no está disponible, o si la fuente no contiene un glifo para el carácter requerido, el navegador retrocederá a "Courier New" y, si es necesario, cualquier fuente monoespaciada en la computadora del usuario.

Espaciado de letras

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

La propiedad letter-spacing se utiliza para especificar el espacio entre los caracteres de un texto.

! el espaciado entre letras también admite valores negativos:

p {
  letter-spacing: -1px;
}

Recursos: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Transformación de texto

La propiedad de text-transform permite cambiar el uso de mayúsculas en el texto. Los valores válidos son: uppercase , capitalize , lowercase , initial , inherit y none

CSS:

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

HTML

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

Guion de texto

p {
    text-indent: 50px;
}

La propiedad text-indent especifica la cantidad de texto de espacio horizontal que se debe mover antes del comienzo de la primera línea del contenido de texto de un elemento.

Recursos:

• ¿Sangrar solo la primera línea de texto en un párrafo?
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Decoracion de texto

La propiedad de text-decoration se utiliza para establecer o eliminar decoraciones de texto.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

texto-decoración se puede utilizar en combinación con texto-decoración-estilo y texto-decoración-color como una propiedad taquigráfica:

.title { text-decoration: underline dotted blue; }

Esta es una versión abreviada de

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

Cabe señalar que las siguientes propiedades solo son compatibles con Firefox

• texto-decoración-color
• texto-decoración-línea
• texto-decoración-estilo
• texto-decoracion-saltar

Desbordamiento de texto

La propiedad de text-overflow trata sobre cómo se debe señalar a los usuarios el contenido desbordado. En este ejemplo, los ellipsis representan texto recortado.

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

Desafortunadamente, el text-overflow: ellipsis solo funcionan en una sola línea de texto. No hay forma de admitir puntos suspensivos en la última línea de CSS estándar, pero se puede lograr con la implementación no estándar de flexboxes solo para webkit.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Ejemplo (abierto en Chrome o Safari):

http://jsfiddle.net/csYjC/1131/

Recursos:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

Espaciado de palabras

La propiedad de espaciado de palabras especifica el comportamiento de espaciado entre etiquetas y palabras.

Valores posibles

• una longitud positiva o negativa (usando em px vh cm etc.) o porcentaje (usando % )
• la palabra clave normal utiliza el espaciado de palabra predeterminado de la fuente
• la palabra clave inherit toma el valor del elemento padre

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Demo en línea

Inténtalo tú mismo

Otras lecturas:

• espaciado de palabras - MDN
• espacio entre palabras - w3.org

Dirección del texto

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

La propiedad de direction se utiliza para cambiar la dirección del texto horizontal de un elemento.

Sintaxis: direction: ltr | rtl | initial | inherit;

La propiedad de writing-mode cambia la alineación del texto para que pueda leerse de arriba a abajo o de izquierda a derecha, según el idioma.

Sintaxis: direction: horizontal-tb | vertical-rl | vertical-lr;

Variante de fuente

Atributos:

normal

Atributo por defecto de las fuentes.

letras minúsculas

Establece cada letra en mayúsculas, pero hace que las letras en minúsculas (del texto original) sean más pequeñas en tamaño que las letras que originalmente estaban en mayúsculas.

CSS:

.smallcaps{
   font-variant: small-caps;
}

HTML:

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

SALIDA:

Nota: la propiedad font-variant es una abreviatura de las propiedades: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, y font-variant-east-asian.

Citas

La propiedad quotes se usa para personalizar las comillas de apertura y cierre de la etiqueta <q> .

q {
    quotes: "«" "»";
}

Sombra de texto

Para agregar sombras al texto, usa la propiedad text-shadow . La sintaxis es la siguiente:

text-shadow: horizontal-offset vertical-offset blur color;

Sombra sin radio borroso

h1 {
  text-shadow: 2px 2px #0000FF;
}

Esto crea un efecto de sombra azul alrededor de un encabezado.

Sombra con radio borroso

Para agregar un efecto de desenfoque, agregue una opción blur radius argumento de blur radius

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

Sombras multiples

Para dar un elemento a múltiples sombras, sepáralos con comas.

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}