Tachyons es un conjunto de herramientas gratuito y de código abierto que se utiliza para crear un sitio web receptivo. 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.
System Serif es un alfabeto tipográfico que contiene diferentes pesos de fuente, con una variedad de estilos de fuente que se utilizan para crear un sitio web hermoso. Es uno de los estilos de fuente en la tipografía.
Sintaxis:
<element-name class ="system serif|fw|i">Content</element-name>
Tachyons Tipografía Sistema Serif Clases:
- system serif: esta clase se utiliza para diseñar cualquier texto en estilo system serif.
- 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.
Alfabetos tipográficos: aparición de alfabetos, valores numéricos y caracteres especiales en el sistema serif.
Ejemplo 1: En el siguiente ejemplo, veremos cómo se ven los alfabetos tipográficos.
HTML
<!DOCTYPE html> <html> <head> <title>Tachyons Typography</title> <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="system serif"> Tachyons Typography System-Serif </h3> <div style="background-color: #19A974"> <h3 class="system serif"> this is lowercase system-serif text </h3> <h3 class="system serif"> THIS IS UPPERCASE SYSTEM-SERIF TEXT </h3> <h3 class="system serif"> 1234567890 !@#$%^&*() </h3> <h3 class="system serif"> œ∑´®†¥¨ˆøπ“‘«åß∂ƒ©˙∆˚¬…æΩ≈ç√∫˜µ≤≥÷ </h3> </div> </center> </body> </html>
Producción:
Pesos de fuente: podemos definir cualquier peso de fuente de 900 a 100 valores.
Ejemplo 2: En el siguiente ejemplo, veremos cómo usar font-weight.
HTML
<!DOCTYPE html> <html> <head> <title>Tachyons Typography</title> <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="system serif"> Tachyons Typography System-Serif </h3> <p class="system serif fw1"> GeeksforGeeks </p> <p class="system serif fw2"> GeeksforGeeks </p> <p class="system serif fw3"> GeeksforGeeks </p> <p class="system serif fw4"> GeeksforGeeks </p> <p class="system serif fw5"> GeeksforGeeks </p> <p class="system serif fw6"> GeeksforGeeks </p> <p class="system serif fw7"> GeeksforGeeks </p> <p class="system serif fw8"> GeeksforGeeks </p> <p class="system serif fw9"> GeeksforGeeks </p> </center> </body> </html>
Producción:
Cursiva: Es el estilo de la fuente que parece texto en cursiva.
Ejemplo 3: En el siguiente ejemplo, veremos el uso de la fuente cursiva con una fuente serif del sistema.
HTML
<!DOCTYPE html> <html> <head> <title>Tachyons Typography</title> <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="system serif"> Tachyons Typography System-Serif </h3> <h2 class="system serif fw1 i"> This is System-Serif font-style </h2> <h2 class="system serif fw2 i"> THIS IS SYSTEM-SERIF FONT STYLE </h2> </center> </body> </html>
Producción:
Referencia: http://tachyons.io/docs/typography/font-family/system-serif/