一、字体风格(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. RocketMQ基本概念

    RocketMQ基本概念 一.生产者 生产者发送业务系统产生的消息给broker.RocketMQ提供了多种发送方式:同步的.异步的.单向的. 1.1 生产者组 具有相同角色的生产者被分到一组.假如原 ...

  2. visualization of filters keras 基于Keras的卷积神经网络（CNN）可视化

    https://adeshpande3.github.io/adeshpande3.github.io/ https://blog.csdn.net/weiwei9363/article/detail ...

  3. webservice接口的开发和调用

    一.WebService的开发手段 使用Java开发WebService时可以使用以下两种开发手段 1. 使用JDK开发(1.6及以上版本) 2.使用CXF框架开发(工作中) 二.使用JDK开发Web ...

  4. c# 设计模式(一) 工厂模式

    源代码在github上面,需要的自己进行下载:https://github.com/yuzhoukamen/UnikmDesignPattern.git 工厂模式(Factory Pattern)是最 ...

  5. gzip对字符串的压缩和解压

    package org.jc.plugins.gzip; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStre ...

  6. Spring发送邮件

    Spring邮件发送流程:第一步:邮件发送,需要一个邮件服务器.可以使用腾讯获得网易的邮件服务器.登录邮箱,点击左上角的设置,再点击账号 找到下列选项,点击开启,需要发短信验证,或者使用QQ安全登录扫 ...

  7. HttpRequest,HttpResponse,乱码,转发和重定向

    HttpServletRequest简介 Web服务器收到客户端的http请求,会针对每一次请求,创建一个用于代表请求的HttpServletRequest类型的request对象,并将"H ...

  8. SAP abap 内表增加字段方法，结构复用

    1.include data: begin of gth_qamr.         include structure qamr. data: kurztext like qamv-kurztext ...

  9. 论文笔记：Decoders Matter for Semantic Segmentation: Data-Dependent Decoding Enables Flexible Feature Aggregation

    Decoders Matter for Semantic Segmentation: Data-Dependent Decoding Enables Flexible Feature Aggregat ...

  10. 数据结构与算法（C#）入门 --- 序

    注:本系列文章适合新手入门.博主也是摸着石头过河,难免有错误之处.还请谅解~ ~~~ 数据结构是什么? 数据结构是计算机存储.组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合 ...