整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

详细解析html字体属性

设置字体样式的基本标签是<font></font>,被其包含的文本为样式作用区。在初学者的HTML代码编写中,<font></font>容易被多重嵌套,如<font 属性1=值1><font 属性2=值2>文本</font></font>。还有一种情况是标签嵌套错位,如<font><p>文本</font></p>。为了规范代码的编写,避免不必要的错误,读者在初学时一定要谨慎。

2、设置文字的颜色 color 是标签的属性之一,用于设置文字颜色。color是<font></font>标签的属性之一,用于设置文字颜色。例子如:浅红色文字:<font color="#dd0000">51UM博客即汤汤个人博客网站,是一个和草根站长们一起学习分享网站SEO优化技术、web前端开发为主的个人博客网站。</font>

3、设置文字的尺寸 size 也是标签的属性,用于设置文字大小。size 的值为1-7, 默认为3。我们可以 size 属性值之前加上“+”“-”字符,来指定相对于字 、 号初始值的增量或减量。例子如: size为1:<font size="-2">HTML学习</font>

4、使文字倾斜,用双标签<i></i>可使被作用文字倾斜,达到特殊的效果,例如文章的日期。<em></em>被称为强调标签,也是斜体,目前使用比<i></i>标签更频繁,其编写方法如下:

<i>这是斜体文字</i>

<em>这也是斜体文字</em>

5、 使文字加粗,用双标签<b></b>可使被作用文字加粗,是文字更加醒目,例如文章的标题部分。<strong></strong>被称为特别强调标签,也是文字加粗,目前使用比<b></b>标签更频繁,其编写方法如下:

<b>这是粗体文字</b>

<strong>这也是粗体文字</strong>

除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址,谢谢!

技术等级】初级

【承接文章】《强大的CSS选择器,CSS的核心技术,前端小白必备功底》

本文重点讲解CSS技术中有关字体样式的属性以及这些属性的取值。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。

从本文开始,小海老师将带领大家认识CSS技术中的所有属性。我把CSS技术中的各个属性进行了分类,首先我们从与字体样式有关的属性开始。

CSS中与字体有关的属性包括以下六个:

  • font-family

  • font-size

  • font-weight

  • font-style

  • font-variant

  • color

一、字体样式属性:

CSS利用font-family属性来设置字体或字体列表。

1、设置字体:

.sty01{font-family:黑体;}

上述代码定义了用户自定义类sty01,该样式设置字体为“黑体”。利用class属性取值为sty01样式的HTML标记对中的文字将以“黑体”的字体显示。

2、设置字体列表:

.sty02{font-family:汉仪综艺体简,微软雅黑,黑体;}

上述代码定义了用户自定义类sty02,该样式设置了一个字体列表。利用class属性取值为sty02样式的HTML标记对中的文字,首先以“汉仪综艺体简”的字体显示,目标浏览器所在的设备若没有安装该字体,则自动以“微软雅黑”的字体显示;目标浏览器所在的设备若也没有安装“微软雅黑”字体,则自动以“黑体”的字体显示。

注意:为了防止CSS文件的中文字体名称不符合字符集的要求,所以习惯上都是用中文字体的外文名称来书写font-family属性的取值,下面我就为大家罗列几个常用的字体名称。

  • 设置字体为 微软雅黑:.style1{font-family:Microsoft YaHei;}

  • 设置字体为 宋体:.style2{font-family:SimSun;}

  • 设置字体为 幼圆:.style3{font-family:YouYuan;}

  • 设置字体为 黑体:.style4{font-family:SimHei;}

  • 设置字体为 楷体:.style5{font-family:KaiTi;}

更多中文字体的西文名称,小海老师会在后续的文章中详细罗列。

二、字号大小属性:

CSS利用font-size属性来设置文本的字号效果

1、绝对大小:

  • xx-small

  • x-small

  • small

  • medium

  • large

  • x-large

  • xx-large

上述取值中:medium为默认值,medium以上的取值越来越小,medium以下的取值越来越大。

2、相对大小:

  • smaller,比上一级元素的字体大小小一号。

  • larger,比上一级元素的字体大小大一号。

代码实例:

<div style=“font-size:14px;”>

<span style=“font-size:larger;”>段落文字内容</span>

</div>

上述代码中“段落文字内容”的字体大小显示为比14px字号大一号的外观。

3、带有单位的长度值:

代码实例:.s1{font-size:16px;}

上述代码定义了用户自定义类s1,该样式设置字号为16px大小。

4、百分比:

设置字体字号为上一级元素的百分比大小。

代码实例:.s2{font-size:10%;}

上述代码定义了用户自定义类s2,该样式设置字号是上一级元素的字体大小的20%。

三、字体粗细属性

CSS利用font-weight属性来设置文本的粗细效果

  • normal,普通粗细,粗细度约为400。

  • bold,粗体,粗细度约为700。

  • bolder,更粗体,粗细度约为900。

  • lighter,更细体,粗细度约为500。

  • 100、200、300、400、500、600、700、800、900:9个粗细等级。

但是现在的浏览器都无法将字体的粗细渲染的如此细腻,也就是说这9个等级的粗细度并没有明显的差异。

四、字体斜体属性

CSS利用font-style属性来设置文本的斜体效果

  • normal,普通,字体显示为不斜体。

  • italic,斜体,设置字体为斜体。

  • oblique,倾斜体,当特殊字体没有斜体效果时,可以使用该取值将字体倾斜。

五、设置字体是否为小型大写字母

CSS技术利用font-variant属性来设置是否为小型大写字母

  • normal,普通,字体显示为正常。

  • small-caps,小型大写字母。

六、设置字体的颜色

CSS技术利用color属性来设置文本颜色

  • 十六进制颜色代码。

实例:h1{color:#ff0000;}

含义:重定义HTML中的h1标记对为红色。

  • 十进制颜色代码。

实例:h2{color:rgb(0,255,0);}

含义:重定义HTML中的h2标记对为绿色。

  • 颜色英文单词。

实例:h3{color:blue;}

含义:重定义HTML中的h3标记对为蓝色。

文章预告

下一次小海老师会为大家讲解CSS中有关文本段落的属性,结合前面HTML的内容,可以对页面中的段落进行更为细致的调整。千万不要错过哦。

小海声明

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。

、标签的分类:双标签和单标签

双标签:就是成对出现的,类似于这种 <html> </html>

单标签:就是可以单个使用的,类似于 <br> 换行标签 或 <hr>水平线标签。

二、标签属性的作用:

标签的属性是用来定义文字或字符的 颜色、宽高、粗细、大小、等,这个是标签属性的作用。


三、标签属性的特性:

1、每一个标签都有自己的属性,单标签和双标签都有。

2、一个标签可以有多个属性。

3、每个属性都有对应的值,值要用单或双引号引起来。

4、多个属性之间使用空格隔开。

5、属性没有顺序之分。

6、字体属性值,必须是系统可以识别的字体,一般为系统自带字体。

7、HTML5 中 font 属性已经弃用。

源代码:↓

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!--网页抬头-->

<title>中央气象局</title>

</head>

<body>

<!--水平线的宽度是500像素,这个width就是标签属性-->

<hr width="500">

<!--下面这个是多个标签属性,多个属性之间用空格隔开-->

<font color="red" face="黑体" size="7">标签属性</font>

</body>

</html>