HTML5+CSS网页设计——文字样式属性

1.font-size : 用于设置文字的字号

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        p{
            font-size:30px/*字体大小为20px*/    
        }
    </style>
</head>

<body>
    <p>测试文本</p>
</body>
</html>

效果图:

HTML5+CSS网页设计——文字样式属性

2.font-family:用于设置字体

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        p{
            font-family:"微软雅黑";/*字体设置为微软雅黑*/
        }
    </style>
</head>

<body>
    <p>测试文本</p>
</body>
</html>

效果图:

HTML5+CSS网页设计——文字样式属性

 

3.font-weight:用于定义字体粗细

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{
            font-weight:normal;/*标准字体,默认*/
        }
        .two{
            font-weight:bold;/*定义粗体*/
        }
        .three{
            font-weight:bolder/*定义更粗*/
        }
        .four{
            font-weight:lighter/*定义更细*/
        }
        .five{
            font-weight:500/*数值取100-900;(100的整数值)定义由细到粗的字体,400等同于标准,700等同于粗体*/
        }
    </style>
</head>

<body>
    <p class="one">测试文本1</p>
    <p class="two">测试文本2</p>
    <p class="three">测试文本3</p>
    <p class="four">测试文本4</p>
    <p class="five">测试文本5</p>
</body>
</html>

效果图:

 

HTML5+CSS网页设计——文字样式属性

4.font-style:用于定义字体分格,如斜体,倾斜的字体

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{
            font-style: normal;/*默认值,显示为标准*/
        }
        .two{
            font-style:italic;/*显示斜体的字体样式*/
        }
        .three{
            font-style:oblique;/*显示倾斜的字体样式*/
        }
        
    </style>
</head>

<body>
    <p class="one">测试文本1</p>
    <p class="two">测试文本2</p>
    <p class="three">测试文本3</p>
    
</body>
</html>

效果图:

HTML5+CSS网页设计——文字样式属性

 

5.font 综合属性:对字体进行综合设置

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{
            font:italic  bold 36px "微软雅黑";
        }
/*        设置style:倾斜,粗体,size字号,famliy文字        */
    </style>
</head>

<body>
    <p class="one">测试文本1</p>
</body>
</html>

效果图:

 

HTML5+CSS网页设计——文字样式属性

6.@font-face:@font-face属性是cSS3的新增属性,用于定义服务器字体·通过@font-face属性,开发者可以在用户计算机未安装字体时,使用任何喜欢的字体。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        @font-face{
            font-family: 字体名称;
            src:url(字体路径);
        }
    </style>
</head>

<body>
    <p class="one">测试文本1</p>
</body>
</html>

上一篇:.NET 云原生架构师训练营(权限系统 系统演示 ActionAccess)--学习笔记


下一篇:微信小程序 订阅消息