Propiedades CSS relacionadas con fuentes

Articles

Este artículo explica las propiedades de CSS relacionadas con las fuentes.

Puedes aprender sobre los casos de uso y cómo escribir propiedades como font-style y font-family.

YouTube Video

Creando HTML para vista previa

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Tipografía (Relacionada con la Fuente)

Propiedad `font-size`

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size es una propiedad de CSS utilizada para especificar el tamaño del texto dentro de un elemento. Se usa para ajustar la importancia visual del texto y mejorar la legibilidad. font-size se puede especificar utilizando varias unidades y métodos.

Formas principales de especificar valores

Valores absolutos(px, pt)

Si deseas usar un tamaño fijo que sea independiente del navegador o dispositivo, especifica tamaños de fuente en unidades absolutas como píxeles o puntos.

1p {
2    font-size: 16px;
3}

px: Los píxeles son la unidad más común. Especifica el tamaño en incrementos de 1 píxel.

1p {
2    font-size: 12pt;
3}

pt: Los puntos son unidades comúnmente utilizadas en la impresión. 1 punto equivale a 1/72 de una pulgada.

Valores relativos(em, rem, %)

También puedes especificar tamaños de fuente relativos basados en el tamaño de fuente de un elemento padre o raíz. Esto es adecuado para un diseño responsivo.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em es una unidad relativa basada en el tamaño de fuente del elemento padre. Si el font-size del elemento padre es 16px, entonces 1em equivale a 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem es una unidad relativa basada en el tamaño de fuente del elemento raíz (generalmente el elemento <html>).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % se especifica como un porcentaje relativo al tamaño de fuente del elemento padre.

Palabras clave

También puedes usar palabras clave para especificar fácilmente tamaños amigables para el usuario.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: Estas palabras clave definen tamaños de fuente básicos que varían según el navegador pero son fáciles de usar.

Palabras clave relativas

Puedes especificar tamaños de fuente relativos usando palabras clave en relación con el elemento padre o el tamaño del texto circundante.

1p {
2    font-size: larger;
3}

larger: larger hace que el tamaño de fuente sea más grande que el del elemento padre.

1p {
2    font-size: smaller;
3}

smaller: smaller hace que el tamaño de fuente sea más pequeño que el del elemento padre.

Ejemplos comunes de uso

En diseño responsivo, em y rem se utilizan frecuentemente para especificar tamaños de fuente flexibles basados en el tamaño de los elementos padre o raíz.
En diseño fijo o diseño preciso, es común usar px para fijar el tamaño.

Ejemplos de ajustes de tamaño de fuente

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Conclusión

font-size es una propiedad importante para ajustar la importancia visual y la legibilidad del texto. Es importante usar las unidades y palabras clave adecuadamente según el propósito del diseño o para un diseño responsivo flexible.

La propiedad `font-family`

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

La propiedad font-family puede especificar principalmente los siguientes dos tipos de valores:.

Nombres de fuentes específicas: Especifica el nombre de una fuente en particular. Especifica las fuentes que están instaladas en el sistema o disponibles como fuentes web.
- Ejemplo:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Familia de fuentes genérica: Especifica un grupo de fuentes de reserva para usar cuando una fuente específica no esté disponible.
- Ejemplo:
  - serif: Serif (por ejemplo, Times New Roman, Georgia)
  - sans-serif: Sans-serif (por ejemplo, Arial, Verdana)
  - monospace: Monoespaciada (por ejemplo, Courier New, Lucida Console)
  - cursive: Cursiva (por ejemplo, Comic Sans MS)
  - fantasy: Fantasía (por ejemplo, Papyrus, Impact)

Cómo especificar `font-family`

Al especificar múltiples fuentes, se recomienda separar los nombres de fuentes con comas y añadir una fuente genérica como opción de reserva al final.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

En este caso, si Times New Roman no está disponible, se utiliza Georgia, y si ninguna de las dos está disponible, se usa una fuente serif.

La propiedad `font-weight`

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight es una propiedad CSS usada para especificar el grosor del texto. Desempeña un papel importante en el énfasis visual y el estilo del texto y se utiliza para cambiar el estilo de la fuente. font-weight se puede especificar usando números o palabras clave para indicar un rango de grosores desde delgado hasta negrita.

Valores principales de `font-weight`

Palabras clave

1p {
2    font-weight: normal; /* Default thickness */
3}

normal representa el peso estándar de la fuente. Normalmente corresponde a 400.

1p {
2    font-weight: bold; /* Bold */
3}

bold representa texto en negrita. Normalmente corresponde a 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder representa texto que es más negrita que el de su elemento padre.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter representa texto que es más claro que el de su elemento padre.

Valores numéricos

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight también puede especificarse como un número, en un rango de 100 a 900. Números más pequeños producen un texto más delgado, y números más grandes producen un texto más grueso. Generalmente, las familias de fuentes soportan un rango de grosores específicos, pero no todos los números están disponibles para todas las fuentes.

100: Fino
200: Extra Ligero
300: Ligero
400: Normal
500: Medio
600: Semi Negrita
700: Negrita
800: Extra Negrita
900: Negro

Ejemplos de cómo usar `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Uso Práctico

Texto estándar generalmente utiliza 400 (normal).
Para títulos o partes enfatizadas, es común usar 700 (bold).
Dependiendo del diseño, también pueden usarse pesos intermedios como 500 o 600 para evitar un exceso de énfasis.

Resumen

font-weight es una propiedad que especifica el grosor del texto usando palabras clave como normal o bold, o números del 100 al 900.
lighter y bolder se ajustan en relación con el grosor del elemento padre.
Es importante elegir un font-weight apropiado basado en el diseño y la legibilidad.

La propiedad `font-style`

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style es una propiedad CSS utilizada para especificar el estilo de los caracteres, particularmente para aplicar estilos cursiva o normal. Esta propiedad se usa a menudo para énfasis de texto y diseño, especialmente en títulos y citas.

Valores Principales de `font-style`

`normal`

1p {
2    font-style: normal;
3}

normal es el estilo estándar de los caracteres (normalmente verticales).

`italic`

1p {
2    font-style: italic;
3}

italic convierte el texto en cursiva (inclinada). Este estilo puede aplicarse si la familia de fuentes soporta cursivas.

`oblique`

1p {
2    font-style: oblique;
3}

oblique inclina el texto. A diferencia de italic, si la fuente no tiene una versión cursiva, esto puede inclinar el texto de forma artificial.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

Especifica un ángulo con oblique para inclinar el texto según el ángulo especificado. Esta especificación es para personalizar aún más oblique. Actualmente, la mayoría de los navegadores no admiten la especificación de ángulos, pero algunos sí.

Uso de `font-style`

italic se utiliza a menudo para énfasis, citas y títulos de libros.
oblique se utiliza a menudo cuando una fuente no incluye un estilo en cursiva, como un medio para inclinar el texto artificialmente.
normal se utiliza al volver a un estilo de texto normal.

Resumen

font-style se utiliza para controlar la inclinación del texto, con tres valores principales: normal, italic y oblique.
En diseño, la cursiva se utiliza a menudo para enfatizar el texto, y si la fuente no lo admite, se puede usar oblique para inclinar el texto.

Propiedad `color`

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

La propiedad color es una propiedad fundamental en CSS para especificar el color del texto. Se utiliza para cambiar el color del texto de los elementos HTML y puede especificar colores en varios formatos.

Explicación:

La clase color-red especifica el color del texto como rojo utilizando una palabra clave.
- Puedes especificar nombres de colores como red, blue, green que están definidos en CSS.
La clase color-hex especifica colores usando códigos de color hexadecimal.
- Puedes especificar con 3 dígitos como #F00. En este caso, #F00 es el mismo color que #FF0000.
La clase color-rgb especifica colores usando el formato RGB.
- RGB: Especifica los componentes de rojo, verde y azul dentro de un rango de 0 a 255.
La clase color-rgba utiliza el formato RGBA para agregar transparencia.
La clase color-hsl especifica colores usando el formato HSL.
- Los colores pueden especificarse con matiz, saturación y luminosidad. El matiz se especifica de 0 a 360 grados, y la saturación y luminosidad se especifican de 0% a 100%.
La clase color-hsla utiliza el formato HSLA para agregar transparencia.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Reglas CSS `@`Propiedades de CSS relacionadas con el texto

Propiedades CSS relacionadas con fuentes

YouTube Video

Creando HTML para vista previa

Tipografía (Relacionada con la Fuente)

Propiedad font-size

Formas principales de especificar valores

Valores absolutos(px, pt)

Valores relativos(em, rem, %)

Palabras clave

Palabras clave relativas

Ejemplos comunes de uso

Ejemplos de ajustes de tamaño de fuente

Conclusión

La propiedad font-family

Cómo especificar font-family

La propiedad font-weight

Valores principales de font-weight

Palabras clave

Valores numéricos

Ejemplos de cómo usar font-weight

Uso Práctico

Resumen

La propiedad font-style

Valores Principales de font-style

normal

italic

oblique

oblique <angle>

Uso de font-style

Resumen

Propiedad color

Explicación:

YouTube Video

Propiedad `font-size`

La propiedad `font-family`

Cómo especificar `font-family`

La propiedad `font-weight`

Valores principales de `font-weight`

Ejemplos de cómo usar `font-weight`

La propiedad `font-style`

Valores Principales de `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Uso de `font-style`

Propiedad `color`