Primer CSS Typography Type scale 实用工具

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

在本文中，我们将了解Typography Type Scale Utility 。 Typography Type Scale Utility 用于更改字体大小。它使用从 f1 到 f6 的多个类，其中 f1 提供最大字体大小，而 f6 提供最小字体大小。

班级：

• f*：根据所需的字体大小，类别从 f1 到 f6 不等。

句法：

    Content

*可以根据需要替换为 1 到 6 之间的任何数字。

让我们通过一个示例来了解这些类。

示例 1：我们将在此处编写一些文本，并使用 type scale 实用程序类更改其字体大小。

HTML

    

  

    

        
GeeksforGeeks
        
 Typography Type Scale Utility
    
    
GeeksforGeeks
  
    
GeeksforGeeks
  
    
GeeksforGeeks
  
    
GeeksforGeeks
  
    
GeeksforGeeks
  
    
GeeksforGeeks
  

输出：

示例 2：在此示例中，我们将了解 Lighter font-weight 实用程序。这些类降低了文本的易读性，尤其是在小字体时，因此比例仅在 20 像素时降至 f3。

HTML

    

  

    

        
GeeksforGeeks
        
 Typography Type Scale Utility
    
    
GeeksforGeeks
    
GeeksforGeeks
    
GeeksforGeeks
    
GeeksforGeeks
    
GeeksforGeeks

输出：

参考： https://primer.style/css/utilities/typography#type-scale-utilities