一、字体风格(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 ...

随机推荐

论文阅读（XiangBai——【PAMI2018】ASTER_An Attentional Scene Text Recognizer with Flexible Rectification )
目录 XiangBai--[PAMI2018]ASTER_An Attentional Scene Text Recognizer with Flexible Rectification 作者和论文 ...
求方差分析与两样本T检验区别
方差分析与两样本T检验. 1.首先可以看到方差分析(ANOVA)包含两样本T检验,把两样本T检验作为自己的特例.因为ANOVA可以比较多个总体的均值,当然包含两个总体作为特例.实际上,T的平方就是F统 ...
1.字符串操作：& 2.英文词频统计预处理
1.字符串操作: 解析身份证号:生日.性别.出生地等. ID = input('请输入十八位身份证号码: ') if len(ID) == 18: print("你的身份证号码是 " ...
IP通信基础学习第四周(上)
IP地址现在由因特网名字与号码指派公司ICANN进行分配,它是标志一个主机(或路由器)和一条链路的接口,其编址方法有:分类的IP地址.子网的划分.构成超网. 分类两级IP地址可以记为:IP::={&l ...
webservice常用两种身份验证方式
在项目开发,我们经常会使用WebService,但在使用WebService时我们经常会考虑以下问题:怎么防止别人访问我的WebService?从哪里引用我的WebService?对于第一个问题,就涉 ...
1344：【例4-4】最小花费 dijkstra
1344:[例4-4]最小花费 Dijkstra (1)a [ i ] [ j ] 存转账率(..转后所得率..) (2)dis [ i ] 也就是 a [ 起点 ] [ i ] (3)f [ i ] ...
django进阶开发(一)--session
基于cookie做用户验证时:敏感信息不适合放在cookie中 session依赖cookie session原理 cookie是保存在用户浏览器端的键值对 session是保存在服务器端的键值对 s ...
react中对于context的理解
一.context旧版的基本使用 1.context的理解当不想在组件树中通过逐层传递props或state的方式来传递数据时,可使用context来实现跨层级的组件数据传递. 2.context的 ...
base64使用
public static void main(String args[]) throws Exception { InputStream in = null; byte[] data = null; ...
php伪造ip头
<? $fp = fsockopen ("passport.baidu.com", 80, $errno, $errstr, 30); if (!$fp) { echo &q ...

font——文字属性大全