字体样式

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,ol{list-style:none;}
13             a{text-decoration:none;}
14             img{border: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>

 

上一篇:CSS 字体样式


下一篇:使用echarts插件做图表常见的几个问题(六)——全国地图及其下钻