一、字体风格(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——文字属性大全的更多相关文章

  1. CSS属性大全

    字体属性:(font)大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style:oblique;(偏 ...

  2. HTML标签及属性大全

    HTML标签及属性大全 基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</ ...

  3. HTML CSS 属性大全

    CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...

  4. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  5. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  6. html标签属性大全

    <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marqu ...

  7. (转)TextView属性大全

    TextView属性大全 今天研究了TextView一天了,发现网上有一篇讲TextView属性的,非常全,收藏一下先. 发现TextView有一个比较大的问题,就是文字排版的问题,遇到数字,字母,符 ...

  8. HTML常用标签和属性大全

    html标签< <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑 ...

  9. Android（java）学习笔记88：TextView属性大全

    TextView属性大全: android:autoLink       设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...

随机推荐

  1. [经验共享] MapGIS实用小功能图解——由excel文件导成MapGIS点文件

    项目小组的几个成员都是学地下水和环境的,对于GIS懂得不是很多,于是把一些我们经常用到的mapgis实用小功能做成帮助文档,方便大家使用,发布共享! 1.整理好EXCEL文件(注意X,Y坐标的正确性( ...

  2. Excel坐标自动在AutoCad绘图_３

    众所周知,Excel对数据处理的功能非常强大,它可以进行数据处理.统计分析已经辅助决策的操作,该软件已经渗透到各个领域.作为一个测绘人,GISer, 也经常利用excel完成一些测量表格的自动化计算, ...

  3. Delphi使用两种不同方法获取系统端口信息--（装载）

    Delphi使用两种方法获取windows系统的端口,还可测试发送消息,点击获取端口信息后,可依次得到如下信息:DCB结构大小.波特率大小.XON的临界值.XOFF的临界值.字符位数.奇偶检验位.停止 ...

  4. httpd 处理模型

    prefork 一个请求用一个进程响应 worker 一个请求用一个线程响应(启动多个进程,多个进程生成多个线程) event 一个进程,处理多个请求

  5. 使用aspx 直接生成excel

    <%@ Page Language="C#" EnableEventValidation="false" ResponseEncoding="g ...

  6. iframe父子操作

    1.js在iframe子页面操作父页面元素代码: window.parent.document.getElementByIdx_x("父页面元素id"); 2.js在父页面获取if ...

  7. python文件读书笔记

    一.打开文件 1 f=open('text.txt',r)  二.读取文件 print(f.read) 三.关闭文件 f.close() 比较好用的是运用with with open('text.tx ...

  8. 面试小记---java基础知识

    **static 和 final 的理解**  static:是静态变量修饰符,修饰的是全局变量,所以对象是共享的,在开始类设计的初期就分配空间.     final:声明式属性,方法,类.分别表示属 ...

  9. Oracle错误——tablespace 'XXXX' does not exist

    错误 在使用IMP命令导入Oracle数据的时候,因为导出数据的数据库表空间和导入数据的数据库表空间不同,导致导入数据失败,出现:tablespace 'XXXX' does not exist 在网 ...

  10. Python3 tkinter基础 Scale orient 横竖 resolution单步步长 length 长度 tickinterval 指示刻度

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...