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