Primer CSS es un marco CSS gratuito de código abierto que se basa en un sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Crea 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 un modelo altamente reutilizable.
Una de esas utilidades muy importantes presente en Primer CSS es la tipografía.
En este artículo, aprenderemos sobre la utilidad Tipografía en Primer CSS.
Utilidades de tipografía
Las utilidades de tipografía en Primer CSS están diseñadas para que funcionen en combinación con las utilidades de altura de línea para que sean mucho más sensibles y útiles de usar. Las utilidades tipográficas también existen como variables que podemos usar en componentes o Custom CSS.
A continuación se muestra una tabla que muestra la relación entre la escala, el tamaño de fuente en el dispositivo móvil, el tamaño de fuente en el escritorio y la altura de línea .
| Escala | Tamaño de fuente: móvil | Tamaño de fuente: escritorio | 1,25 altura de línea | 1,5 altura de línea |
| 00 | 40px | 48px | 60 | 72 |
| 0 | 32px | 40px | 50 | 60 |
| 1 | 26 píxeles | 32px | 40 | 48 |
| 2 | 22px | 24 píxeles | 30 | 36 |
| 3 | 18 píxeles | 20px | 25 | 30 |
| 4 | 16 píxeles | 16 píxeles | 20 | 24 |
| 5 | 14px | 14px | 17.5 | 21 |
| 6 | 12px | 12px | 15 | 18 |
Utilidades de tipografía:
- Utilidades de encabezado : podemos agregar las clases de h1 a h2 para cambiar el estilo de fuente de cualquier elemento a los estilos de fuente del encabezado.
Esto es muy útil en situaciones en las que tenemos que cambiar el estilo de fuente manteniendo el marcado para que sea semánticamente correcto. De esta forma, se mantiene la jerarquía de la página adecuada. - Utilidades de escala de tipos : podemos usar las clases de escala de tipos de Primer CSS como f1 a f6 para cambiar el tamaño de fuente existente del elemento. También podemos hacer que el texto en línea sea liviano según nuestras necesidades usando las clases f0-light a f3-light .
- Utilidades de altura de línea : podemos cambiar la altura de línea del párrafo usando las clases Primer CSS como lh-condensed. Esto reduce la altura de la línea entre dos líneas del párrafo. También tenemos variantes de clase de altura de línea receptivas como « .lh-sm-condensed «, que reduce la altura de línea del párrafo para pantallas medianas o más grandes.
- Estilos tipográficos : en Primer CSS, tenemos numerosas clases para diferentes estilos tipográficos como texto en negrita, cursiva, sin ajuste, mayúsculas, enfatizado, etc.
- Saltos de palabra : en Primer CSS, tenemos dos clases diferentes para saltos de palabra.
- wb-break-word: esta clase, cuando se agrega a cualquier elemento, hace que el elemento se rompa-palabra si el ancho de la línea es menor que la longitud de la palabra después del ajuste.
- wb-break-all: esta clase, cuando se agrega a cualquier elemento, hace que el elemento rompa la palabra independientemente de si es más corto o más largo que el ancho de la línea.
- Alineación de texto : en Primer CSS, podemos alinear el texto de cualquier elemento usando las diferentes clases como text-left, text-right y text-center
- Alineación de texto receptivo : en Primer CSS, podemos alinear el texto de cualquier elemento de acuerdo con el ancho de la pantalla en la que se ve (grande, pequeño o mediano) usando las clases de alineación de texto receptivo como text-sm- center , text-lg-left y muchos otros.
- Eliminación de viñetas: podemos eliminar las viñetas de la lista ordenada agregando la clase list-style–none a la etiqueta <ul> de la lista ordenada en Primer CSS.
Ejemplo 1: En este ejemplo, hemos creado un encabezado y texto de diferentes tamaños usando las diferentes clases de utilidad de encabezado y tipografía.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=`,initial-scale=1.0">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Primer CSS Typography Utilites</h2>
<u><h3>Header Utilites Class</h3></u>
<p class="h2">This is a text with class h2</p>
<p class="h3">This is a text with class h3</p>
<p class="h4">This is a text with class h4</p>
<p class="h5">This is a text with class h5</p>
<p class="h6">This is a text with class h6</p>
<br>
<u><h3>TypeScale Utilites Class</h3></u>
<p class="f2">This is a text with class f2</p>
<p class="f3">This is a text with class f3</p>
<p class="f4">This is a text with class f4</p>
<p class="f5">This is a text with class f5</p>
<p class="f6">This is a text with class f6</p>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código muestra tres párrafos, con diferentes alineaciones de texto.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<style>
body {
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Primer CSS Typography Utilites</h2>
<u>
<h3>Text Alignment Utilites Class</h3>
</u>
<h4>Center aligned text </h4>
<p class="text-center">
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer
CSS. This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
</p>
<h4>Left aligned text </h4>
<p class="text-left">This is a sample paragraph
for displaying different text alignment
class in Primer CSS.This is a sample paragraph
for displaying different text alignment
class in Primer CSS.This is a sample paragraph
for displaying different text alignment
class in Primer CSS.This is a sample paragraph
for displaying different text alignment
class in Primer CSS.This is a sample paragraph
for displaying different text alignment
class in Primer CSS.
</p>
<h4>Right aligned text </h4>
<p class="text-right">
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer
CSS.This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment
class in Primer CSS.
</p>
<br>
</body>
</html>
Producción:
Referencia: https://primer.style/css/utilities/typography
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA