CSS字体属性详解-CSDN博客

网页默认字体样式在不同的浏览器里表现的往往不一致，浏览器最终呈现出的样式受三层控制：

浏览器默认样式；
网页定义样式；
用户自定义样式；

优先级为3 > 2 > 1，即用户自定义样式可以覆盖网页定义样式，而网页定义样式可以覆盖浏览器默认样式。

css中的字体属性：

font-family：规定元素的字体样式，可以设置多个字体名称，名称之间用逗号分隔（如名称之间有空格，需将名称包含在引号之内），浏览器会优先使用它所能识别的第一种字体。

font-family有两种的字体系列名称：

（1）.通用字体系列（拥有相似外观的字体系列组合）

（2）.特定字体系列（具体的字体名称），具体字体名称中英文对照详见 css font-family 各名称一览表

两种字体系列均可在font-family属性中使用，其中，css规定了五种通用字体系列：

Serif字体，这些字体成比例，而且有上下短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
Sans-serif字体,这些字体是成比例的，而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
Monospace字体，这些字体不成比例，每个字符的宽度都必须完全相同。这些字体可能有上下短线，也可能没有，Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
Cursive字体，这些字体模仿人的手写体，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantas字体，这样的字体包括 Western、Woodblock 和 Klingon。

各种通用字体系列的差别详见如下（在chrome浏览器中测试）：

<head>
    <meta charset="UTF-8">
    <title>T E S T</title>
    <style>
        .p1{
            font-family: Serif;
        }
        .p2{
            font-family: Sans-serif;
        }
        .p3{
            font-family: Monospace;
        }
        .p4{
            font-family: Cursive;
        }
        .p5{
            font-family: Fantasy;
        }
        .p6{
            font-family: Times;
        }
    </style>
</head>
<body>
<div>
    <p class="p1">这是Serif字体,比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线。</p>
    <p class="p2">这是Sans-serif字体系列,比如小写 l，大写 A 。</p>
    <p class="p3">这是Monospace字体系列，i和m有相同的宽度，如im。</p>
    <p class="p4">这是Cursive字体系列,如 A 左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。</p>
    <p class="p5">这是Fantasy字体系列，我们无法很容易地将其规划到任何一种其他的字体系列当中。</p>
    <p class="p6">这是Times字体系列，理论上讲，用户安装的任何字体系列都会落入到上述某种通用系列中</p>
</div>
</body>

设定一种字体font-family如：font-family: "Helvetica Neue", Helvetica, Arial,"PingFang SC", "Hiragino Sans GB", "Heiti SC","Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

应在所有的font-family中都提供一个通用字体系列，以防在浏览器无法提供匹配的特定字体时选择候选字体。

可以使用inherit值，但IE 浏览器不支持inherit属性。

js语法：object.style.fontFamily="Times,Serif";

font-style：规定元素的字体风格，设置使用斜体、倾斜或正常字体

font-style的取值有：

normal：选择font-family的常规字体
italic：选择斜体，如果当前字体没有斜体，则会使用倾斜体oblique代替
oblique：选择倾斜体，如果当前字体没有倾斜体，则会使用italic代替
inherit：从父元素继承字体样式

各样式差别详见如下（chrome中测试）：

<head>
    <meta charset="UTF-8">
    <title>T E S T</title>
    <style>
        .p1{
            font-style: normal;
        }
        .p2{
            font-style: italic;
        }
        .p3{
            font-style: oblique;
        }
    </style>
</head>
<body>
<div>
    <p class="p1">这是normal字体，浏览器默认值</p>
    <p class="p2">这是italic字体，浏览器显示斜体字体样式，对每个字体结构有一些小改动，来反映外观的变化，如 abcdef</p>
    <p class="p3">这是oblique字体，浏览器显示倾斜字体样式，将正常竖直文本倾斜，如 abcdef</p>
</div>
</body>

其中，italic和oblique都是斜体和倾斜体，那么它们有什么区别呢？引用 Mozilla 的说法，italic一般是指书写体，相比无样式的字体，通常会占用较少的宽度，而oblique一般只是常规字体的倾斜版本，而个人的理解是italic会使用font-family中字体的倾斜版本，oblique只是将字体作倾斜处理，类似于ps中的倾斜功能，实际效果没多少区别，一般用italic，如果font-family中没有改字体的italic，浏览器会使用oblique将字体倾斜，若oblique也没有，浏览器会将字体倾斜一定的角度合成仿oblique，知乎上对此也有说明。

可以使用inherit值，但IE 浏览器不支持inherit属性。

js语法：object.style.fontStyle = "italic";

font-size：规定字体的尺寸大小。实际是设置字体中字符框的高度。

font-size的取值：

绝对字体尺寸（小到大）： xx-small，x-small，small，medium，large，x-large，xx-large
相对字体尺寸：smaller，larger
长度表示
百分比表示

绝对字体的长度是根据一定的缩放因子变化，css1中缩放因子为1.5，css2中缩放因子为1.2，如果medium的大小是12px，则large的大小为（css2）12*1.2 = 14.4 = 14px（四舍五入）。所以绝对字体的大小要根据1、浏览器默认大小，2、所使用的字体（font-family）。

相对字体尺寸和百分比表示都是基于父级元素元素的相对表示，如larger表示比父级元素更大，100%表示是父级元素的100%大小。

长度表示的单位有px和em，em是一个相对父元素的值。查看关于em的一些介绍。

各样式差别如下：

<head>
    <meta charset="UTF-8">
    <title>T E S T</title>
    <style>
        .p1{
            font-size: xx-small;
        }
        .p2{
            font-size: x-small;
        }
        .p3{
            font-size: small;
        }
        .p4{
            font-size: medium;
        }
        .p5{
            font-size: large;
        }
        .p6{
            font-size: x-large;
        }
        .p7{
            font-size: xx-large;
        }
        .p8{
            font-size: 18px;
        }
        .p9{
            font-size: 1.5em;
        }
    </style>
</head>
<body>
<div>
    <p class="p1">这是xx-small字体</p>
    <p class="p2">这是x-small字体</p>
    <p class="p3">这是small字体</p>
    <p class="p4">这是medium字体，浏览器默认值</p>
    <p class="p5">这是large的字体</p>
    <p class="p6">这是x-large的字体</p>
    <p class="p7">这是xx-large的字体</p>
    <p class="p8">这是18px字体</p>
    <p class="p9">这是1.5em的字体</p>
</div>
</body>

可以使用inherit值，但IE 浏览器不支持inherit属性。

js语法：object.style.fontSize = "large";

font-weight：规定元素字体的粗细。

font-weight的取值分为关键字法（normal和bold两个）、相对粗细法（bolder和lighter连个）和数值法（100-900）。

font-weight 取值有：

lighter：更细的字符
normal：默认值，定义标准字符
bold：定义粗字符
bolder：更粗的字符
具体的数值，如100，200...900，400等同于normal，700等同于bold。

各样式差别如下：

<head>
    <meta charset="UTF-8">
    <title>T E S T</title>
    <style>
        .p1{
            font-weight: lighter;
        }
        .p2{
            font-weight: normal;
        }
        .p3{
            font-weight: bold;
        }
        .p4{
            font-weight: bolder;
        }
        .p5{
            font-weight: 100;
        }
    </style>
</head>
<body>
<div>
    <p class="p1">这是lighter字体</p>
    <p class="p2">这是normal字体，浏览器默认值</p>
    <p class="p3">这是bold字体</p>
    <p class="p4">这是bolder字体</p>
    <p class="p5">这是100的字体</p>
</div>
</body>

bolder、lighter所代表的字重是基于其父元素继承来的字重，与normal和bold并无关系，详见 Mozilla的font-weight。

有时会遇到font-weight无效的问题，网上的说法是要针对浏览器设置好font-weight属性，SegmentFault对此有说明。

可以使用inherit值，但IE 浏览器不支持inherit属性。

js语法：object.style.fontWeight = "normal";

font-variant：这一属性值好像都没见过，介绍说是把字母转换成小型大写字母

font-variant的值有：

normal：默认值，浏览器显示标准字体。
small-caps：显示小型大写字母。

各属性值差别如下：

<head>
    <meta charset="UTF-8">
    <title>T E S T</title>
    <style>
        .p1{
            font-variant: normal;
        }
        .p2{
            font-variant: small-caps;
        }
    </style>
</head>
<body>
<div>
    <p class="p1">hello WORLD,How are you?</p>
    <p class="p2">hello WORLD,How are,you?</p>
</div>
</body>

可以使用inherit值，但IE 浏览器不支持inherit属性。

js语法：object.style.fontVariant = "small-caps";

font-kerning：用于调整字体间距

一般调整中文无效，因为中文本来就显得方正，没必要再进行调整，除非是草书、行书或一些手写体。

IE浏览器下无效。

具有字距调整信息的opentype字体才有用。可查看一篇大神的文章：font-kerning

font-kerning的值：

auto：浏览器默认值，浏览器自动进行间距调整
normal：应用字距调整
none：禁用字距调整

一些字体会存在有字距表，字距表列出了特定的字母及它们的间距调整，使用normal会应用字距调整，而none会禁用字距调整。

font-kerning并不是所有的字符都有效，如果要对所有的字符调整，要使用letter-spacing。

letter-spacing：用于增加或减少字符间的空白。

允许使用负值，如果使用负值，会让字符排得更紧密。

letter-spacing的值：

normal：默认值，规定字符间没有额外的空间，等同于0。
length：定义字符间的固定空间，单位有px和em。

可以使用inherit值，但IE 浏览器不支持inherit属性。

js语法：object.style.letterSpacing = "2px";

word-spacing：用于增加或减少单词（word）间的空白。

css把字（word）定义为任何非空白字符字符组成的串，这对于英文就是一个个单词，但对于我们汉语呢？来看看效果：

<head>
    <meta charset="UTF-8">
    <title>T E S T</title>
    <style>
        .p1{
            word-spacing: normal;
        }
        .p2{
            word-spacing: 5px;
        }
        .p3{
            word-spacing: normal;
        }
        .p4{
            word-spacing: 5px;
        }
    </style>
</head>
<body>
<div>
    <p class="p1">Today is Tuesday,let's high happy</p>
    <p class="p2">Today is Tuesday,let's high happy</p>
    <p class="p3">这是第三段文字，今天是星期二，让我们嗨起来</p>
    <p class="p4">这是第四段文字，今天是星期二，让我们嗨起来</p>
</div>
</body>

可以看出对英文有效果，但对中文没有效果。

line-height：用于设置行间的距离（行高），不允许使用负值。

line-height的值：

normal：默认值
使用百分比，会继承父级元素的行高
使用像素值px
使用数值来设定行高，直接定义数值而不使用单位相当于定义一个缩放因子

差别详见如下：

<head>
    <meta charset="UTF-8">
    <title>T E S T</title>
    <style>
        .p1{
            line-height: normal;
            border: 1px #f00 solid;
        }
        .p2{
            line-height: 200%;
            border: 1px #0f0 solid;
        }
        .p3{
            line-height: 20px;
            border: 1px #00f solid;
        }
        .p4{
            line-height: 2;
            border: 1px #ff0 solid;
        }
    </style>
</head>
<body>
<div>
    <div class="p1">这是第一段文字</div>
    <div class="p2">这是第二段文字</div>
    <div class="p3">这是第三段文字</div>
    <div class="p4">这是第四段文字</div>
</div>
</body>

font使用简写属性时将多个属性写在一起，用于一次设置字体的多个方面，设置顺序为：font-style | font-variant | font-weight | font-size/line-height | font-family；其中，至少要指定字体大小和字体系列，未设定的属性会设为默认值。

如 font: 16px Times;

初次发表，如有错误，欢迎指正。