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

随机推荐

一个handle使用更新线程的实例
handle更新线程实例 package com.example.administrator.handle; import android.app.Activity;import android.os ...
【转】jenkins+gitlab配置遇到问题
搭建jenkins+gitlab拉取代码失败,日志如下: ERROR: Error fetching remote repo 'origin'hudson.plugins.git.GitExcepti ...
node获取当前路径的三种方法
node提供了3种获取路径的方法 ,在当前目录下,运行node const {resolve} = require('path') console.log('__dirname : ' + __di ...
Hadoop Mapreduce中wordcount 过程解析
将文件split 文件1: 分割结果: hello world ...
python3下爬取网页上的图片的爬虫程序
import urllib.request import re #py抓取页面图片并保存到本地 #获取页面信息 def getHtml(url): html = urllib.request.urlo ...
小试wsl
安装管理员权限运行powershell,执行如下命令: Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Su ...
机器学习总结（一） Adaboost,GBDT和XGboost算法
一: 提升方法概述提升方法是一种常用的统计学习方法,其实就是将多个弱学习器提升(boost)为一个强学习器的算法.其工作机制是通过一个弱学习算法,从初始训练集中训练出一个弱学习器,再根据弱学习器的表 ...
深度学习网络中numpy多维数组的说明
目前在计算机视觉中应用的数组维度最多有四维,可以表示为 (Batch_size, Row, Column, Channel) 以下将要从二维数组到四维数组进行代码的简单说明: Tips: 1) 在nu ...
Vue-admin工作整理（十九）：从数字渐变组件谈第三方JS库Count-to的使用
1.组件封装基础 npm install countup@latest 2.组件中使用id值 3.组件中获得dom 如何封装一个组件,在组件中用到需要传入HTML元素ID值的JS库时如何处理,如何获取 ...
TP5创建动态数据表
$sql = " CREATE TABLE IF NOT EXISTS `$table_name` (`id` int(11) unsigned NOT NULL AUTO_INCREMEN ...

font——文字属性大全