您好!欢迎来到静学网! 注册 登入

  • 静学网专注SEO优化技术视频教程案例分析、算法知识,在这里免费学习到最新的SEO技术,让你轻松通往SEO高工程师级之路,全新的SEO算法将在这里得到解剖。同时静学网提供网站开发、app开发、移动开发、电商、自媒体、行业资讯等内容,丰富及弥补自己的知识体系,让你在未来更具有竞争力。

font属性是什么意思,font-family-style-weight-size属性用法及注意事项

web前端 教育推动者 次浏览
font-属性是CSS字体样式,通常在网页中使用的还是比较多的,它可以控制整个网页中字体的类型、风格、大小、粗细等等,很多刚开始学习的时候,可能会很快忘记这些属性的用法及区别,它们有些比较相似,为了让大家更好的理解,我们将每个属性进行实现一边,结合案例进行解剖,font-字体样式还是很好学的,基本没有什么难点,但是达到灵活运用,还需要多加练习,下面我们对CSS的字体样式进行讲解。
 

属性1:Font-family

 
Font-family是为了给网页字体设置类型字体。
 
属性值:

family-name  generic(通用)-family :用于某个元素的字体族名称或/及类族名称的一个优先表。默认值:取决于浏览器。
 
inherit      规定应该从父元素继承字体系列。
 
通常使用通用字体类型为:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace";
 
 
代码实现:
 
<!DOCTYPE html>
<html>
<head>
         <title>css教程</title>
         <style type="text/css">
              div{
                     font-family:monospace,fantasy,cursive,sans-serif,serif;
              }       
         </style>
</head>
<body>
     <div>
     <p>CSS字体类型</p> 
     <p>CSS字体类型</p> 
     <p>CSS字体类型</p> 
     <p>CSS字体类型</p> 
     </div>
</body>
</html>
 
效果实现:
 
 font-style
 
注意事项:

1 多个字体排列,从第一个开始使用,如果第一个没有则向后使用第二种类型字体,如果都没有,则默认使用浏览器字体。
 
2 为什么有些需要双引号或者单引号?因为有些字体类型命名是分开的,而这如果想要识别,一般加上单引号或者双引号都可以
 
 

属性2:font-style

 
font-style是设置字体风格,主要是斜体样式。
 
font-style 的值
 
normal          默认值。浏览器显示一个标准的字体样式。
italic               浏览器会显示一个斜体的字体样式。
oblique          浏览器会显示一个倾斜的字体样式。
inherit           规定应该从父元素继承字体样式。
 
 
代码实现:

<!DOCTYPE html>
<html>
<head>
                        <title>css教程</title>
                        <style type="text/css">
 
                             .l1{
              font-style: italic;
                             }
                             .l2{
                                 font-style: oblique;
                             }
                             .l3{
                               font-style: normal;
                             }
                        </style>
</head>
<body>
     <div>
     <p class="l1">font-style字体类型1</p>    
     <p class="l2">font-style字体类型2</p>    
     <p class="l3">font-style字体类型3</p>    
     </div>
</body>
</html>
实现效果
 
font-style 

注意事项:

1 italic 和 oblique是一样的字体样式
 

属性3:font-variant

 
font-variant 可以设定小型大写字母。



font-variant 的值:
 
normal          默认值。浏览器会显示一个标准的字体。
small-caps    浏览器会显示小型大写字母的字体。
inherit           规定应该从父元素继承 font-variant 属性的值。
 
代码实现过程
 
<!DOCTYPE html>
<html>
<head>
                        <title>css教程</title>
                        <style type="text/css">
 
                             .l1{
              font-variant:small-caps;
                             }
                        </style>
</head>
<body>
     <div>
     <p class="l1">font-variant字体类型1</p>         
     </div>
</body>
</html>
 
实现效果

font-variant
 
 
注意事项:
 
这种字体风格只是看起来更加的不一般,并不是我们所说的大小写字母。
 
 

属性4:font-weight

 
font-weight是用于设置字体的粗细情况的。
 
font-weight的值:
 
normal          默认值。定义标准的字符。
bold                定义粗体字符。
bolder            定义更粗的字符。
lighter           定义更细的字符。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit           规定应该从父元素继承字体的粗细。
 
代码实现过程:
 
<!DOCTYPE html>
<html>
<head>
                        <title>css教程</title>
                        <style type="text/css">
 
                             .l1{
              font-weight: bold;
                             }
                             .l2{
                                 font-weight: bolder;
                             }
                             .l3{
                                font-weight: lighter;
                             }
        
         .l4{
            font-weight: 900;
         }
         .l5{
            font-weight: 100;
         }
                        </style>
</head>
<body>
     <div>
     <p class="l1">font-weight字体类型1</p>
     <p class="l2">font-weight字体类型2</p>
     <p class="l3">font-weight字体类型3</p>
     <p class="l4">font-weight字体类型4</p>
     <p class="l5">font-weight字体类型5</p>
     </div>
</body>
</html>
 
 
实现效果
 
 font-weight
 

属性5 font-size

 
font-size是设置字体大小用的,通常浏览器默认的字体大小为16px,也就是等于1em,值得注意的是font-size可以用百分比和像素来表示。



静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明font属性是什么意思,font-family-style-weight-size属性用法及注意事项
顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码:点击我更换图片
合作伙伴:
自学网