字体样式 文本样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字体样式 文本样式相关的知识，希望对你有一定的参考价值。
参考技术A 1.字体类型： font-family<style>
.p1
font-family: 宋体;
.p2 font-family: "楷体";
.p3 font-family:Times,"Times New Roman", "楷体"</style>
<p class="p1">内容<p>
<p class="p2">内容<p>
<p class="p3">内容<p>
表示字体使用font-family属性
字体可以用引号包裹 也可以不加,如果浏览器认识Times我就采用Times的字体，如果不认识Times字体，我就采用 "Times New Roman"字体，如果也不认识 "Times New Roman"字体，那我就采用"楷体".如果楷体也不认识,那么就用浏览器默认的字体
2.字体大小： font-size
<style> div
font-size:12px;
pfont-size:2em;
spanfont-size:32px;
<div><p>内容</p></div>
<<p>内容</p>
<span>内容</span>
px是物理像素,em是根据父元素的大小来显示的, p的父元素是div div的字体大小是12px,那么p元素是2em 就等于 12px * 2 = 24px
p的父元素是body body的默认字体大小是16px 那么p是2em 根据父元素的大小来的, 就应该是16px*2=32px
3.字体风格： font-style
<style>.h font-style:italic/oblique;
.n font-style:normal; </style>
<h2 class="h">内容<h2>
<h2><em class="n">内容</em</h2>
i em font-style:italic;和font-style: oblique; 都表示斜体的意思
使用font-style:normal;可以把已经斜体的样式改成正常的字体样式
4.字体的粗细：font-weight、
<style>.p1 font-weight: bold;
.p2 font-weight: bolder;
h1font-weight: lighter; </style>
<p class="p1">内容</p>
<p class="p2">内容</p>
<h1>内容</h1>
使用font-weight属性设置bold 设置成为粗体字体,bolder 设置成为更粗的字体.bold和bolder设置的字体的粗细都是一样的, bold设置成粗体的以后 页面的显示就已经是最大值了 所以就算设置了bolder再大也不会发生明显变化
lighter 设置更细的字体
font-weight: normal 默认值，定义标准的字体 字体的粗细更加的标准 不加粗也不变细
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
字体类型要放在最后 字体风格和字体粗细可以颠倒位置 其他的不行
1.文本样式-color属性
<style>
p background:rgba(45,48,51,.5)
<p>内容</p>
除了使用英文单词red 或者blue 或者green,还可以使用 RGB
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
alpha透明度值为0 表示全透明,值为1 表示不透明,值为0.5或者.5 为半透明
2.排版文本段落： text-align
<style>
div
width: 400px;
border: 1px solid red;
text-align: justify/right/left/center;</style>
<div>内容</div>
text-align: right;把文本排列到右边
text-align: left;把文本排列到左边。默认值：由浏览器决定
text-align: center;把文本排列到中间
text-align: justify;实现两端对齐文本效果,两端对齐只正针对与文字（中英文都可以）
★text-align left center right 对img依然有用
3.首行缩进：text-indent
<style>
div
border:1px solid red;
width: 400px;</style>
.div1text-indent: 32px;
.div2text-indent: 2em;
<div class="div1">内容</div>
<div class="div2">内容</div>
text-indent表示首行缩进,2em是根据父元素的字体大小来的 父元素body字体大小默认16px, 2em 就是 16px*2=32px;
4.设置行高:line-height
<style>
div
border:1px solid red;
width: 400px;
line-height: 20px;</style>
<div>内容</div>
使用line-height属性设置行高 值越大 一行的间距也就越大,line-height一般要设置的比字体的大小要大一点，不然就会挤在一起,就如这里的默认字体大小是16px 如果你设置10px 就会挤在一起
行高的妙用
div
border:1px solid red;
width: 400px;
height:100px;
text-align: center;
line-height: 100px;</style>
<div>内容</div>
想设置文字的垂直居中就需要把line-height设置的和高度height的值一样
字体样式和文本样式
一、字体样式
<!doctype html> <html>
<head> <style> div{ color: #000; font-family: ‘微软雅黑‘,‘宋体‘; font-weight: 900; /*这是没有单位的*/ font-style:italic; /*oblique*/ font-variant: small-caps; /*小型大写字母：全部大写*/ /*字体复合样式写法：font:字体大小/行高 字体风格 粗细 小型大写字母 倾斜;*/ font: 12px/1.5 ‘微软雅黑‘ blod small-caps italic; } </style>
</head>
<body> <!-- start wrap --> <div>ddddd</div> <!--- end wrap -->
</body> </html>
二、文本样式
1 <!doctype html> 2 <html> 3 <head> 4 <style> 5 div{ 6 /*控制文本大小写*/ 7 text-transform: uppercase; /*全大写*/ 8 text-transform: lowercase; /*全小写*/ 9 text-transform: capitalize; /*首字母大写*/ 10 11 /*字间距*/ 12 letter-spacing: 2em/px; 13 /*词间距：当中间有空格的时候就会出现*/ 14 word-spacing:5em/px; 15 16 /*文本不换行（英文默认不换行）*/ 17 white-space: nowrap; 18 /*单词内强制换行：英文有空格的话强制换行，中文有没有都换行*/ 19 word-break: all-break; 20 21 /*文本溢出的省略号*/ 22 text-overflow: ellipsis; /*溢出的文本用省略号*/ 23 overflow: hidden;/*元素溢出隐藏*/ 24 25 /*文本对齐方式*/ /*line-height*/ 26 text-align: center; 27 text-align: left; 28 text-align: right; 29 text-align:justify; /*两端对齐*/ 30 31 /*首行缩进*/ 32 text-indent: 2em/px; /*1em=默认最小font-size*/ 33 34 /*文本修饰*/ 35 text-decoration: none; 36 text-decoration: underline; /*下划线*/ 37 text-decoration: overline; /*上划线*/ 38 text-decoration: line-throught; /*中划线*/ 39 } 40 </style> 41 </head> 42 <body> 43 <!-- start wrap --> 44 <div>sddddddddddsfd</div> 45 <!-- end wrap --> 46 </body> 47 </html>
以上是关于字体样式 文本样式的主要内容，如果未能解决你的问题，请参考以下文章