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

css之font

时间:2020-02-21 00:14:23      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:显示效果   属性   多行   html   color   没有   地方   div   var   

  font属性可用于font-style,font-family,font-weigth,font-variant,font-size,line-height这六个属性的简写,下面来分别说明。

  1、font-style     文字倾斜

    参数:oblique/normal/italic  normal选择font-family的常规字体;oblique选择倾斜体;italic 选择斜体。

  2、font-weight    文字加粗

     参数:normal(400)/bold(700)/lighter(比从父元素继承来的值更细)/bolder(比从父元素继承来的值更粗)/number(一个介于 1 和 1000 (包含) 之间的 <number> 类型值).

 

  3、font-size     文字大小

    参数:20px(数字加单位)/关键字  可以使用关键字,像素或em数字值来定义字体大小。

       关键字:small/medium/large......    可用于定义网络字体大小。通过在body元素上定义关键字字体的大小,可以在网页的任何地方设置相对字体大小,有利于缩放整个网页的字体大小。

       像素:需要精确的像素时使用此种方法。像素大小固定 ,但不同浏览器有可能显示效果有细微的差别。

       组合方式:关键字+像素

       em:em的大小是动态的,当定义或继承font-size属性时,1em等于这个元素的字体大小。如果在网页中没有设置文字大小那1em等于浏览器默认文字大小通常是16px.如果设置了body元素字体大小为20px,那1em=20px,2em=40px. 换算公式如下:

         em=希望得到的像素大小/父元素字体像素大小

        可以设置body元素的字体大小为62.5%(即默认大小16px的62.5%)等于10px。所以20px=2em,16px=1.6em.

  4、font-family    文字字体    

    "主要字体","备选字体1","备选字体2"表示如果用户电脑上有"主要字体"就显示"主要字体",如果没有就选择"备选字体1",如果没有"备选字体1",那就是"备选字体2"。
    "英文字体","中文字体";英文字符 使用英文字体,中文字符 使用中文字体;

  5、font-variant   把段落设置为小型大写字母字体

    这个的意思就是所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

    参数:normal(浏览器显示一个标准字体) / small-caps(浏览器显示小型大写字母的字体) / inherit(从父元素继承font-variant属性的值)

  6、line-height   行高

    它代表了一行文字在容器中所占的高度,如果行高的值和容器的高度相等,那文字就会垂直居中。

    参数:normal/数字/长度/百分比

    测量多行文字行高的方法:

      a. 首先要知道文字的大小  b.知道两行文字之间的距离   c.拿上边量出的距离/2  d.行高是上边距+文字高度+下边距

       (如果b为奇数,文字上边距会少一像素,下边距会多一像素,如果行高为偶数那就刚好)

范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font</title>
    <style>
    body{
        font-size: 62.5%;
    }
    div{
        border:1px solid red;
        font-size: 1.5em;
        font-style: oblique;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 30px;
        font-variant: small-caps;
    }
    </style>
</head>
<body>
    <div>我的名字是davina</div>
</body>
</html>

 

     

 

    

    

css之font

标签:显示效果   属性   多行   html   color   没有   地方   div   var   

原文地址:https://www.cnblogs.com/davina123/p/12336460.html

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