font文字:
font-size 可以控制文字的大小
后面可以放入像素 (比较精准)
如果未来去做网页的时候 那么就使用工具量一下像素 然后写上就可以了
medium 默认样式 中等的 合适的
相对大一点large 、x-large、xx-large
相对小一点samll、x-samll、xx-samll
font-weight:控制文字粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体粗细</title>
<style>
.p1{
font-weight:100px;
}
/* 范围:100-1000 */
.p2{
font-weight:bold;
}
.p3{
font-weight:boler;
}
.p4{
font-weight:lighter;
}
</style>
</head>
<body>
<p class="p1">hahha </p>
<p class="p2">hahha </p>
<p class="p3">hahha </p>
<p class="p4">hahha </p>
</body>
</html>
font-family:给予元素字体
注意:开发人员电脑上的字体,如果使用者没有的话那么是不会显示的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<style>
.p1{
font-family:"SimSun";
}
.p2{
font-family: "Microsoft Yahei";
}
.p3{
font-family: "STHeiti";
}
</style>
</head>
<body>
<p class="p1">字体111</p>
<p class="p2">字体222</p>
<p class="p3">字体333</p>
</body>
</html>
font-height:可以设定内容在自己的内部的高度位置
在html中 有些元素有一些默认的样式
line-height 如果大小为元素的大小时 内容会在中心
可以控制行内元素 但是控制不了 块状元素
% 继承父级的高度的来控制的,数字是支持的,px 使用最常规的,不支持负数
font-style样式:
italic <-> 是使用的字体斜体
oblique <-> 是让字体倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font—style</title>
<style>
/* italic <-> 是使用的字体斜体*/
/*oblique <-> 是让字体倾斜 */
.p1{
font-style:italic;
}
.p2{
font-style:oblique;
}
</style>
<body>
<p class="p1">今天天气不是很好,下雨了,很冷,风很大</p>
<p class="p2">skajsxajlsk</p>
</body>
</html>
font-variant:把段落设置为小型大写字母字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
font-variant: small-caps;
}
</style>
</head>
<body>
<p>hahhaha</p>
<p>hhahahahahahah</p>
<div>shdahskdas</div>
</body>
</html>
font 比较常用的缩写样式
p{
font: small-caps italic bold 15px/30px fantasy;
}
font包含六样
font-size: 15px;
line-height: 30px;
font-family: fantasy;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
标签:style,family,weight,笔记,字体,italic,系列学习,font,CSS From: https://blog.51cto.com/u_15949973/6033995