字体样式

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>

 

以上是关于字体样式的主要内容,如果未能解决你的问题,请参考以下文章

css字体样式

如何更改wireshark的字体和样式

notepad++设置字体大小和字体样式

用SecureCRT软件修改字体样式和大小的技巧

Word中的样式如何设置成两字体

CSS里怎么更改字体样式?需要更改字体和居中显示