前端学习 -- 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 -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...
随机推荐
- 20155308《信息安全系统设计基础 嵌入式C语言课堂考试补博客
20155308<信息安全系统设计基础 嵌入式C语言课堂考试补博客 知识点 置位 ?bits = bits | (1 << 7) ; /* sets bit 7 */ bits |= ...
- VS编程，WPF中，获取鼠标相对于当前屏幕坐标的一种方法
原文:VS编程,WPF中,获取鼠标相对于当前屏幕坐标的一种方法 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/det ...
- HW 2017 12 17可禾大佬神题
好不容易搞来的题目,不写一写怎么行呢. 不过难度真心不高(一小时K掉),都是老题+暴力题,没有欧洲玄学. 再说一句,这试卷是叶可禾出的吧. T1 好老的题目,看到有多组数据我还怕了,以为有更流弊的算法 ...
- Luogu P1113 杂务
终于没有打模板题了. 一道简单的拓扑题目(但记得以前第一次做的时候爆0了). 发现这个做事的过程是按一定顺序的,然后如果一个工作的前面没有任何事情的话,它一定先被完成(如果不的话就不能使时间最小化,其 ...
- Java类加载器学习笔记
今后一段时间会全面读一下<深入理解Java虚拟机> 在这里先记一下在网上看到的几篇介绍 类加载器 的文章,等读到虚拟机类加载机制再详细介绍. 超详细Java中的ClassLoader详解 ...
- 1.0.0 Unity零基础入门——打砖块
1)设置好相应场景 2)创建脚本挂载到相应物体上并编写 2.代码 //Shoot - - 控制小球生成与射击 using System.Collections; using System.Collec ...
- 科普贴 | 以太坊代币钱包MyEtherWallet使用教程，一步步教你玩转MEW
MyEtherWallet 是一个以太坊的网页钱包,使用非常简单,打开网页就可以使用,源代码开源,不会在服务器上存储用户的钱包信息如私钥和密码.支持 Ledger Wallet.TREZOR 等硬件钱 ...
- webstorm开发微信小程序代码提醒(webstorm开发工具)
使用了微信提供的开发工具是真心难用,卡顿厉害.中英文切写注释换相当不爽.还没办法多开窗口,相信大家也遇到过这种现象. 下边我们介绍下webstorm来开发微信小程序的一些配置: File---sett ...
- Linux内核分析第四周总结
用户态,内核态和中断处理过程 库函数将系统调用封装起来 用户态和内核态的差别: 在内核态时,cs和eip的值可以是任意地址,但在用户态时只能访问0x00000000 - 0xbfffffff,0x00 ...
- YQCB冲刺第二周第六天
今天的任务为界面的美化. 昨天的任务为实现由用户设置每月初始额度的功能. 暂未遇到问题. 站立会议 任务面板