前端学习 -- 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 -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类为没访问过 ...

随机推荐

R语言入门：基本数据结构
1.向量向量是R语言中最基本的数据类型,在R语言中没有单独的变量. (1) 创建向量 R语言中可以用 = 或者 <- 来赋值. 向量名 <- 向量或向量名 = 向量向量的创建方 ...
网络对抗技术 2017-2018-2 20152515 Exp 8 Web基础
1.本实践的具体内容: (1).Web前端HTML(0.5分) 输入命令apachectl start打开apahce,并查看端口号,确认apache开启: 在kali浏览器中输入localhost: ...
3、class文件加载过程
1.加载2.链接(检验/准备/解析) 1/检验过程:检验class的数据格式.2/准备过程:创建静态域,并将这些域设为默认值.3/解析过程:在一个Java类中会包含对其它.类或接口的形式引用,包括它的 ...
mfc 动态为控件添加事件1
知识点: 认识窗口过程 GetWindowLong SetWindowLong 为动态控件绑定事件一.获取窗口过程二.设置新窗口过程 .书写一个新窗口过程函数窗口过程格式 LRESULT CAL ...
3.RapidIO串行物理层的包传输过程
转自https://www.cnblogs.com/liujinggang/p/10005431.html 一.引言前几篇文章已经谈到RapidIO的协议,串行物理层与控制符号. RapidIO协议 ...
CS190.1x Scalable Machine Learning
这门课是CS100.1x的后续课,看课程名字就知道这门课主要讲机器学习.难度也会比上一门课大一点.如果你对这门课感兴趣,可以看看我这篇博客,如果对PySpark感兴趣,可以看我分析作业的博客. Cou ...
微信小程序之动画 —— 自定义底部弹出层
wxml: <view class='buy' bindtap='showBuyModal'>立即购买</view>  ...
cadence allegro 封装原点修改
打开 dra文件后在菜单栏 setup - change drawing origin 在命令栏输入新的参考点位置如想更改新坐标位置为 1,2 .输入 x 1 2
Unity Dotween官方案例学习
本文只涉及一些案例,具体查看 DoTween 官方文档. 一. Basics public class Basics : MonoBehaviour { public Transform redCub ...
为什么说LAXCUS颠覆了我的大数据使用体验
切入正题前,先做个自我介绍. 本人是从业三年的大数据小码农一枚,在帝都一家有点名气的广告公司工作,同时兼着大数据管理员的职责. 平时主要的工作是配合业务部门,做各种广告大数据计算分析工作,然后制成各种 ...

前端学习 -- Css -- 字体分类

前端学习 -- Css -- 字体分类的更多相关文章

随机推荐

热门专题