[2016-01-16][CSS][字体属性]

[2016-01-16][CSS][字体属性]
  • font属性
    • font-size 字体大小
      • font-size = 14px;
    • font-family 定义字体,用,号隔开
      • font-family:微软雅黑,serif; 
    • font-weight 字体加粗
      • normal默认值,bold粗,bolder更粗,lighter更细
      • 100,200,300-900
        • normal = 400,bold = 700,只能给整百的数值
    • font-style 字体样式
      • normal默认值
      • italic斜体
      • oblique倾斜的字体
      • inherit从父元素继承
    • font-variant 字体的异体
      • narmal默认值
      • small-caps显示小型大写字母的字体
        • (小写字母变大写,但是变成大写后的字体,比原本大写的要小一号)
      • inherit 从父元素继承



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
        .f1{ 
            font-size:14px;
            font-weight:lighter;
         }
        .f2{ 
            font-size:17px;
            font-weight:narmal;
         }
        .f3{ 
            font-size:17px;
            font-weight:bold;
         }
        .f4{ 
            font-size:17px;
            font-weight:bolder;
         }
         .f5{ 
            font-size:17px;
            font-weight:500;
         }
          
         .f6{ 
            font-size:17px;
            font-style:normall;
         }
         .f7{ 
            font-size:17px;
            font-style:italic;
         }
          .f8{ 
            font-size:17px;
            font-style:oblique;
         }
        .f9{ 
            font-size:17px;
            font-variant:normal;
         }
        .f10{ 
            font-size:17px;
            font-variant:small-caps;
         }
    </style>
    <body>
    <p class="f1">lighter细</p>
    <p class="f2">normal默认值</p>
    <p class="f3">bold粗</p>
    <p class="f4">bolder更粗</p>
    <p class="f5">font-weight:500</p>
    <p class="f6">font-style:narmal默认值</p>
    <p class="f7">font-style:italic,斜体</p>
    <p class="f8">font-style:oblique,倾斜的字体</p>
    <p class="f9">font-variant:normal;</p>
    <p class="f10">FFFfont-variant:small-caps;</p>
    </body>
</html>


来自为知笔记(Wiz)


posted on 2016-01-16 22:44  红洋  阅读(147)  评论(0)    收藏  举报

导航