码迷,mamicode.com
首页 > Web开发 > 详细

18.CSS文本样式【上】

时间:2018-02-28 19:45:03      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:相对   []   cap   特殊   安装   文字   表示   服务器端   src   

                                             第十五章  CSS文本样式

一、字体总汇

二、字体设置

   1font-size      

     1xx-small   }

     2x-small    }

     3small      }    设置字体的大小,每个值从小到大的固定值

     4mediue     }

     5large      }

     6x-large    }

     7xx-large   }

      例、p{

             font-size:50px;   

          }

     8smaller    }   设置字体相对于父元素字体的大小

     9larger     }

     例、body{

              font-size:50px;      //父元素字体的大小  

         }

         p{

              font-size:smaller;   //比父元素小一点   

         }

     10)数字+px  

     11)数字+%  使用父元素字体的百分比大小。    //(9)

   2font-variant  设置字体是否以小型大写字母显示

     1normal      表示如果以小型大写状态,让他恢复小写状态。

     2small-caps  让小写字母以小型大写字母显示。

   3font-style

     1normal    表示让斜体恢复正常状态

     2italic    表示使用斜体

     3oblique   表示让文字倾斜。区别在没有斜体时使用。

   4font-weight

     1normal                 表示让加粗字体恢复正常

     2bold                   粗体

     3bolder                 更粗的字体

     4lighter                轻细的字体

     5100900之间的数字     600及之后都是加粗,之前不加粗

   5font-family

     例、p{

            font-family:楷体,微软雅黑,宋体; //如果电脑里没有楷体,则看有没有微软雅黑,以此类推,如果还没有宋体,则系统恢复系统默认字体。

         }

   6font  字体设置简写组合方式。格式如下:

                   [是否倾斜][是否加粗][是否转小型大写] 字体大小 字体名称

        p{

            font: small-caps italic bold 50px 楷体;   //[]的元素能互相调整,而把字体大小 字体名称放前面则失效。

        }

三、Web 字体(虽说合一用备用字体来解决用户端字体缺失问题,但总究用户体验不好,且不一定所有用户都安装,

所以CSS提供了Web字体,也就是服务器端字体)

   1@font-face{

          font-family:abc;

          src:url(‘字体文件名‘);

      }

      p{

          font-size:50px;

          font-family: abc;

      }

     

      //英文字体比较小,而中文字体则很大,所以,中文字体想要使用特殊字体可以使用图片,大面积使用中文字体不太建议。

 

18.CSS文本样式【上】

标签:相对   []   cap   特殊   安装   文字   表示   服务器端   src   

原文地址:https://www.cnblogs.com/keshuai752100461/p/8485156.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!