入门 CSS 排版样式

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

在本文中，我们将了解印刷样式。 Primer CSS Typographic Styles 用于更改字体粗细、样式和对齐方式。

CSS 排版样式类：

• text-normal：该类用于编写普通文本。
• text-italic：该类用于书写斜体文本
• text-bold：该类用于书写粗体文本。
• text-semibold：此类用于半粗体文本。
• text-light：此类用于编写较轻的文本。
• text-uppercase：该类用于以大写形式书写文本。
• no-wrap：空格序列将折叠成一个空格。使用此类，文本将永远不会换行到下一行。
• ws-normal：该类用于编写普通文本。
• text-underline：此类用于编写带下划线的文本。
• no-underline：该类用于编写不带任何下划线的文本。
• text-emphasized：该类用于使文本强调/加强。
• text-small：该类用于使文本变小。
• 铅：该类用于在铅中书写文本。
• text-mono：此类用于使用 font-family 'monospace' 编写文本。
• user-select-none：这用于没有样式的文本。

句法：

    ...

示例 1：在此示例中，我们将编写一些文本并使用text-normal 、 text-italic 、 text-bold 、 text-semibold和text-light等类。

HTML

  

    

  

    

        GeeksforGeeks
    
  
    
 Typographic Styles
  
    

        Hi Geek! I am Normal Text
    
  
    
 
        Hi Geek! I am Italic Text
    
  
    

        Hi Geek! I am Bold Text
    
  
    

        Hi Geek! I am Semi-bold Text
    
  
    

        Hi Geek! I am Light Text
    
  

  

输出：

示例 2：在这个示例中，我们将编写一些文本并使用ws-normal 、 text-underline 、 no-underline 、 text-emphasized和text-small类。

HTML

  

    

  

    

        GeeksforGeeks
    
      
    
 Typographic Styles
      
    

        Hi Geek! I am a Normal whitespace Text
    
  
    

        Hi Geek! I am a Text underline Text
    
  
    

        Hi Geek! I am a No underline Text
    
  
    

        Hi Geek! I am a Emphasized Text
    
  
    

        Hi Geek! I am a Small Text
    
  

  

输出：

参考： https://primer.style/css/utilities/typography#typographic-styles