Los taquiones son el conjunto de herramientas que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo incluir tipografía en la página web utilizando el kit de herramientas Tachyons.
La tipografía de taquiones es el arte de organizar los tipos para hacer que el lenguaje escrito sea legible y atractivo cuando se muestre.
Componentes tipográficos de taquiones:
- Escala de tipo : esta clase se utiliza para establecer el uso de mayúsculas en el texto.
- Medida: Esta clase se utiliza para medir se refiere a la longitud de una línea de texto.
- Line Height / Leading: Esta clase se utiliza para definir la altura de la línea.
- Seguimiento: esta clase se utiliza para definir el espaciado entre los elementos.
- Pesos de fuente: esta clase se utiliza para definir el peso de fuente.
- Estilo de fuente: esta clase se utiliza para definir el estilo de fuente.
- Alineación vertical: esta clase se utiliza para definir la alineación vertical.
- Alineación de texto: esta clase se utiliza para definir texto alineado.
- Transformación de texto: esta clase se utiliza para transformar texto.
- Decoración de texto : esta clase se utiliza para decorar cualquier texto.
- Espacio en blanco : esta clase se utiliza para definir el espacio en blanco alrededor del elemento.
- Familias de fuentes: esta clase se utiliza para definir el estilo de fuente.
- Avenir Next: esta clase se utiliza para establecer el estilo de fuente en avenir next.
- Helvetica: esta clase se utiliza para establecer el estilo de fuente en Helvetica.
- Roboto: esta clase se usa para establecer el estilo de fuente en Roboto.
- San Francisco: esta clase se utiliza para establecer el estilo de fuente en San Francisco.
- System Sans-Serif: esta clase se utiliza para establecer el estilo de fuente en System Sans-Serif.
- Athelas: esta clase se utiliza para establecer el estilo de fuente en Athelas.
- Baskerville: esta clase se utiliza para establecer el estilo de fuente en Baskerville.
- Garamond: esta clase se utiliza para establecer el estilo de fuente en Garamond.
- Georgia: esta clase se utiliza para establecer el estilo de fuente en Georgia.
- System Serif: esta clase se utiliza para establecer el estilo de fuente en System Serif.
Sintaxis:
<element-name class="Typography Classes ">
...
</element-name>
Ejemplo 1: En el siguiente ejemplo, utilizaremos las clases de peso de fuente para definir fuentes con diferentes pesos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tachyons Typography</title>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body class="contain">
<h1 class="fw1">GeeksforGeeks</h1>
<h1 class="fw6">GeeksforGeeks</h1>
<h1 class="fw9">GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, utilizaremos las clases de transformación de texto para cambiar el estilo de la fuente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tachyons Typography</title>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<h1 class="ttu tracked">geeksforgeeks</h1>
<h1 class="ttl">GEEKSFORGEEKS</h1>
<h1 class="ttc">geeksforgeeks</h1>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA