Font字体和字号

使用了4种字体和两组字号,满足一般网页对于正文和标题的显示需求

字体

本框架一共提供了4种字体,各自的使用场景不同。

  1. _ff-body:正文字体,中文环境为雅黑字体
  2. _ff-icon:图标字体,默认为本框架图标字体
  3. _ff-alt:替代的正文字体,优先使用英文,用来做数字和英文特写
  4. _ff-code:代码字体,代码和源码标签所使用的字体
  • 输出
  • HTML
  • 正文字体

    中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。
  •                 
                    
                
  • 输出
  • HTML
  • 图标字体(使用图标字体时,不需要使用`_icon-`前缀。)

    search global add phone eye
  •                 
                    
                
  • 输出
  • HTML
  • 西文装饰字体

    (一段关于古希腊历史的文字,开始)Ancient Greece is often regarded as the cradle of Western civilization, influencing countless aspects of culture, politics, philosophy, and art. The history of Ancient Greece spans several centuries, from the early Minoan and Mycenaean civilizations (around 2000 BCE to 1100 BCE) to the rise of classical Greek city-states such as Athens and Sparta.(结束)
  •                 
                    
                
  • 输出
  • HTML
  • 代码字体

    #include <stdio.h>
    #include <stdlib.h>
    #include <time.h>
    int main() {
    //初始化
    int i;
    int rotationSpeed = 1000;
    srand(time(NULL));
    for (i = 0; i < 10; i++) {
    printf("running...\n");
    usleep(rotationSpeed * 1000);
    }
    //返回值
    return 0;
    }
  •                 
                    
                

字号

本框架提供两类字号,第一类是正文常用的具名字号:

  • _fs-ignore:12px/1.2rem,小型字号
  • _fs-body:14px/1.4rem,正文字号
  • _fs-caption:16px/1.6rem,标题字号
  • _fs-subject:18px/1.8rem,更大的标题字号
  • _fs-title:28px/2.8rem,新闻标题字号
  • _fs-huge:44px/4.4rem,超大标题字号

第二类是标题类型字号,与h1~h6标题相对应:

  • _fs-h1:1级标题字号,32px/3.2rem
  • _fs-h2:2级标题字号,28px/2.8rem
  • _fs-h3:3级标题字号,22px/2.2rem
  • _fs-h4:4级标题字号,18px/1.8rem
  • _fs-h5:5级标题字号,16px/1.6rem
  • _fs-h6:6级标题字号,14px/1.4rem

注意,_fs-title=_fs-h2,_fs-subject=_fs-h4,_fs-caption=_fs-h5,_fs-body=_fs-h6

  • 输出
  • HTML
  • _fs-ignore中国是以汉族为主体民族的多民族国家
    _fs-body中国是以汉族为主体民族的多民族国家
    _fs-caption中国是以汉族为主体民族的多民族国家
    _fs-subject中国是以汉族为主体民族的多民族国家
    _fs-title中国是以汉族为主体民族的多民族国家
    _fs-huge中国是以汉族为主体民族的多民族国家
  •                 
                    
                
  • 输出
  • HTML
  • _fs-h1中国是以汉族为主体民族的多民族国家
    _fs-h2中国是以汉族为主体民族的多民族国家
    _fs-h3中国是以汉族为主体民族的多民族国家
    _fs-h4中国是以汉族为主体民族的多民族国家
    _fs-h5中国是以汉族为主体民族的多民族国家
    _fs-h6中国是以汉族为主体民族的多民族国家
  •