前端学习 -- Css -- 字体分类

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

serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
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 -- 字体分类的更多相关文章

前端学习 -- Css -- 字体的几个属性学习
font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...
前端学习 -- Css -- 字体
设置字体颜色,使用color来设置文字的颜色设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的 ...
vue—你必须知道的 js数据类型前端学习 CSS 居中事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的目录更多总结猛戳这里属性与方法语法计算属性特殊属性 vue 样式绑定 vue事件处理器表单控件绑定父子组件通信过渡效果 vue经验总结 javascript ...
2020年12月-第02阶段-前端基础-CSS字体样式
CSS字体样式属性调试工具应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字 ...
前端学习---css基本知识
css基本知识我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
Web前端学习——CSS
一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...
前端学习_04_font-awesome字体图标
使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页 ...
前端学习 -- Css -- 行间距
在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线 ...
前端学习 -- Css -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类为没访问过 ...

随机推荐

Python3入门（十）——调试与测试
一.异常处理 1.try...except...finally... 这个也就是Java里的try...cath..finally...了,直接看经典代码: try: print("开始执行 ...
C# online update demo
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
20155234 昝昕明《网络对抗技术》实验一 PC平台逆向破解
实践内容: 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 利用foo函数的Bof漏洞,构造一个攻击输入字符串,覆盖返回地址,触发getShell函数. 注入一个自己制作的sh ...
Exp3
利用不同免杀方式生成文件 1.msfvenom 使用msfvenom命令查看功能介绍其中有: -p 选择一个载荷(或者叫模块) -l 载荷列表 -f 生成的文件格式 -e 编码方式 -l 编码次数 ...
全方位Bindind分析
Binding,音译为绑定,通道捆她想一条数据的高速绑着“源”与“目标”: “源”乃提供数据的一方:“目标”乃接收数据并作出相应反应的一方: 过程感觉就像是,给一个“激励”,就会作出“反应”那样--- ...
flask使用sqlit3的两种方式
方式一:raw_sql import sqlite3 from flask import Flask, request, jsonify app = Flask(__name__) DATABASE_ ...
【转载】C++引用详解
原文:http://www.cnblogs.com/gw811/archive/2012/10/20/2732687.html 引用的概念引用:就是某一变量(目标)的一个别名,对引用的操作与对变量直 ...
CF434D Nanami's Power Plant
就是切糕那道题,首先对每个函数连一串,然后\(x_u\leq x_v+d\)这个条件就是\(u\)函数\(i\)取值连向\(v\)函数\(i-d\)取值边权为inf,然后答案就是最小割了. #incl ...
cookie提取dex文件
有时候在java层能获取dex文件的cookie,但是在java不能从cookie得到dex,如果想要获取只能通过jni在C层实现,具体实现代码如下(nexus手机4.4系统) static void ...
kubernetes 集群新增node 节点并将应用分配到新增节点
第一章 1.重新安装一台kubernetes node节点,新增节点:192.168.1.192 网址:https://www.cnblogs.com/zoulixiang/p/9504324.htm ...

前端学习 -- Css -- 字体分类

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

随机推荐

热门专题