在网页中将字体分成5大类：

  1. serif（衬线字体）
  2. sans-serif（非衬线字体）
  3. monospace （等宽字体）
  4. cursive （草书字体）
  5. fantasy （虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式。
一般会将字体的大分类，指定为font-family中的最后一个字体。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            作者：1213854220@qq.com

            时间：2017-04-12

            描述：衬线字体

        -->

        <p style="font-size: 20px;font-family: serif;">

            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK

        </p>

        <!--

            作者：1213854220@qq.com

            时间：2017-04-12

            描述：非衬线字体

        -->

        <p style="font-size: 20px;font-family: sans-serif;">

            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK

        </p>

        <!--

            作者：1213854220@qq.com

            时间：2017-04-12

            描述：草书字体

        -->

        <p style="font-size: 20px;font-family: cursive;">

            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK

        </p>

            <!--

            作者：1213854220@qq.com

            时间：2017-04-12

            描述：虚幻字体

        -->

        <p style="font-size: 20px;font-family: fantasy;">

            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK

        </p>

                <!--

            作者：1213854220@qq.com

            时间：2017-04-12

            描述：等宽字体

        -->

        <p style="font-size: 20px;font-family: monospace;">

            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK

        </p>

    </body>

</html>

效果：

中文区别不打，英文区别很明显

前端学习 -- Css -- 字体分类的更多相关文章

  1. 前端学习 -- Css -- 字体的几个属性学习

    font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...

  2. 前端学习 -- Css -- 字体

    设置字体颜色,使用color来设置文字的颜色 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的 ...

  3. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  4. 2020年12月-第02阶段-前端基础-CSS字体样式

    CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...

  5. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. Web前端学习——CSS

    一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...

  7. 前端学习_04_font-awesome字体图标

    使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页 ...

  8. 前端学习 -- Css -- 行间距

    在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线 ...

  9. 前端学习 -- Css -- 伪类

    伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...

随机推荐

  1. WPF 简易进度条效果

    最近做一个项目,看到以前同事写的进度条效果不错,所以,拿来简化了下,不炫,但是项目中还是够用的. 还是,先来看下调用以后的效果 1.因为ProgressbBar的Foreground显示不得不一样,所 ...

  2. [胡泽聪 趣题选讲]大包子环绕宝藏-[状压dp]

    Description 你有一个长方形的地图,每一个格子要么是一个障碍物,要么是一个有一定价值的宝藏,要么是一个炸弹,或者是一块空地.你的初始位置已经给出.你每次可以走到上.下.左.右这四个相邻的格子 ...

  3. C++ 对引用的深入理解

    观看了唐老师讲解的一节<第5课 - 引用的本质分析>感觉非常不错,有深度不废话,我喜欢--- 再此总结下,并且奉上视频下载地址--- 360网盘下载地址: https://yunpan.c ...

  4. 汇编 OR运算

    知识点:  OR运算  逻辑或  按位或 一.OR运算 12||1=1; 1||01=1; 0||0=0; || //逻辑或 | //按位或 int _tmain(int argc, _TCHA ...

  5. Ubuntu中程序部署时无法加载动态库的解决方法

    Ubuntu下修改环境变量的三种方法 添加环境变量无法解决,可尝试如下操作: sudo vim /etc/ld.so.conf 在ld.so.conf中加入动态库的目录... 然后 sudo ldco ...

  6. scala学习——（1）scala基础（下）

    (七)定长数组 val array_name = new Array[T](length) val array_name = Array("","") 通过() ...

  7. 微信小程序之用户信息授权 wx.getUserInfo

    用户授权 <button open-type="getUserInfo" bindgetuserinfo='getUser'>授权用户信息</button> ...

  8. Django高并发负载均衡

    1 什么是负载均衡? 当一台服务器的性能达到极限时,我们可以使用服务器集群来提高网站的整体性能.那么,在服务器集群中,需要有一台服务器充当调度者的角色,用户的所有请求都会首先由它接收,调度者再根据每台 ...

  9. javascript source map 的使用

    之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大意 ...

  10. centos 7 tomcat 开机自启

    第一章 1.将tomcat加入开启自己,以减少手动启动的麻烦 环境配置需要提前配置好.(我这里已经是不做操作了) 192.168.1.195 jdk1.8 +  tomcat 8 第二章 2.编写to ...