recursal/MDN huggingface dataset:
font-style
==========

Summary
-------

La propiedad CSS "font-style" permite a los autores esepcificar estilos de fuente para las fuentes especificadas en la regla "`@font-face`".

Para un tipo de fuente particular, los autores pueden descargar varios tipos de fuentes que correspondan a diferentes estilos de la misma familia de fuentes, y luego usar la propiedad "font-style" para especificar explicitamente el tipo de fuente descargada. Los valores para esta propiedad CSS son los mismos que los correspondientes a font property.

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Valor inicial | `normal` |
| Valor calculado | como se especifica |

Syntax
------


```css
font-style: normal;
font-style: italic;
font-style: oblique;
```

### Values

**`normal`**

Selecciona la version normal del estilo de fuente.

**`italic`**

Especifica que el estilo de fuente es la versión en *cursiva* de la fuente normal.

**`oblique`**

Especifica que el estilo de fuente es la versión en *cursiva*, también, pero de forma diferente, de la fuente normal.

### Formal syntax
```

font-style =   
  auto                                      |  
  normal                                    |  
  italic                                    |  
  oblique [ <angle [-90deg,90deg]>{1,2} ]?    
  
```

Examples
--------

A modo de ejemplo, consideremos Garamond como un tipo de fuente que, en su forma normal, obtenemos el siguiente resultado:


```css
@font-face {
  font-family: garamond;
  src: url("garamond.ttf");
}
```


![unstyled Garamond](/es/docs/Web/CSS/@font-face/font-style/garamondunstyled.jpg)

La versión en *cursiva* de este texto utiliza los mismos trazos presentes en la versión sin estilo, pero artificialmente inclinadas unos pocos grados.

![artificially sloped garamond](/es/docs/Web/CSS/@font-face/font-style/garamondartificialstyle.jpg)

Por otra parte, si existe un verdadera versión en *cursiva* del estilo de fuente, podemos incluirla en la propiedad "src" y especificar el estilo de fuente como "italic", con que claramente la fuente quedará en *cursiva*. Las verdaderas *cursivas* utilizan unos trazos específicos que son un poco diferentes de su versión normal, teniendo algunas características únicas y generalmente con cualidades redondeadas y caligráficas. Estas fuentes son específicamente creadas por diseñadores de fuentes y no son artificialmente inclinadas.

@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; }

![italic garamond](/es/docs/Web/CSS/@font-face/font-style/garamonditalic.jpg)

Especificaciones
----------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop-desc |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
unicode-range
=============

La regla CSS **`unicode-range`** especifica un rango específico de caracteres a ser usados por una fuente definida `@font-face` y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada.

El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda.

Sintaxis
--------


```css
/\* valores <unicode-range> \*/
unicode-range: U+26; /\* un único código \*/
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /\* rango de códigos \*/
unicode-range: U+4??; /\* rango por expresión \*/
unicode-range: U+0025-00FF, U+4??; /\* multiples valores \*/
```

### Valores

***un único código***

Un único código de caracter Unicode, por ejemplo `U+26`.

***un rango de código***

Un rango de códigos de caracter Unicode. Asi que, por ejemplo, `U+0025-00FF` significa *incluir todos caracteres en el rango `U+0025` a `U+00FF`*.

***rango por expresión***

Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter `'?'`, asi que, por ejemplo `U+4??` significa *incluir todos los caracteres en el rango `U+400` a `U+4FF`*.

Ejemplos
--------

Hemos creado una etiqueta HTML que contiene un elemento `<div>`, que incluye un simbolo &, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio, usaremos una fuente sans-serif, *Helvetica* para el texto, y una fuente serif, *Times New Roman*, para el caracter &.


```html
<div>Me & You = Us</div>
```


En el CSS, puedes ver que en efecto estamos definiendo una separación completa `@font-face` el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter & en un elemento `<span>` y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra.


```css
@font-face {
  font-family: "Ampersand";
  src: local("Times New Roman");
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # unicode-range-desc |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
font-family
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
Resumen
-------

El descriptor CSS font-family CSS permite al autor especificar el tipo de fuente para un elemento.

La propiedad font-family puede contener varias fuentes a modo de sistema de "seguridad. Si el navegador no soporta la primera, probará con la siguiente y así sucesivamente.

hay dos tipos de nombres de familias de fuentes:

* **family-name** - El nombre de la familia de fuentes, como "times", "courier", "arial", etc.
* **generic-family** - El nombre de la familia genérica , como "serif", "sans-serif", "cursive", "fantasy", "monospace".

Comienza con la fuente que quieras, y acaba siempre con una familia de fuente genérica para permitir al navegador elegir una fuente similar dentro de la familia genérica en caso de que no haya otras fuentes disponibles.

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Valor inicial | `n/a (required)` |
| Valor calculado | como se especifica |

Síntaxis
--------
```

font-family: font|initial|inherit;
```

### Valores

**family-name
generic-family**
 Un lista priorizada de nombre de familias de fuentes y/o de nombres de familias genéricas.

**`initial`**
 Establace el valor por defecto para esta propiedad.

**`inherit`**
 Hereda esta propiedad del elemento padre.

**serif**
 Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.

**sans-serif**
 Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.

**fantasy**
 Fuente genérica Fantasy.

**monospace**
 Fuente genérica Monospace, como por ejemplo Courier.

**cursive**
 Fuente genérica cursiva, como por ejemplo Script.

### Síntaxis Formal
```

font-family =   
  <family-name>    
  
<family-name> =   
  <string> (en-US)         |  
  <custom-ident> (en-US)+    
  
```

Ejemplos
--------

Como ejemplo , consideremos la familia de fuentes garamon, es su forma normal, obtendremos el siguiente resultado:


```css
p {
  font-family: "Times New Roman", Georgia, Serif;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-family-desc |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
font-display
============

El descriptor `font-display` determina cómo se muestra una fuente basándose en cuándo está descargada y lista para usarse.

La visualización de las fuentes
-------------------------------

La visualización de la fuentes se basa en un temporizador que comienza en el momento en que el agente de usuario intenta utilizar una fuente descargada. El tiempo de visualización se divide en tres periodos dictan el comportamiento de renderizado de cualquier elemento que utilice la fuente.

Tiempo de bloqueo de fuente

Si la fuente no está cargada, cualquier elemento que intente utilizarla debe mostrar una fuente alternativa *invisible*. Si la fuente se carga correctamente durante este período, se utiliza normalmente.

Tiempo de intercambio de fuente

Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente.

Tiempo de fallo de la fuente

Si la fuente no está cargada el agente de usuario lo trata como una descarga fallida y utiliza una fuente alternativa.


|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| Valor inicial | `auto` |
| Valor calculado | como se especifica |

Sintaxis
--------


```css
/\* Valores \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### Valores

`auto`

El agente de usuario define la estrategia de visualización de fuentes.

`block`

Establece un tiempo de bloqueo de la fuente corto y un periodo de intercambio infinito

`swap`

No establece tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.

`fallback`

Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto.

`optional`

Establece un tiempo de bloqueo muy corto y sin tiempo de intercambio.

### Sintaxis formal
```

font-display =   
  auto      |  
  block     |  
  swap      |  
  fallback  |  
  optional    
  
```

Ejemplos
--------


```css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-display-desc |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
translateY()
============

La función **`translateY()`** de CSS reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo `<transform-function>`.

**Nota:** `translateY(ty)` es equivalente a `translate(0, ty)` o `translate3d(0, ty, 0)`.

Sintaxis
--------


```css
/\* <length-percentage> values \*/
transform: translateY(200px);
transform: translateY(50%);
```

### Valores

`<length-percentage>`

El valor es de tipo `<length>` o `<percentage>`, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad `transform-box` (en-US).



| Coordenadas cartesianas en ℝ2 | Coordenadas homogéneas en ℝℙ2 | Coordenadas cartesianas en ℝ3 | Coordenadas homogéneas en ℝℙ3 |
| --- | --- | --- | --- |
| 
 Una traslación no es una transformación linear en ℝ2 y no
 puede ser representada usando una matriz de coordenada cartesiana.
  | 

1
 0
0

0
 1
t

0
0
1

 | 

1
 0
0

0
 1
t

0
0
1

 | 

1
 0
0
0

0
 1
0
t

0
0
1
0

0
0
0
1

 |
| `[1 0 0 1 0 t]` |

### Sintaxis formal
```

translateY(`<length-percentage>` (en-US))
```

Ejemplos
--------

### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```

### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatey |

Compatibilidad de navegadores
-----------------------------

Por favor, véase el tipo `<transform-function>` para información de compatibilidad.

Véase también
-------------

* `transform`
* `<transform-function>`
rotate()
========

La función CSS **`rotate()`** define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.

El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el **origen de transformación**. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad `transform-origin`.

La cantidad de rotación generada por la propiedad `rotate()` se define mediante un `<angle>`. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.

Síntaxis
--------
```

rotate(a)
```

Valores
-------

*a*

es un `<angle>` que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.



| Coordenadas cartesianas en ℝ2 | Coordenadas homgéneas en ℝℙ2 | Coordinadas cartesianas en ℝ3 | Coordenadas homgéneas en ℝℙ3 |
| --- | --- | --- | --- |
| 

cos(a)
-sin(a)

sin(a)
cos(a)

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0
0

sin(a)
cos(a)
0
0

0
0
1
0

0
0
0
1

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

Ejemplos
--------

### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
```

### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /\* idéntico a rotateZ(45deg); \*/
  transform: rotate(45deg);
  background-color: blue;
}
```

### Resultado
translate()
===========

La function de CSS **`translate()`** recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo `<transform-function>`.

Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.

Sintaxis
--------

La function `translate()` esta especificada con uno o dos valores.
```

translate(tx)

translate(tx, ty)
```

### Valores

`tx`

Es un `<length>` que representa la absisa (coordenada x) del vector de translación.

`ty`

Es un `<length>` que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, `translate(2)` es equivalente a `translate(2, 0)`.



| Coordenadas cartesianas en ℝ2 | Coordenadas homogeneas en ℝℙ2 | Coordenadas cartesianas en ℝ3 | Coordenadas homogeneas en ℝℙ3 |
| --- | --- | --- | --- |
| 
 Una translación no es una transformación lineal en ℝ2 y no
 puede ser representada usando una matriz de coordenadas cartesianas.
  | 

1
 0
tx

0
 1
ty

0
0
1

 | 

1
 0
tx

0
 1
ty

0
0
1

 | 

1
 0
0
tx

0
 1
0
ty

0
0
1
0

0
0
0
1

 |
| `[1 0 0 1 tx ty]` |

Ejemplos
--------

### Translación en un solo eje

#### HTML


```html
<div>Estático</div>
<div class="moved">Movido</div>
<div>Estático</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px); /\* Equivalente a translateX(10px) \*/
  background-color: pink;
}
```


#### Resultado

### Translación combinada en los ejes X e Y

#### HTML


```html
<div>Estático</div>
<div class="moved">Movido</div>
<div>Estático</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```


#### Resultado

Especificaciones
----------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

Compatibilidad con navegadores
------------------------------

Ver el tipo de datos `<transform-function>` para la información de compatibilidad.

Véase también
-------------

* `transform`
* `<transform-function>`
scale()
=======

La función CSS `scale()` define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo `<transform-function>`.

Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).

Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.

**Nota:** La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.

Sintaxis
--------

La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.
```

scale(sx) scale(sx, sy)
```

Valores
-------

*sx*

Es un `<número>` representando la abscisa del vector de escala.

*sy*

Es un `<número>` representado la ordenada de la escala del vector. Si no está presente, su valor por defecto es ***sx***, llevando a una escala uniforme preservando la curva del elemento.



| Coordenadas Cartesianas en ℝ2 | Coordenadas Homogéneas en ℝℙ2 | Coordenadas Cartesianas en ℝ3 | Coordenadas Homogéneas en ℝℙ3 |
| --- | --- | --- | --- |
| 

sx
0

0
sy

 | 

sx
 0
0

0
 sy
0

0
0
1

 | 

sx
 0
0

0
 sy
0

0
0
1

 | 

sx
 0
0
0

0
sy
0
0

0
0
1
0

0
0
0
1

 |
| `[sx 0 0 sy 0 0]` |

Ejemplos
--------

### Escalar las dimensiones X e Y al mismo tiempo

#### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /\* Igual que: scaleX(0.7) scaleY(0.7) \*/
  background-color: pink;
}
```


#### Resultado

### Escalando dimensiones X e Y por separado y trasladando el origen

#### HTML
```

<div>Normal</div>
<div class="scaled">Scaled</div>
```


#### CSS
```

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /* Igual que: scaleX(2) scaleY(0.5) */
  transform-origin: left;
  background-color: pink;
}
```


#### Resultado

Compatibilidad con navegadores
------------------------------

Please see the `<transform-function>` data type for compatibility info.

También puede ver
-----------------

* `transform`
* `<transform-function>`
* `scale3d()` (en-US)
symbols
=======

Summary
-------

El descriptor `symbols` es usado para definir los símbolos que usará un sistema de conteo específico para construir una representación de conteo. Un símbolo puede ser un texto, una imagen o un identificador. El descriptor symbols debe ser especificado cuando el valor del descriptor `system` (en-US) es *cyclic*, *numeric*, *alphabetic*, *symbolic*, o *fixed*. Cuando se usa el sistema *additive*, el descriptor `additive-symbols` (en-US) es usado para especificar los símbolos.

Los valores posibles para descriptor de símbolos incluyen:

* Textos (`<string>` (en-US)) - secuencia de caracteres definidos entre comillas sencillas o dobles. Se pueden usar diagonales invertidas (\) para escapar caracteres especiales. Por ejemplo, los caracteres Unicode pueden ser especificados en formato "\24B6".
* Imágenes - Usando la función `url()`
* Identificadores

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Valor inicial | `n/a (required)` |
| Valor calculado | como se especifica |

Sintaxis
--------


```css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("first.svg") url("second.svg") url("third.svg");
symbols: indic-numbers;
```

### Valores

`<symbol>`

Representa u símbolo (`<symbol>`) usado dentro del sistema de conteo.

### Sintaxis formal
```

symbols =   
  <symbol>+    
  
<symbol> =   
  <string> (en-US)        |  
  <image>         |  
  <custom-ident> (en-US)    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
```

Ejemplo
-------

### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

### CSS


```css
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()` (en-US), la notación funcional para crear estilos de contador anónimos.
additive-symbols
================

Resumen
-------

El descriptor additive-symbols es similar al descriptor `symbols()` (en-US), y permite al usuario especificar símbolos que se usarán para representación de contadores cuando el valor del descriptor `system` (en-US) es *additive*. El descriptor `additive-symbols` define lo que se conoce como tuplas aditivas, cada una de las cuales es un par que contiene un símbolo y su peso como entero no negativo. El sistema aditivo es usado para construir sistemas de numeración de valores de signos como la numeración romana.

Cuando el valor del descriptor es *cyclic*, *numeric*, *alphabetic*, *symbolic*, o *fixed*, se usa el descriptor `symbols`, en lugar de `additive-symbols` para especificar los símbolos de conteo.

|  |  |
| --- | --- |
| Related at-rule | `@counter-style` |
| Valor inicial | `n/a (required)` |
| Valor calculado | como se especifica |

Sintaxis
--------


```css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);
```

### Sintaxis formal
```

additive-symbols =   
  [ <integer [0,∞]> && <symbol> ]#    
  
<symbol> =   
  <string> (en-US)        |  
  <image>         |  
  <custom-ident> (en-US)    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
```

Ejemplo
-------

### Contenido HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

### Contenido CSS


```css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}
.list {
  list-style: additive-symbols-example;
}
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()` (en-US), la notación funcional para crear estilos de contador anónimos.