Primer CSS Tipografía Tipo Escala

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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.

La tipografía es una utilidad importante para diseñar el contenido del sitio web. La utilidad Type Scale se utiliza para aumentar o disminuir el tamaño del texto. Se proporcionan diferentes clases para cambiar el tamaño del texto.

Primer CSS Tipografía Tipo Escala Clases:

.f1 – .f6: agregue la clase .f1 a .f6 al elemento respectivo para implementar esta utilidad.

Sintaxis:

<p class="f1">
    ...
</p>

Ejemplo 1: este ejemplo demuestra el uso de la escala de tipo de tipografía de Primer CSS mediante el uso de . f1 a . clase f6 .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Typography</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3>Primer CSS Typography Type Scale Utility</h3>
    </div>
    <div class="text-center">
        <p class="f1">Geeks for Geeks</p>
  
        <p class="f2">Geeks for Geeks</p>
  
        <p class="f3">Geeks for Geeks</p>
  
        <p class="f4">Geeks for Geeks</p>
  
        <p class="f5">Geeks for Geeks</p>
  
        <p class="f6">Geeks for Geeks</p>
  
    </div>
</body>
</html>

Salida :

Escala de tipo de tipografía

Ejemplo 2: Este ejemplo demuestra el peso de fuente más ligero disponible en la tipografía Primer CSS.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Primer CSS Typography Type Scale</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body style="margin:80px">
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3><u>Primer CSS Typography Type Scale</u></h3><br />
    </div>
  
    <div class="text-center">
        <h1 class="f3-light">Geeks for Geeks</h1>
        <h1 class="f2-light">Geeks for Geeks</h1>
        <h1 class="f1-light">Geeks for Geeks</h1>
        <h1 class="f0-light">Geeks for Geeks</h1>
        <h1 class="f00-light">Geeks for Geeks</h1>   
    </div>
</body>
  
</html>

Producción:

Peso de fuente más ligero

Referencia: https://primer.style/css/utilities/typography#type-scale-utilities

Publicación traducida automáticamente

Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta