HTML巩固练习之字体样式

字体样式属性包括：font-family(字体类型)、font-size(字体大小)、font-weight(字体粗细)font-style(字体斜体)color(颜色)。

1、font-family：可指定多个字体，多个字体将按优先顺序排列，以逗号隔开，注意逗号一定要是英文逗号。

如果电脑上没有定义的这些字体，浏览器将按照默认的字体来显示，默认情况下是“宋体”。

代码编写：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>字体类型</title><style type="text/css">p{font-family :微软雅黑,Arial ,'Times New Roman' ;}</style>
</head>
<body><p>按顺序优先使用字体</p>
</body>
</html>

浏览器运行效果：

2、font-size:属性值可以有两种使用方式，使用关键字和使用px作为单位的数值。

采用关键字的方式是相对浏览器默认情况下的字体大小而言。实际开发中很少使用这种方法，一般是采用像素作为单位的数值。

代码编写：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>font-size属性</title><style type="text/css">#p1{font-size:xx-small;}#p2{font-size:x-small;}#p3{ font-size: small;}#p4 {font-size: medium;}#p5 {font-size: large;}#p6{font-size:x-large;}#p7{font-size:xx-large;}</style>
</head>
<body><p id="p1">字体大小为xx-small(最小)</p><p id="p2">字体大小为x-small(较小)</p><p id="p3">字体大小为small(小)</p><p id="p4">字体大小为medium(默认值，正常)</p><p id="p5">字体大小为large(大)</p><p id="p6">字体大小为x-large(较大)</p><p id="p7">字体大小为xx-large(最大)</p>
</body>
</html>

浏览器运行效果：

代码编写：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>font-size采用px单位</title><style type="text/css">#p1{font-size:12px;}#p2{font-size:15px;}#p3{font-size:18px;}</style>
</head>
<body><p id="p1">字体大小为12px</p><p id="p2">字体大小为15px</p><p id="p3">字体大小为18px</p>
</body>
</html>

浏览器运行效果：

3、color：颜色值可以有两种方式来显示，一个是关键字一个是16进制的RGB。

代码编写：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>字体颜色</title><style type="text/css">#p1{color:gray;}#p2{color:orange;}#p3{color:red ;}</style>
</head>
<body><p id="p1">字体颜色为gray(灰色)</p><p id="p2">字体颜色为orange(橙色)</p><p id="p3">字体颜色为red(红色)</p>
</body>
</html>

浏览器运行效果：

代码编写：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>字体颜色</title><style type="text/css">#p1{color:#03FCA1;}#p2{color:#048C02;}#p3{color:#CE0592 ;}</style>
</head>
<body><p id="p1">字体颜色为#03FCA1</p><p id="p2">字体颜色为#048C02</p><p id="p3">字体颜色为#CE0592</p>
</body>
</html>

浏览器运行效果：

4、font-weight：字体粗细和字体大小是不一样的，粗细指的是字体的“肥瘦”，大小指的是字体的“高宽”。

属性取值也有两种方法，一种是关键字，一种是100~900的数值。而对于中文网页来说，一般使用bold和normal这两个属性值，不建议使用数值（100~900）。

代码编写：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>font-weight属性值</title><style type="text/css">#p1{font-weight:lighter ;}#p2{font-weight:normal ;}#p3{font-weight:bold;}#p4{font-weight:bolder;}</style>
</head>
<body><p id="p1">字体粗细为light(较细)</p><p id="p2">字体粗细为normal(默认值，正常)<p><p id="p3">字体粗细为bold(较粗)</p><p id="p4">字体粗细为boder(很粗)</p>
</body>
</html>

浏览器运行效果：

5、font-style：定义字体的倾斜效果。font-style属性值为italic或oblique时，在浏览器预览的效果是一样的，不过从表中的定义就可以看出了；

italic是字体的一个属性，也就是说并非所有字体都有italic属性，对于没有italic属性的字体可以使用oblique将该字体进行倾斜设置。

代码编写：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>font-style属性</title><style type="text/css">#p1{font-style :normal;}#p2{font-style :italic;}#p3{font-style :oblique;}</style>
</head>
<body><p id="p1">字体样式为normal</p><p id="p2">字体样式为italic</p><p id="p3">字体样式为oblique</p>
</body>
</html>

浏览器运行效果：

HTML巩固练习之字体样式相关推荐

Android Toolbar 标题居中及字体样式自定义
首先找到 toolbar 所在xml布局文件,将toolbar控件放置在一个相对布局(RelativeLayout)中,然后设置 toolbar 的 title 为空(在 title 属性栏中随便打几 ...
BPM实例分享：如何设置表单字体样式
系统版本:V10.0 一些业务场景中,时尔需要改变表单字体那如何设置表单字体样式? 本文将会针对全局表单和单个表单进行阐述! 1.全局表单: 修改WFRES\CSS\MvcSheet.css , ...
CuteEditor 编辑器的字体样式无法控制的问题解决
之前,一直没有注意到这个问题,编辑器里的字体样式通常很大, 今天重新去看了官方的事例. 发现每个编辑实例都可以加载不同的css样式表,而且其样式不继承页面的css. 于是我就单独建立个Editor. ...
【转帖】详解CSS网页布局中默认字体样式
转自:http://www.52css.com/article.asp?id=1174 浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样 ...
css 字体样式设置
css字体样式(Font Style),属性时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网 ...
网页设计中的默认字体样式详解
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
Android --- RecycleView 中默认选择第一个 item，点击第 2 个 item 时改变其字体样式，其余的 item 的字体样式恢复默认
问题描述: RecycleView 中默认选择第一个 item,点击第 2 个 item 时改变其字体样式,其余的 item 的字体样式恢复默认代码如下: 主要的参数是 mPosition publ ...
Android中对同一个TextView设置不同字体样式
这个只是做一个笔记,详情见代码: 代码中的注释也有说明. TextView textView = (TextView) findViewById(R.id.textView1);SpannableSt ...
【温故知新】CSS学习笔记（字体样式属性）附加篇
CSS字体样式属性目录 CSS字体样式属性一.font属性二.color属性三.line-height 行间距(行高) 四.text-align 水平对齐方式五.text-indent 首行 ...
【温故知新】CSS学习笔记（字体样式属性）
CSS字体样式属性一.font-size:字号大小该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px. 相对长度单位说明 em ...

HTML巩固练习之字体样式

HTML巩固练习之字体样式相关推荐

最新文章

热门文章