前端学习 -- 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 -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...
随机推荐
- 7、mysql高级特性
7.1.分区表 7.1.1 分区表的原理 7.1.2分区表的类型 7.1.3如何使用分区表 7.1.4什么情况下出问题 7.1.5查询优化 使用explain 来分析sql使用的分区表 7.1.6合并 ...
- EZ 2018 04 21 NOIP2018 模拟赛（十） -LoliconAutomaton的退役赛
难得的一次Unrated,避免了重回1500的尴尬 其实题目都还可以,但只不过所有人T1都炸了,可能是数据的锅(假的) 而且我因为T1SB的把T2弃了,没想到是千年水题 T3莫名爆炸,然后TM的40分 ...
- 全方位Bindind分析
Binding,音译为绑定,通道捆她想一条数据的高速绑着“源”与“目标”: “源”乃提供数据的一方:“目标”乃接收数据并作出相应反应的一方: 过程感觉就像是,给一个“激励”,就会作出“反应”那样--- ...
- [CF1039E]Summer Oenothera Exhibition[根号分治+lct]
题意 给一个长度为 \(n\) 的序列, \(q\) 次询问,次给一个 \(k_i\) ,问最少将序列划分成多少次,满足每一段的极差不超过\(w−k_i\). \(1 \leq n, q \leq 1 ...
- 牛客网NOIP赛前集训营-提高组（第八场）-B-推箱子[最短路优化建图]
题意 有 \(n\) 个箱子,指定一个箱子开始向右推,如果碰到了别的箱子会令其移动,问 \(k\) 秒之后每个箱子所在的位置. \(n\leq 10^5\). 分析 转化成最短路模型,如果两个箱子 \ ...
- LOJ#6503.「雅礼集训 2018 Day4」Magic[容斥+NTT+启发式合并]
题意 \(n\) 张卡牌 \(m\) 种颜色,询问有多少种本质不同的序列满足相邻颜色相同的位置数量等于 \(k\). 分析 首先本质不同不好直接处理,可以将同种颜色的卡牌看作是不相同的,求出答案后除以 ...
- python中魔法方法__init__,__str__,__del__的详细使用方法
1. python中的魔法方法, 类似__init__, __str__等等,这些内置好的特定的方法进行特定的操作时会自动被调用 2. __init__的使用方法 class 类名(object): ...
- pandas 初识（一）
基本内容 Series: Series 是有一组数据(numpy的数据类型 numpy.ndarray)以及一组数据标签(即索引)组成,可以看成一个一个定长的有序字典(索引值到数据值的一个映射) ob ...
- 用Unity简单实现第三人称人物的移动和转向
上图不重要,因为实现人物的移动用的是动画,没有什么可说的,主要是下面实现人物的转向. 比如在一个平面中,玩家按了w和d键则人物会面向右前方向前进,如果此时玩家按了a和s键则人物会面向左后方向前进,那么 ...
- ubuntu server安装OVS
安装 Open vSwitch (Ubuntu Server 16.04) 1.查看主机系统内核版本:uname –a 2.上传openvswitch软件包,解压后执行安装: 更新下载源 $ sud ...