Tachyons es un código abierto y gratuito que se utiliza para crear un sitio web receptivo. En este artículo, veremos cómo usar la familia de fuentes Garamond con el kit de herramientas Tachyons.
Garamond es el nombre del tipo de letra que se puede aplicar a los elementos del sitio web.
Taquiones Tipografía Clase Garamond:
- garamond: esta clase se utiliza para aplicar la familia de fuentes Garamond.
- fw: esta clase se utiliza para establecer el peso de fuente del texto.
- i: Esta clase se usa para establecer el estilo de fuente en cursiva.
Sintaxis:
<element-name class="garamond">...</element-name>
Alfabetos tipográficos:
Ejemplo 1: En el siguiente ejemplo, utilizaremos la clase Garamond para diseñar diferentes variaciones del texto.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </head> <body> <center> <h1 class="green">GeeksforGeeks</h1> <h3> Tachyons Typography Garamond </h3> <p class="garamond">Garamond in normal font</p> <p style="font-style: bold" class="garamond">Garamond in bold</p> <p style="font-style: italic" class="garamond">Garamond in italics</p> <p style="font-weight:800" class="garamond">Garamond with higher weight</p> <p style="font-weight:100" class="garamond">Garamond with lower weight</p> </center> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, utilizaremos la clase Garamond con cursiva para diseñar el texto de los botones.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </head> <body> <center> <h1 class="green">GeeksforGeeks</h1> <h3 class="garamond"> Tachyons Typography Garamond </h3> <button class="garamond i">GFG</button> <button class="garamond i">DSA</button> <button class="garamond i">CN</button> </center> </body> </html>
Producción:
Referencia: https://tachyons.io/docs/typography/font-family/garamond/