Tipografía básica de marketing CSS – Part 1

La tipografía es una función de Primer para diseñar y formatear el contenido del texto. Se utiliza para crear encabezados, subtítulos, párrafos, comillas, agregar más estilos de fuente orientados al diseño y mucho más. Es receptivo, pero en una escala más pequeña, y los titulares se establecen en el tipo de letra de marketing.

Primer CSS Typography tiene tres tipos de utilidades, todas ellas se mencionan y describen brevemente a continuación.

Primer clases de tipografía CSS:

  • Utilidades de encabezado : esto se usa para crear diferentes tipos de encabezados, hay siete tipos de encabezados para cada tipo, tenemos clases individuales como h0-mktg , h1-mktg , h2-mktg , h3-mktg , h4-mktg , h5-mktg y h6-mktg .
  • Utilidades de contenido del cuerpo : Esto se usa para crear elementos de cuerpo de diferentes tamaños de fuente, hay siete tipos de encabezados para cada tipo, tenemos clases individuales como f0-mktg , f1-mktg , f2-mktg , f3-mktg , f4-mktg , f5 -mktg y f6-mktg .
  • Utilidades tipográficas: Esto está destinado a ser utilizado además de las utilidades principales de Primer CSS.

Sintaxis:

<p class="Typography-utilities-types-class">...</p>

Ejemplo 1: En este ejemplo, veremos las utilidades de encabezado de Primer CSS Typography.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Primer CSS Typography</title>
     <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>
<body>
    <center>
        <h1 class="color-fg-open">GeeksforGeeks</h1>
        <strong>Primer CSS Typography</strong>
    </center>
    <div>
        <p class="h0-mktg m-1 border">Primer CSS: h0-mktg class</p>
  
  
        <p class="h1-mktg m-1 border">Primer CSS: h1-mktg class</p>
  
  
        <p class="h2-mktg m-1 border">Primer CSS: h2-mktg class</p>
  
  
        <p class="h3-mktg m-1 border">Primer CSS: h3-mktg class</p>
  
  
        <p class="h4-mktg m-1 border">Primer CSS: h4-mktg class</p>
  
  
        <p class="h5-mktg m-1 border">Primer CSS: h5-mktg class</p>
  
  
        <p class="h6-mktg m-1 border">Primer CSS: h6-mktg class</p>
  
  
    </div>
</body>
</html>

Producción:

 

Ejemplo 2: En este ejemplo, veremos las utilidades de contenido del cuerpo de Primer CSS Typography.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Primer CSS Typography</title>
     <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>
<body>
    <center>
        <h1 class="color-fg-open">GeeksforGeeks</h1>
        <strong>Primer CSS Typography</strong>
    </center>
    <div>
        <strong>f0-mktg:</strong>
        <p class="f0-mktg Box m-2">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.
        </p>
  
  
        <strong>f1-mktg:</strong>
        <p class="f1-mktg Box m-2">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.
        </p>
  
  
        <strong>f2-mktg:</strong>
        <p class="f2-mktg Box m-2">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.
        </p>
  
  
        <strong>f3-mktg:</strong>
        <p class="f3-mktg Box m-2">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.            
        </p>
  
  
        <strong>f4-mktg:</strong>
        <p class="f4-mktg Box m-2">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.
        </p>
  
  
        <strong>f5-mktg:</strong>
        <p class="f5-mktg Box m-2">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.
        </p>
  
  
        <strong>f6-mktg:</strong>
        <p class="f6-mktg Box m-2">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.
        </p>
  
  
    </div>
</body>
</html>

Producción:

 

Ejemplo 3: En este ejemplo, veremos las utilidades tipográficas de Primer CSS Typography.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Primer CSS Typography</title>
     <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css">
</head>
<body>
    <center>
        <h1 class="color-fg-open">GeeksforGeeks</h1>
        <strong>Primer CSS Typography</strong>
    </center>
    <div>
        <strong>pullquote:</strong>
        <p class="pullquote">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.
        </p>
  
  
        <strong>Without pullquote:</strong>
        <p class="">
            We welcome you to the platform, where we consistently
            strive to offer the best of education.
        </p>
  
    </div>
</body>
</html>

Producción:

 

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

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *