La escala tipográfica Tachyons se utiliza para especificar el formato del texto. Por ejemplo, el título de un artículo siempre está en negrita y es más grande que el resto del contenido del artículo.
Sintaxis:
<element_name class="class_name">...</element_name>
Taquiones Tipografía tipo-escala Clases:
- f-headline: Esta clase se utiliza para definir el título de la página.
- f-subheadline: Esta clase se utiliza para definir el subtítulo de la página.
- f1: esta clase se utiliza para definir el tamaño de la fuente que es más pequeña que el subtítulo.
- f2: esta clase se usa para definir el tamaño de la fuente que es más pequeña que f1.
- f3: esta clase se usa para definir el tamaño de la fuente que es más pequeña que f2.
- f4: esta clase se usa para definir el tamaño de la fuente que es más pequeña que f3.
- f5: esta clase se usa para definir el tamaño de la fuente que es más pequeña que f4.
- f6: esta clase se usa para definir el tamaño de la fuente que es más pequeña que f5.
Los siguientes ejemplos ilustran la escala tipográfica de Tachyons Typography:
Ejemplo 1: en el siguiente ejemplo, hemos utilizado la clase «f-headline» para el encabezado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons/css/tachyons.min.css"> </head> <body> <center> <h2 style="color:green; text-align:center;"> GeeksforGeeks </h2> <h3 style="text-align:center;"> Tachyons Typography type-scale </h3> <div> <h1 class="f-headline">Geeksforgeeks</h1> <h1 class="f6">A Portal for all the Geeks</h1> </div> </center> </body> </html>
Producción:
Taquiones Tipografía Tipo-escala
Ejemplo 2: en el siguiente código, hemos utilizado todas las clases que se mencionan en la sección anterior.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons/css/tachyons.min.css"> </head> <body> <center> <h2> GeeksforGeeks</h2> <h3> Tachyons Typography type-scale </h3> <div> <h1 class="f-headline">GeeksforGeeks</h1> <h1 class="f-subheadline">GeeksforGeeks</h1> <h1 class="f1">GeeksforGeeks</h1> <h1 class="f2">GeeksforGeeks</h1> <h1 class="f3">GeeksforGeeks</h1> <h1 class="f4">GeeksforGeeks</h1> <h1 class="f5">GeeksforGeeks</h1> <h1 class="f6">GeeksforGeeks</h1> </div> </center> </body> </html>
Producción:
Taquiones Tipografía Tipo-escala
Referencia: https://tachyons.io/docs/typography/scale/