CSS3学习笔记之属性值

font-family

设置文本的字体名称。

font-style

设置文本样式。

取值

normal不使用斜体。

italic使用斜体。

oblique使用倾斜体。

inherit从父元素继承。

font-variant

设置文本是否大小写。

取值

normal使用浏览器默认值。

small-caps使用小型大写字母。

inherit从父元素继承

small-caps使用小型大写字母。

这个是什么意思呢?那么比如说我们在这里,也是用这个那我们在这呢把这个英文单词,换成小写。

<h1>Hello Html5  Css3</h1>

那么这里面,就就是这个小写的英文,那么我们可以给它h1加一个属性。

h1{*/

/*font-family: Arial;*/

/*font-variant: small-caps;*/

/*}

使用小型的大写字母,我们来保存一下,然后刷新。

CSS3学习笔记之属性值

我们发现这里的这个小写的这个e,那么它会自动把它转换为大写,但是它是小型的大写。那么这就是这个font-variant设置文本是否大小写。

font-weight

设置文本的粗细。

取值

normal使用浏览器默认值。

bold使用粗体。

bolder使用更粗的字体。

lighter使用更细的字体。

100-900从细字体到粗,值必须是100的倍数,其中400等于normal,700等同于bold。

我们来看一下,做一个演示,那我们注释掉h1,然后。

h1{

font-weight: bold;

}

那么这个时候我们来看一下效果。

CSS3学习笔记之属性值

字体没有拿到。

h1{

font-family: Arial;

font-weight: bold;

}

CSS3学习笔记之属性值

然后我们看一下,那么这是粗体,定义它的这个更粗的.

h1{

font-family: Arial;

font-weight: bolder;

}

CSS3学习笔记之属性值

这个字体可能不支持,没有什么变化。然后设置这个字体的,为更细的我们来看一下。

h1{

font-family: Arial;

font-weight: lighter;

}

CSS3学习笔记之属性值

字体就变细了一些。那么我们可以这样来把这个字体呢给复制几个。

<h1>Hello Html5  Css3</h1>

<h1>Hello Html5  Css3</h1>

<h1>Hello Html5  Css3</h1>

然后把它的这个值呢都拿到,默认的是更细的。

h1.bold{

font-weight:  bold;

font-size: 30px;

}

比如说这个第一个呢,给它这个。

<h1 class=" bold">Hello Html5  Css3</h1>

然后第二个使用这个,更粗的,然后再来一个。

h1.bolder{

font-weight:  bolder;

font-size: 50px;

}

<h1 class=" bolder">Hello Html5  Css3</h1>

那么我们来看一下,这样呢第一个呢会是这个细的,第二个呢会是粗的,第三个是更粗的。

CSS3学习笔记之属性值

那么我们可以看到这个颜色明显的一个深度。

font-stretch

设置文本是否横向的拉伸变形。(IE及Firefox已支持font-stretch,但显示效果与正常文字并无不同。)

取值

normal:正常文字宽度。

wider把伸展比例设置为更进一步的伸展值。

narrower:把收缩比例设置为更进一步的收缩值。

ultra-condensed:比正常文字宽度窄4个基数。

extra-condensed:比正常文字宽度窄3个基数。

condensed:比正常文字宽度窄2个基数。

semi-condensed:比正常文字宽度窄1个基数。

semi-expanded:比正常文字宽度宽1个基数。

expanded:比正常文字宽度宽2个基数。

extra-expanded:比正常文字宽度宽3个基数。

ultra-expanded:比正常文字宽度宽4个基数。

font-size

设置文本字体大小。那么我们来看一下font-size呢它是用来修改字体大小的,比如说我们把这个,更大的这个字体,我们其实可以在字体上面可以把它变成大一个层面。

h1.bolder{

font-weight:  bolder;

font-size: 50px;

}

那不如说大50个像素。然后上面这个,我们给它30个像素。

h1.bold{

font-weight:  bold;

font-size: 30px;

}

最后那个10个像素。

h1{

font-family: Arial;

font-weight: lighter;

font-size: 10px;

}

我们可以这样来。

CSS3学习笔记之属性值

50的30的10的,那么这是这个font-size的使用方法。那么到这里我们就讲完了这个服务器端字体的一个使用方法。

src

设置自定义字体的相对路径或者绝对路径,注意,此属性只能在@font-face规则里使用。

代码例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>在页面上显示服务器端的字体</title>

<style>

/*@font-face {*/

/*font-family: webfont;*/

/*src: url(qtgg.otf);*/

/*}*/

/*@font-face {*/

/*font-family: webfont;*/

/*font-style: italic;*/

/*src: url(jpzk.otf);*/

/*}*/

/*h1{*/

/*font-family: webfont;*/

/*}*/

/*h2{*/

/*font-family: webfont;*/

/*font-style: italic;*/

/*}*/

@font-face{

font-family:Arial;

src:local('Arial');

}

/*h1{*/

/*font-family: Arial;*/

/*font-variant: small-caps;*/

/*}*/

h1{

font-family: Arial;

font-weight: lighter;

font-size: 10px;

}

h1.bold{

font-weight:  bold;

font-size: 30px;

}

h1.bolder{

font-weight:  bolder;

font-size: 50px;

}

</style>

</head>

<body>

<h1>在页面上显示服务器端的字体</h1>

<h1>Hello Html5  Css3</h1>

<h1 class=" bold">Hello Html5  Css3</h1>

<h1 class=" bolder">Hello Html5  Css3</h1>

</body>

</html>

文章来源:麦子学院

原文链接:http://www.maiziedu.com/wiki/css3/value/

上一篇:CSS3学习之 transform 属性


下一篇:CSS3 animation属性中的steps实现GIF动图(逐帧动画)