W3School-CSS 字体(font)实例

最新推荐文章于 2024-08-05 15:57:37 发布

weixin_30566063

最新推荐文章于 2024-08-05 15:57:37 发布

阅读量161

点赞数

文章标签：人工智能

原文链接：http://www.cnblogs.com/hoey/p/5025699.html

版权

CSS 字体(font)实例

CSS 实例

CSS 背景实例
CSS 文本实例
~~CSS 字体(font)实例~~
CSS 边框(border)实例
CSS 外边距 (margin) 实例
CSS 内边距 (padding) 实例
CSS 列表实例
CSS 表格实例
轮廓（Outline）实例
CSS 尺寸 (Dimension) 实例
CSS 分类 (Classification) 实例
CSS 定位 (Positioning) 实例
CSS 伪类 (Pseudo-classes)实例
CSS 伪元素 (Pseudo-elements)实例

01设置文本的字体

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>01设置文本的字体</title>
        <style type="text/css">
            body {
                background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151207120828824-739848359.jpg);         
            }
            p.serif {font-family: "Times New Roman",Georgia,Serif;}
            p.sansserif {font-family: Arial,Verdana,Sans-serif;}
        </style>
    </head>
    <body>
        <h1>CSS font-family</h1>
        <p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
        <p class="sansserif">This is a paragraph, shown in the Arial font.</p>
    </body>
</html>

02设置字体尺寸

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>02设置字体尺寸</title>
        <style type="text/css">
            body {
                background-color: #CCFFFF;
            }
            
            h1 {
                font-size: 300%;
            }
            
            h2 {
                font-size: 200%;
            }
            
            p {
                font-size: 100%;
            }
        </style>
    </head>

    <body>
        <h1>我是标题1</h1>
        <h2>我是标题2</h2>
        <p>我是一个段落</p>
    </body>

</html>

03设置字体风格

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>03设置字体风格</title>
        <style type="text/css">
            body {
                background-color: #CCFFFF;
            }
            
            h1 {
                font-style: normal;
            }
            
            h2 {
                font-style: italic;
            }
            
            p {
                font-style: oblique;
            }
        </style>
    </head>

    <body>
        <h1>One always has time enough, if one will apply it well.</h1>
        <h2>One always has time enough, if one will apply it well.</h2>
        <p>One always has time enough, if one will apply it well.</p>
    </body>

</html>

04设置字体的异体

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>04设置字体的异体</title>
        <style type="text/css">
            body {
                background-color: #CCFFFF;
            }
            
            p.normal {
                font-variant: normal;
            }
            
            p.small {
                font-variant: small-caps;
            }
        </style>
    </head>

    <body>

        <p class="normal">One always has time enough, if one will apply it well.</p>
        <p class="small">One always has time enough, if one will apply it well.</p>
    </body>

</html>

05设置字体的粗细

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>05设置字体的粗细</title>
        <style type="text/css">
            body {
                background-color: #CCFFFF;
            }
            
            p.normal {
                font-weight: normal;
            }
            
            p.thick {
                font-weight: bold;
            }
            
            p.thicker {
                font-weight: 900;
            }
        </style>
    </head>

    <body>

        <p class="normal">Where is the 哈哈 point?</p>
        <p class="thick">Where is the 哈哈 point?</p>
        <p class="thicker">Where is the 哈哈 point?</p>
    </body>

</html>

06所有字体属性在一个声明之内

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>06所有字体属性在一个声明之内</title>
        <style type="text/css">
            body {
                background-color: #CCFFFF;
            }
            
            p.sty1 {
                font: italic arial, sans-serif;
            }
            
            p.sty2 {
                font: italic bold 20px/100px arial, sans-serif;
            }
        </style>
    </head>

    <body>

        <p class="sty1">Where is the 哈哈 point?</p>
        <p class="sty2">Where is the 哈哈 point?</br>
           (我的大小20px行高100px)</p>
    </body>

</html>

CSS字体实例总结

转载于:https://www.cnblogs.com/hoey/p/5025699.html

weixin_30566063

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W3School-CSS 字体(font)实例

CSS 字体(font)实例CSS 实例CSS 背景实例CSS 文本实例CSS 字体(font)实例CSS 边框(border)实例CSS 外边距 (margin) 实例CSS 内边距 (padding) 实例CSS 列表实例CSS 表格实例轮廓（Outline）实例CSS 尺寸 (Dimension) 实例CSS 分类 (Classification) 实例CSS ...
复制链接

扫一扫