一、字体风格(font-style)

<style type="text/css">

    /*默认值。浏览器显示一个标准的字体样式。*/

    p.normal {font-style:normal}

    /*浏览器会显示一个斜体的字体样式。*/

    p.italic {font-style:italic}

    /*浏览器会显示一个倾斜的字体样式。*/

    p.oblique {font-style:oblique}

</style>

<body>

    <p class="normal">normal风格的字体</p>

    <p class="italic">italic风格的字体</p>

    <p class="oblique">oblique风格的字体</p>

</body>

　　代码执行效果如图：（斜体和倾斜没什么区别）

二、文字变体（font-variant）

<style type="text/css">

    p.normal {font-variant: normal}

    p.small {font-variant: small-caps}

</style>

<body>

    <p class="normal">This is a paragraph(大是大，小是小)</p>

    <p class="small">This is a paragraph(全部转为大写)</p>

</body>

　　代码运行效果如图：

三、字体加粗（font-weight）

<style type="text/css">

    /*默认值。定义标准的字符。*/

    p.normal {font-weight:normal}

    /*粗体字符*/

    p.bold {font-weight:bold}

    /*更粗的字符*/

    p.bolder {font-weight:bolder}

    /*更细的字符*/

    p.lighter {font-weight:lighter}

</style>

<body>

    <p class="normal">normal标准粗细</p>

    <p class="bold">bold粗体字符</p>

    <p class="bolder">bolder更粗体字符</p>

    <p class="lighter">lighter更细的字符</p>

</body>

　　代码运行效果如下：

　　注意：font-weight的属性值也可以设置为100-900的数字(400 等于 normal,700 等于 bold)

四、文字大小（font-size）

<style type="text/css">

    /*默认值。字体大小是100px*/

　　p.size {font-size:100px}

</style>

<body>

    <p class="size">font-size:100px；大号字体</p>

</body>

　　代码运行效果如图：

　　注意：中文字体默认为16px，最小为12px(设置小于12以12显示)

五、行高（line-height）

<style type="text/css">

    p{width: 200px;height: 40px;border: 1px solid #000;}

    /*默认。设置合理的行间距。*/

    p.normal {line-height:normal}

    /*设置数字，此数字会与当前的字体尺寸相乘来设置行间距。*/

    p.number {line-height:1}

    /*设置固定的行间距。*/

    p.length {line-height:40px}

    /*基于当前字体尺寸的百分比行间距。*/

    p.percent {line-height:200%}

</style>

<body>

    <p class="normal">行高normal</p>

    <p class="number">行高number</p>

    <p class="length">行高length</p>

    <p class="percent">行高percent</p>

</body>

　　代码运行结果如下：

六、文字字体（font-family）

<style type="text/css">

    p.Yahei{font-family:"微软雅黑"}

    p.kai{font-family:"楷体";}

</style>

<body>

    <p class="Yahei">字体类型</p>

    <p class="kai">字体类型</p>

</body>

　　代码运行效果图如下：

　　注意：font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。使用某种特定的字体系列完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

七、复合样式

<style type="text/css">

    p{

        width:400px;

        height: 100px;

        border: 1px solid red;

        font:italic small-caps bold 40px/100px arial,sans-serif;

    }

</style>

<body>

    <p>font文字复合属性</p>

</body>

　　代码执行效果如下：

八、兼容

任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

font——文字属性大全的更多相关文章

CSS属性大全
字体属性:(font)大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style:oblique;(偏 ...
HTML标签及属性大全
HTML标签及属性大全基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</ ...
HTML CSS 属性大全
CSS 属性大全文字属性「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...
CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性字体名称属性(font-family) ...
css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
html标签属性大全
<marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marqu ...
(转)TextView属性大全
TextView属性大全今天研究了TextView一天了,发现网上有一篇讲TextView属性的,非常全,收藏一下先. 发现TextView有一个比较大的问题,就是文字排版的问题,遇到数字,字母,符 ...
HTML常用标签和属性大全
html标签< <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑 ...
Android（java）学习笔记88：TextView属性大全
TextView属性大全: android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...

随机推荐

zw-clay字王胶泥体系列
zw-clay字王胶泥体系列 zw-clay字王胶泥体系列,2018新版,也是在2012版本的基础上升级的. 字王胶泥体系列的idea,源自黏土动画电影的制作模式.同样,字王胶泥体系列,也非常适合于动 ...
2018-2019-20175205实验二面向对象程序设计《Java开发环境的熟悉》实验报告
2018-2019-20175205实验二面向对象程序设计<Java开发环境的熟悉>实验报告实验要求没有Linux基础的同学建议先学习<Linux基础入门(新版)>< ...
深入浅出Java探针技术1--基于java agent的字节码增强案例
Java agent又叫做Java 探针,本文将从以下四个问题出发来深入浅出了解下Java agent 一.什么是java agent? Java agent是在JDK1.5引入的,是一种可以动态修改 ...
python3 error 机器学习错误
AttributeError: 'NoneType' object has no attribute 'sqrt' 这个错误其实是因为 plt.scatter(x[:,0],x[:,1],x[:,2] ...
Java笔试
异常 Throwable是Java错误处理的父类,有两个子类:Error和Exception. Error:无法预期的严重错误,导致JVM虚拟机无法继续执行,几乎无法恢复捕捉的 Exception:可 ...
jquery-1.4.4.min.js无法解析json中result.data问题
如下图该版本无法解析json数据解决方法引用jquer.min.js,并且将$修改为jQuery
MySQL中使用union all获得并集的排序
项目中有时候因为某些不可逆转的原因使得表中存储的数据难以满足在页面中的展示要求.之前的项目上有文章内容的展示功能,文章分为三个状态待发布.已发布.已下线.他们在数据表中判断状态的字段(PROMOTE_ ...
git误commit大文件导致不能push问题解决
git push时终端报错: error: RPC failed; HTTP 413 curl 22 The requested URL returned error: 413 Request Ent ...
vue-router的简单理解
Vue-router原理了解一下: 找到一篇文章,分析的很透彻从vue-router看前端路由的两种实现,文章写的很好,看完这篇文章 ➕ 看源码应该可以理解,这里根据我浅显的理解概括一下: vue- ...
LinkedList源码阅读笔记（1.8）
目录 LinkedList类的注解阅读 LinkedList类的定义属性的定义 LinkedList构造器核心方法校验方法普通方法迭代器(iterator&ListIterator) ...

font——文字属性大全