前端学习 -- 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 -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...
随机推荐
- Java通过pinyin4j实现汉字转拼音
碰到个需求,需要按用户名字的首字母来排序.这就需要获取汉字对应的拼音了,突然就想起了pinyin4j这个jar包,于是就开始写了个汉字转拼音的工具类.在此记录一下,方便后续查阅 一.Pom依赖 ...
- 关于Trie的一些算法
最近学习了一下关于Trie的一些姿势,感觉很实用. 终于不用每次看到字符串判重等操作就只想到hash了 关于Trie的定义,来自百度百科 在计算机科学中,Trie,又称前缀树或字典树,是一种有序树状的 ...
- GIT命令基本使用
记录摘选自廖雪峰的官方网站归纳总结 1.centos下安装git [root@cdw-lj ~]# yum install git 2.配置用户名以及邮箱 [root@cdw-lj opt]# git ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- eclipse + maven + com.sun.jersey 创建 restful api
maven 创建 jersey 项目 如果没找到 jersey archetype, 下载 maven 的 archetype xml, 然后导入 archetypes 运行 右击 main.java ...
- pandas 初识（一）
基本内容 Series: Series 是有一组数据(numpy的数据类型 numpy.ndarray)以及一组数据标签(即索引)组成,可以看成一个一个定长的有序字典(索引值到数据值的一个映射) ob ...
- 用HackRF和Gqrx来听FM广播
本文内容.开发板及配件仅限用于学校或科研院所开展科研实验! 淘宝店铺名称:开源SDR实验室 HackRF链接:https://item.taobao.com/item.htm?spm=a1z10.1- ...
- js中文汉字按拼音排序
JavaScript 提供本地化文字排序,比如对中文按照拼音排序,不需要程序显示比较字符串拼音. String.prototype.localeCompare 在不考虑多音字的前提下,基本可以完美实现 ...
- Backbone实践案例
By:软件11 王思伦 2013-10-4 Backbone简述: Backbone基于MVC架构,用于开发重量级Javascript应用的框架. 如上文所述,Backbone包含多种类,但主要包含了 ...
- Linux内核设计与实现 第十八章
1. 内核调试的难点 重现bug困难 调试风险比较大 定位bug的初始版本困难 2. 内核调试的工具和方法 2.1 输出 LOG 输出LOG不光是内核调试, 即使是在用户态程序的调试中, 也是经常使用 ...