Primeros estilos tipográficos CSS

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.

En este artículo, aprenderemos sobre estilos tipográficos. Primer CSS Typographic Styles se utiliza para cambiar el peso, los estilos y la alineación de la fuente. 

Clases de estilo tipográfico CSS:

  • text-normal: esta clase se utiliza para escribir texto normal.
  • text-italic:  esta clase se utiliza para escribir texto en cursiva
  • text-bold:   esta clase se utiliza para escribir texto en negrita.
  • text-semibold: esta clase se utiliza para texto en seminegrita.
  • text-light: esta clase se utiliza para escribir texto más claro.
  • text-uppercase: Esta clase se utiliza para escribir texto en mayúsculas.
  • no-wrap: las secuencias de espacios en blanco colapsarán en un solo espacio en blanco. El texto nunca pasará a la siguiente línea usando esta clase.
  • ws-normal: esta clase se utiliza para escribir texto normal.
  • text-underline: esta clase se utiliza para escribir texto con un subrayado.
  • sin subrayado: esta clase se utiliza para escribir texto sin subrayar.
  • texto enfatizado: esta clase se usa para hacer que el texto se enfatice/fuerte.
  • text-small: Esta clase se utiliza para hacer el texto más pequeño.
  • lead: esta clase se utiliza para escribir texto en lead.
  • text-mono: esta clase se utiliza para escribir texto con la familia de fuentes ‘monospace’.
  • user-select-none: Esto se usa para no aplicar estilo al texto.

Sintaxis:

<div class="Typographic-Style-Class">
    ...
</div>

Ejemplo 1: en este ejemplo, escribiremos texto y usaremos clases como text-normal , text-italic , text-bold , text-semibold y text-light

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h3> Typographic Styles</h3>
  
    <p class="text-normal">
        Hi Geek! I am Normal Text
    </p>
  
    <p class="text-italic"> 
        Hi Geek! I am Italic Text
    </p>
  
    <p class="text-bold">
        Hi Geek! I am Bold Text
    </p>
  
    <p class="text-semibold">
        Hi Geek! I am Semi-bold Text
    </p>
  
    <p class="text-light">
        Hi Geek! I am Light Text
    </p>
  
</body>
  
</html>

Producción:

 

Ejemplo 2: En este ejemplo, escribiremos texto y usaremos las clases ws-normal , text-underline , no-underline , text-emphaised y text-small

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3> Typographic Styles</h3>
      
    <p class="ws-normal">
        Hi Geek! I am a Normal whitespace Text
    </p>
  
    <p class="text-underline">
        Hi Geek! I am a Text underline Text
    </p>
  
    <p class="no-underline">
        Hi Geek! I am a No underline Text
    </p>
  
    <p class="text-emphasized">
        Hi Geek! I am a Emphasized Text
    </p>
  
    <p class="text-small">
        Hi Geek! I am a Small Text
    </p>
  
</body>
  
</html>

Producción:       

 

Referencia: https://primer.style/css/utilities/typography#typographic-styles

Publicación traducida automáticamente

Artículo escrito por akshitsaxenaa09 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 *