前端学习 -- 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 -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...
随机推荐
- web窗体的运用
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebAp ...
- java 对象是可以判空的
比如这里存xml,这里判断了一下element是否为空,来避免空指针异常,推荐用guava的optional判空
- ECMAScript6——Set数据结构
/** * 数据结构 Set */ // ----------------------------------------------------- /** * 集合的基本概念:集合是由一组无序且唯一 ...
- Spring Boot (十四)： Spring Boot 整合 Shiro-登录认证和权限管理
这篇文章我们来学习如何使用 Spring Boot 集成 Apache Shiro .安全应该是互联网公司的一道生命线,几乎任何的公司都会涉及到这方面的需求.在 Java 领域一般有 Spring S ...
- Git管理多个SSH密钥，Git多帐号配置
版权声明:转载须标明本文转自严振杰的博客 https://blog.csdn.net/yanzhenjie1003/article/details/69487932版权声明:转载必须注明本文转自严振杰 ...
- 3dmax2020下载安装3dmax2020破解中文版下载安装
3dmax在室内设计.建筑设计领域是最专业的效果图制作软件,也是在游戏动画等领域中在场景方面最专业的软件,目前最新3dmax2020版本已出,我分享亲测好用的软件包,拿走不谢! 3dmax2020安装 ...
- allegro对齐操作
在placement edit模式下 选中元件,右键对齐即可.
- Kafka高性能吞吐关键技术分析
Apache Kafka官网提供的性能说明: Benchmarking Apache Kafka: 2 Million Writes Per Second (On Three Cheap Machin ...
- es6箭头函数使用场景导致的一些问题
1. 今天在使用draggable组件时,监听dragmove事件时获取到的事件对象有一些异常, 代码如下 draggable.on('drag:move', (event) => { cons ...
- HTTP 和 HTTPS 直观上看哪里不一样了
1. 我在自己搭建的 HTTP 网站上进行登陆测试 填写账号和密码,账号:123456 ,密码:654321 (当然是乱填的,只为了看传输数据) 点击登录,用wireshark抓包看看传输的数据 2. ...