HTML_CSS学习：常用的字符属性

一、字体大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体大小</title><style>/*body{*//*    font-size: 20px;*//*}*/.atguigu1{font-size: 40px;}.atguigu2{font-size: 30px;}.atguigu3{font-size: 20px;}.atguigu4{font-size: 12px;}.atguigu5{/*浏览器能够接受的最小字体是12px*/font-size: 3px;}.atguigu7{/*浏览器能够接受的最小字体是12px*/font-size: 16px;}</style>
</head>
<body><div class="atguigu1">尚硅谷1</div><div class="atguigu2">尚硅谷2</div><div class="atguigu3">尚硅谷3</div><div class="atguigu4">尚硅谷4</div><div class="atguigu5">尚硅谷5</div><div>尚硅谷6</div><div class="atguigu7">尚硅谷7</div></body>
</html>

二、字体族

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体族</title><style>.atguidu1{/*衬线字体：有棱角感*//*非衬线字体：五棱角感*/font-size: 50px;font-family: "微软雅黑";}.atguidu2{font-size: 50px;font-family: "黑体";}.atguidu3{font-size: 50px;font-family: "宋体";}.atguidu4{font-size: 50px;font-family: "华文彩云";}.atguidu5{font-size: 50px;font-family: "华文彩云","微软雅黑","黑体","宋体";}.atguidu6{font-size: 50px;font-family: "STCaiyun","STHupo","Microsoft YaHei",sans-serif;/*可以设置多个字体，按照从左往右的顺序逐个查找，找到就用，最后协商serif,sans-serif*/}</style>
</head>
<body><div class="atguidu1">尚硅谷1</div><div class="atguidu2">尚硅谷2</div><div class="atguidu3">尚硅谷3</div><div class="atguidu4">尚硅谷4</div><div class="atguidu5">尚硅谷5</div><div class="atguidu6">尚硅谷6</div></body>
</html>

三、字体风格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体风格</title><style>.atguigu1{font-size: 50px;font-style: normal;}属性名：font-style常用值：/*normal:正常（默认值）*//*italic:斜体（使用字体自带的斜体效果）*//*oblique:斜体（强制斜体产生的斜体效果）*//*推荐使用italic*/.atguigu2{font-size: 50px;font-style: italic;}.atguigu3{font-size: 50px;font-style: oblique;}em{font-size: 100px;font-style: normal;}</style>
</head>
<body><div class="atguigu1">尚硅谷1</div><div class="atguigu2">尚硅谷2</div><div class="atguigu3">尚硅谷3</div><em>尚硅谷4</em></body>
</html>

四、字体粗细

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体粗细</title><style>div{font-size: 50px;}.atguigu1{font-weight: lighter;}.atguigu2{font-weight: normal;}.atguigu3{font-weight: bold;}.atguigu4{font-weight: bolder;}.atguigu5{font-weight: 600;}/*数值：*//*100-1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时得精确程度）*//*        100-300等同于lighter 400-500等同于normal 600及以上等同于bold*/</style>
</head>
<body><div class="atguigu1">硅谷1</div><div class="atguigu2">硅谷2</div><div class="atguigu3">硅谷3</div><div class="atguigu4">硅谷4</div><div class="atguigu5">硅谷5</div></body>
</html>

五、字体复合属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体复合属性</title><style>.atguigu{font: bold italic 100px "华文彩云","华文琥珀";}</style>
</head>
<body><div class="atguigu">尚硅谷</div>属性名：font 可以把上述字体样式合并成一个属性编写规则1.字体大小，字体族必须写上2.字体族必须是最后以为，字体大小必须是倒数第二位3.各属性键空格隔开
实际开发中更推荐使用复合写法，但这也不是绝对得，比如只想设置字体大小，那就直接哦那个font-size属性</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/5630.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！