css之font

标签：显示效果   属性   多行   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 (包含) 之间的 类型值).

　　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>fonttitle>
    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>我的名字是davinadiv>
body>
html>

css之font

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

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