html-字体

扫码查看

字体大小

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复习</title>
<style>
/*字体可以写多个,优先使用前面的字体,如果前面的字体在浏览器解析时不存在,使用后面一个*/
.box {
font-family: 华文彩云, 楷书;
}
.box1{
font-size: 32px;
}
/*1em=父级字体大小,google浏览器为12-16px。2em=32px*/
.box2{
font-size: 2em;
}
/*相对于父级容器中box1的百分比调整*/
.son1{
font-size: 50%;
}
</style>
</head>
<body>
<div class="box">大家好啊</div>
<div class="box1">大家好啊
<span class="son1">box1 son</span>
</div>
<div class="box2">大家好啊</div>
<div class="box3">大家好啊</div>
</body>
</html>

-----

html-字体-LMLPHP

字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tittle</title>
<style>
/*正常 较细 较粗 更粗*/
.box{
font-weight: normal;
}
.box1{
font-weight: lighter;
}
.box2{
font-weight: bold;
}
.box3{
font-weight: bolder;
}
/*- 给值*/
/*- `100-900`只能给整百数,值越大字体越粗*/
/*- `400`相当于正常的*/
/*- `700`相当于`blod`*/
</style>
</head>
<body>
<div class="box">大家好啊</div>
<div class="box1">大家好啊
<span class="son1">box1 son</span>
</div>
<div class="box2">大家好啊</div>
<div class="box3">大家好啊</div>
</body>
</html>
----
html-字体-LMLPHP

字体类型font-style

/*正常normal 斜体italic 倾斜oblique*/

字体颜色 font-color

  1. 直接给关键字color
  2. 16进制
  3. rgb /*red freen blue*/
  4. rgba /*red freen blue alpha透明程度*/
05-11 20:03
查看更多