字体样式
Posted liugangjiayou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字体样式相关的知识，希望对你有一定的参考价值。
font-size 继承性 12px是最小的字体
0就是没有
16px是默认像素
em=父级字体大小 相对的字体单位 默认字体大小为16px和浏览器默认字体大小一样
em用在不是font-size的情况下=当前元素字体大小
rem=html字体大小 前面的数字是给定的倍数 rem在移动端使用 width padding 只要能用像素值都可以用rem来代替
% 是相对于父级字体大小去计算的
font-family:;字体类型
谷歌默认：微软雅黑 在浏览器后台的computed内查看不同属性
ie默认：宋体
sans-serif 非衬线字体 字体粗线均匀 比较黑 圆滑
serif 衬线字体 末端加粗 间隙末端或者以衬线结尾的一类字体
font-weight:;字体粗细
bold 加粗
bolder更粗
normal 正常 元素本身需要清除默认加粗样式时
100~900 不能使用 并不是所有的字体都支持数字
font-style:;字体倾斜
normal 元素（i em） 本身需要清除默认加粗样式
italic 倾斜字体
oblique 使字体倾斜 （当某些字体没有设置倾斜字体的时候使用）
font-variant:;定义字体小型大写字母
small-caps 让小写字体变成大写字母 但是比普通大写字母要小
大写字母不变
line-height:;行高
行间距 = 行高 - 字体大小 50px
px
em 1.5 1.6 1.2 可以省略em 留下倍数
rem
% 相对于当前元素的字体大小
写复合写法注意事项 必须写 字体大小 倒数第二 和 字体类型 倒数第一
font:12px "微软雅黑";
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content="liugang"> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title> new file </title> 10 <style type="text/css"> 11 *margin:0;padding:0; 12 ul,ollist-style:none; 13 atext-decoration:none; 14 imgborder:0; 15 html 16 font-size:50px; 17 18 body 19 font-size:20px; 20 21 div 22 /* width:10em; 23 height:10em; 24 background-color:pink; 25 font-size:50%; 26 font-family:sans-serif"黑体","微软雅黑",arial; 27 font-variant:small-caps; 28 line-height:150%; */ 29 font:small-caps oblique 12px/normal "微软雅黑";/*12px/normal 前面是字体 后面是行高*/ 30 line-height:2;/*line-height在font中不写不代表没有 默认值为normal*/ 31 font-family: "微软雅黑",sans-serif;/*如果微软雅黑不可用 在sans-serif找里面找一个非衬线字体使用*/ 32 33 span 34 font-size:20px; 35 font-family:"繁体"; 36 font-weight:bold;/* 加粗 */ 37 font-style:oblique; 38 39 @font-face 40 font-family:"繁体"; 41 src:url("bb2804/碳化硅黑体繁体.ttf") 42 43 /* 引入字体元素 导入字体 44 */ 45 46 h2 47 font-weight:normal; 48 49 i 50 font-style:normal;/* 取消倾斜标签 默认都为italic*/ 51 52 </style> 53 </head> 54 <body> 55 <div> 56 I lOVE you 57 我是最可爱的刘钢 58 </div> 59 <span> 60 我是行内元素 61 </span> 62 63 <h2>我是h2标签</h2> 64 <i>我是i标签</i> 65 </body> 66 </html>
以上是关于字体样式的主要内容，如果未能解决你的问题，请参考以下文章