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;*/

/*}

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

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

font-weight

设置文本的粗细。

取值

normal使用浏览器默认值。

bold使用粗体。

bolder使用更粗的字体。

lighter使用更细的字体。

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

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

h1{

font-weight: bold;

}

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

字体没有拿到。

h1{

font-family: Arial;

font-weight: bold;

}

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

h1{

font-family: Arial;

font-weight: bolder;

}

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

h1{

font-family: Arial;

font-weight: lighter;

}

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

<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>

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

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

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;

}

我们可以这样来。

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学习笔记之属性值的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. 机器学习实战（Machine Learning in Action）学习笔记————06.k-均值聚类算法（kMeans）学习笔记

    机器学习实战(Machine Learning in Action)学习笔记————06.k-均值聚类算法(kMeans)学习笔记 关键字:k-均值.kMeans.聚类.非监督学习作者:米仓山下时间: ...

  3. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  4. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  5. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  6. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  7. 我的CSS3学习笔记

    1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...

  8. 十天精通CSS3学习笔记 part3

    第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. ...

  9. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

随机推荐

  1. ural 1109,NYOJ 239,匈牙利算法邻接表

    NYOJ 239:http://acm.nyist.net/JudgeOnline/problem.php?pid=239 ural 1109 :http://acm.timus.ru/problem ...

  2. Poj(1459)，最大流，EK算法

    题目链接:http://poj.org/problem?id=1459 Power Network Time Limit: 2000MS   Memory Limit: 32768K Total Su ...

  3. isp和3a的联系与区别是什么？

    Willis Zen上善若水 2 人赞同 你说的这个问题,不是很多人能够回答的,我也只能把我知道的告诉你.isp 是image signal processing,用于图像处理,比如gamma调整,d ...

  4. 重大发现： windows下C++ UI库 UI神器-SOUI(转载)

    转载:http://www.cnblogs.com/setoutsoft/p/4996870.html 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多语言 ...

  5. 窗口移动--基类(BaseForm)

    #region 窗口移动 private bool _isLeftButtonDown = false; public const int HTCAPTION = 0x0002; protected ...

  6. SqlSever基础 rtrim函数 除去字符串的右边的空格，左边中间的不管

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  7. SUSE Linux Enterprise Server 设置防火墙开启ssh远程端口

    1.vi /etc/sysconfig/SuSEfirewall2   #编辑防火墙设置 FW_SERVICES_EXT_TCP="22"   #开启22端口 rcSuSEfire ...

  8. 起点CG原创教程——digicel.FlipBook.6教程

    http://blog.renren.com/blog/262793929/473221163

  9. 关于Android构建

    “IDE都是给小白程序员的,大牛级别的程序员一定是命令行控,终端控,你看大牛都是使用vim,emacs 就一切搞定” 这话说的虽然有些绝对,但是也不无道理,做开发这行要想效率高,自动化还真是缺少不了命 ...

  10. maven实现依赖的“全局排除”

    大多数java应用源码构建和依赖管理是使用maven来实现的,maven也是java构建和依赖管理的事实上的标准.我们的应用系统也都是基于maven构建的,maven虽然在依赖管理方面确实很牛叉,但是 ...