1个月学习基本静态页面，前端笔记202211月最新总结版7-文本属性font&none与normal运用总结
<h2 style="color: black; text-align: left; margin-bottom: 10px;">笔记7-文本属性font&none与normal<span style="color: black;">运用</span>总结</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-dcaffe1752161bee0139d546aead1650_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>文本<span style="color: black;">体积</span>属性</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.属性:font-size </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.属性值 <span style="color: black;">意见</span>设置为偶数，设为奇数的话，在<span style="color: black;">区别</span>浏览器解析的<span style="color: black;">区别</span>。在工作中，以UI给的数据为准。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - <span style="color: black;">能够</span>设置常规的属性值 20px(像素px单位是网页中最<span style="color: black;">平常</span>的单位值) </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">- 浏览器中规定默认的字体<span style="color: black;">体积</span>是16px</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - 浏览器之间存在差异,减少浏览器的差异,官方规定在浏览器中<span style="color: black;">表示</span>最小的字体是12px(<span style="color: black;">能够</span>设置比12px更小)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - 除了px单位,还有<span style="color: black;">有些</span><span style="color: black;">必须</span><span style="color: black;">认识</span>的单位</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - pt 磅 硬件设备上 12pt=16px</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - em 相对单位,相<span style="color: black;">针对</span>父级元素计算的单位 1em=16px(首行缩进)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.在ps中量出文字的像素值高度<span style="color: black;">便是</span>当前文本的<span style="color: black;">体积</span></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-806694bda96f9283152bfa9180f32412_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>文本字体类型属性</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.属性:font-family</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.属性值:在浏览器中默认的字体类型是宋体,为了更好的体验,高版本浏览器改为微软雅黑</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - 中文的属性值:<span style="color: black;">意见</span>加上引号</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - 英文的属性值</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - 当属性值<span style="color: black;">仅有</span>一个英文单词的时候不<span style="color: black;">必须</span>加引号</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> - 当属性值有<span style="color: black;">非常多</span>英文单词的时候<span style="color: black;">必要</span>添加引号</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-family: "Times New Roman", Times, serif,"微软雅黑"
}
</style>
</head>
<body>
谢谢你们<span style="color: black;">由于</span>有你温暖了四季
<div>
谢谢你们<span style="color: black;">由于</span>有你温暖了四季
</div>
</body>
</html></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>文本加粗、倾斜属性</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 加粗属性的设置</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 1.属性:font-weight</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 2.属性值</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">数值类型:100-900;整百的数值,<span style="color: black;">无</span>单位</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 100====细体</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 400====正常字体(默认值)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">700====加粗</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 900====更粗</p> 700和900实现的效果<span style="color: black;">同样</span>的;900更加<span style="color: black;">拥有</span>强调性<span style="color: black;">重要</span>词类型<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> lighter===细体</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> normal====正常字体(默认值)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> bold======加粗</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">bolder=</p>
我深感你的理解与共鸣，愿对话长流。 哈哈、笑死我了、太搞笑了吧等。 外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。
页:
[1]