前端学习 -- 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 -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...
随机推荐
- 《网络对抗》Exp7 网络欺诈防范
20155336<网络对抗>Exp7 网络欺诈防范 实验内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 简单应用SET工具建立冒名网站 (1分 ...
- 20155336 虎光元《网络攻防》Exp2后门原理与实践
20155336 虎光元<网络攻防>Exp2后门原理与实践 一.实验内容 (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主机操作Shel ...
- 使用Fortify进行代码静态分析（系列文章）
BUG级别:低 Code Correctness(代码正确性) 1.Class does not Implement Equals(类未能实现Equals方法) Dead Code(死亡代码) 1.U ...
- [Oracle]如果误删了某个数据文件，又没有被备份，能否恢复？
如果你有从这个数据文件创建之前,直到现在的,所有的ArchiveLog 和 Online REDO,是有可能进行恢复的. 执行: RMAN> restore datafile <filei ...
- mfc 类三种继承方式下的访问
知识点 public private protected 三种继承方式 三种继承方式的区别 public 关键字意味着在其后声明的所有成员及对象都可以访问. private 关键字意味着除了该类型的创 ...
- 蒙提霍尔游戏 python 模拟
本文使用蒙特卡罗方法验证蒙提霍尔游戏的结论. 以下代码,本人原创! 完整代码 import random # 蒙提霍尔游戏 def play_game(strategy='nonchange'): # ...
- Codeforces 948D Perfect Security(字典树)
题目链接:Perfect Security 题意:给出N个数代表密码,再给出N个数代表key.现在要将key组排序,使key组和密码组的亦或所形成的组字典序最小. 题解:要使密码组里面每个数都找到能使 ...
- JavaScript中call,apply,bind方法的区别
call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...
- ZAB协议和Paxos算法
前言在上一篇文章Paxos算法浅析中主要介绍了Paxos一致性算法应用的场景,以及对协议本身的介绍:Google Chubby是一个分布式锁服务,其底层一致性实现就是以Paxos算法为基础的:但这篇文 ...
- SSM整合配置(Spring+Spring MVC+Mybatis)
一.配置准备 通过Maven工程,在eclipse中整合SSM,并在Tomcat服务器上运行 在进行配置前,先理清楚要配置哪些文件,如图,除web.xml外,其余三个配置文件名称均可自定义: 如图 ...