• 前端学习 -- 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>
            <!--
                作者: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>

    效果:

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

  • 相关阅读:
    用户故事——老师
    用户故事——学生
    用户故事——管理员
    WebStorm 2018 最新激活码 license server
    vue cli 4.3.1版本脚手架 新人请看系列
    iviewtable表格数据 录音播放下载
    git修改远程仓库地址
    git上传提交个人心得
    layui 数据拆分 重组数据
    日志
  • 原文地址:https://www.cnblogs.com/androidsuperman/p/6701495.html
Copyright © 2020-2023  润新知