码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-04-12 23:47:59      阅读:482      评论:0      收藏:0      [点我收藏+]

标签:images   指定   mono   20px   doctype   --   设置   pac   fan   

在网页中将字体分成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>
        <!--
            作者: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 -- 字体分类

标签:images   指定   mono   20px   doctype   --   设置   pac   fan   

原文地址:http://www.cnblogs.com/androidsuperman/p/6701495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!