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

在网页中将字体分成5大类：

  1. serif（衬线字体）
  2. sans-serif（非衬线字体）
  3. monospace （等宽字体）
  4. cursive （草书字体）
  5. fantasy （虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式。
一般会将字体的大分类，指定为font-family中的最后一个字体。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--
            作者：[email protected]
            时间：2017-04-12
            描述：衬线字体
        -->
        <p style="font-size: 20px;font-family: serif;">
            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK
        </p>
        <!--
            作者：[email protected]
            时间：2017-04-12
            描述：非衬线字体
        -->
        <p style="font-size: 20px;font-family: sans-serif;">
            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK
        </p>

        <!--
            作者：[email protected]
            时间：2017-04-12
            描述：草书字体
        -->
        <p style="font-size: 20px;font-family: cursive;">
            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK
        </p>
            <!--
            作者：[email protected]
            时间：2017-04-12
            描述：虚幻字体
        -->
        <p style="font-size: 20px;font-family: fantasy;">
            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK
        </p>
                <!--
            作者：[email protected]
            时间：2017-04-12
            描述：等宽字体
        -->
        <p style="font-size: 20px;font-family: monospace;">
            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！IHK
        </p>
    </body>

</html>

效果：

中文区别不打，英文区别很明显

时间： 2024-10-24 05:15:57

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

前端学习 -- Css -- 字体的几个属性学习

font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的 - 一般我们只会使用italic font-weight可以用来设置文本的加粗效果 可选值: normal,默认值,文字正常显示 bold,文字加粗显示 该样式也可以指定100-900之间的9个值, 但是由于用户的计算机往往

前端学习 -- Css -- 行间距

在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示.行间距 = 行高 - 字体大小. 通过设置line-height可以间接的设置行高,可以接收的值: 1.直接就收一个大小: 2.可以指定一个百分数,则会相对于字体去计算行高: 3.可以直接传一个数值,

前端学习-css(一)

一.CSS介绍 1.什么是CSS CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染) 2.CSS语法 css实例 每个CSS样式由两个部分组成:选择器和声明.声明有包括属性和属性值.每个声明之后用分号结束. 3.CSS注释 /*这是注释*/ 二.CSS的几种引入方式 1.行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用 2.内

前端学习 -- Css -- 兄弟元素选择器

为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 +

前端学习 -- Css -- 否定伪类

语法::not(.选择器) 作用:可以从已选中的元素中剔除出某些元素. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:not(.soyoungboy){ background-color: cadetblue; color: red } &l

前端学习——css(初级)

1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和 外保护层(margin) .下图为控制台中的盒子详解:浏览器的控制台是我们了解一个元素最好的一个工具,下图可以清晰的看出一个盒子所拥有的属性. 元素的实际宽高 上图可清晰的看出 元素实际的宽=border-left+padding-left+元素内容宽+padding-right+border-right 元素实际的高=b

前端学习 --Css -- 子元素的伪类

:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序: :first-of-type 寻找指定类型中的第一个子元素 :last-of-type 寻找指定类型中的最后一个子元素 :nth-of-type 寻找指定类型中的指定子元素 可以使用even,来找到偶数的子元素 可以使用odd,来找到奇数的子元素 demo: <!DOCT

前端学习 -- Css -- 属性选择器

属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]:选取属性值以指定内容开头的元素 [属性名$="属性值"]:选取属性值以指定内容结尾的元素 [属性名*="属性值"]:选取属性值中包含指定内容的元素 demo:(注:这么尴尬的诗句肯定不是我写的) <!DOCTYPE html> <html> &l

前端学习 -- Css -- 选择器的优先级

当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示. 优先级的规则 内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式.