Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, aprenderemos sobre la utilidad de escala de tipo de tipografía . La utilidad de escala de tipo de tipografía se utiliza para cambiar el tamaño de fuente. Utiliza varias clases de f1 a f6, donde f1 proporciona el tamaño de fuente máximo y f6 proporciona el tamaño de fuente mínimo.
Clase:
- f*: Las clases varían de f1 a f6 dependiendo del tamaño de fuente requerido.
Sintaxis:
<p class="f*" >
Content
</p>
* se puede sustituir con cualquier número del 1 al 6 según sea necesario.
Aprendamos sobre estas clases usando un ejemplo.
Ejemplo 1: escribiremos un texto aquí y modificaremos su tamaño de fuente usando clases de utilidad de escala de tipos.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Typography Type Scale Utility</h3> </div> <p class="f1">GeeksforGeeks</p> <p class="f2">GeeksforGeeks</p> <p class="f3">GeeksforGeeks</p> <p class="f4">GeeksforGeeks</p> <p class="f5">GeeksforGeeks</p> <p class="f6">GeeksforGeeks</p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, aprenderemos acerca de las utilidades de peso de fuente más ligero. Estas clases reducen la legibilidad del texto, particularmente en tamaños de fuente pequeños, por lo que la escala solo baja a f3 a 20px.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Typography Type Scale Utility</h3> </div> <h1 class="f00-light">GeeksforGeeks</h1> <h1 class="f0-light">GeeksforGeeks</h1> <h1 class="f1-light">GeeksforGeeks</h1> <h1 class="f2-light">GeeksforGeeks</h1> <h1 class="f3-light">GeeksforGeeks</h1> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/typography#type-scale-utilities
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA