Tachyons es un conjunto de herramientas CSS gratuito y de código abierto que se utiliza para crear un sitio web receptivo. En este artículo, veremos cómo diseñar la fuente en System Sans-Serif utilizando la tipografía Tachyons.
La tipografía de taquiones es un arte de organizar los tipos para que el lenguaje escrito sea legible y atractivo cuando se muestre. También se usa para cambiar el ancho y la altura de cualquier texto y con la ayuda de esta herramienta, podemos hacer que cualquier sitio web sea hermoso.
Sistema San-Serif: es uno de los estilos de fuente que se utiliza para crear un sitio web hermoso.
Sintaxis:
<element-name class = "system san-serif | fw | i">Content</element-name>
Tachyons Tipografía Sistema Sans-Serif Clases:
- system san-serif: esta clase se utiliza para diseñar cualquier texto en estilo system-sans-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 san-serif.
Ejemplo 1: En el siguiente ejemplo, veremos cómo se ven los alfabetos tipográficos usando el estilo de fuente System San-Sarif.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </head> <body> <h1 class="tc">GeeksforGeeks</h1> <h3 class="tc"> Tachyons Typography System Sans-Serif </h3> <h2 class="system sans-serif tc"> this is lowercase system-sans-serif text </h2> <h2 class="system sans-serif tc"> THIS IS UPPERCASE SYSTEM-SANS-SERIF TEXT </h2> <h2 class="system sans-serif tc"> 1234567890 !@#$%^&*() </h2> <h2 class="system sans-serif tc"> œ∑´®†¥¨ˆøπ“‘«åß∂ƒ©˙∆˚¬…æΩ≈ç√∫˜µ≤≥÷ </h2> </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> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </head> <body> <h1 class="tc">GeeksforGeeks</h1> <h3 class="tc"> Tachyons Typography System Sans-Serif </h3> <h2 class="system sans-serif fw4 tc"> GeeksforGeeks </h2> <h2 class="system sans-serif fw5 tc"> GeeksforGeeks </h2> <h2 class="system sans-serif fw6 tc"> GeeksforGeeks </h2> <h2 class="system sans-serif fw7 tc"> GeeksforGeeks </h2> <h2 class="system sans-serif fw8 tc"> GeeksforGeeks </h2> <h2 class="system sans-serif fw9 tc"> GeeksforGeeks </h2> </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 san-serif del sistema.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </head> <body> <h1 class="tc">GeeksforGeeks</h1> <h3 class="tc"> Tachyons Typography System Sans-Serif </h3> <h2 class="system sans-serif i tc"> This is System Sans-Serif font-style </h2> <h2 class="system sans-serif i tc"> THIS IS SYSTEM-SANS-SERIF FONT STYLE </h2> </body> </html>
Producción:
Referencia: https://tachyons.io/docs/typography/font-family/system-sans-serif/
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