zoukankan      html  css  js  c++  java
  • 前端学习 -- 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>

    效果:

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

  • 相关阅读:
    c/c++设置图片为透明图
    转;说说AngularJS中的$parse和$eval
    转: css3: display:box详解
    转: 深入理解 AngularJS 的 Scope
    转:说说angularjs中的$parse和$eval
    转: 理解AngularJS中的依赖注入
    angularjs学习总结(快速预览版)
    XML基础知识
    读书笔记:js设计模式
    contains 和 ele.compareDocumentPosition确定html节点间的关系
  • 原文地址:https://www.cnblogs.com/androidsuperman/p/6701495.html
Copyright © 2011-2022 走看看