字体属性介绍

  • CSS中的字体属性是干什么的呢?字体字体肯定和字体有关咯,就是设置HTML页面中文本的字体,

    CSS中常用的字体属性有几种呢,笔者给大家梳理了下,比较常用的一共有5种,今天我们就看看这5种能给文本的字体带来什么效果呢。
  • CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)。
  • CSS中常用的字体属性有5种,如:font-stylefont-weightfont-sizefont-familyfont

font-style设置斜体

  • font-style属性主要是给文本设置斜体用的。

font-style属性使用表

描述
normal 将斜体字体恢复正常。
italic 设置字体为斜体。
  • 让我们进入font-style属性的实践,实践内容如:将HTML页面中的p标签的文本字体设置为斜体。

  • 假如我们不使用font-style属性,可不可将p标签中的文本字体设置为斜体呢?,如果大家学习HTML还可以,应该知道在HTML当中有一个i标签,i标签的作用就是将文本的字体设置为斜体,自带的功能。

    有点啰嗦了哈,给初学者普及下细节哦。

  • 代码块

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字体为斜体</title>
</head>
<body>
<p>成功不是打败别人,而是改变自己。</p>
<p><i>成功不是打败别人,而是改变自己。</i></p>
</body>
</html>
  • 结果图

  • 注意:使用font-style属性可以将i标签自带的斜体功能给去除掉,如:下面关键代码哦。

    <style>
i{
font-style: normal;
}
</style>
  • 使用font-style属性设置文本的字体为斜体。
  • 代码块

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字体为斜体</title>
</head>
<style>
p{
font-style: italic;
}
</style>
<body>
<p>成功不是打败别人,而是改变自己。</p>
</body> </html>
  • 结果图


font-weight设置字体粗细

  • font-weight属性是用来设置文本的字体粗细。

font-weight属性说明表

属性值 描述
normal 将文本的粗细恢复为正常。
bold 字体加粗。
100到900 字体加粗
  • 让我们进入font-weight属性实践,内容将HTML页面中的p标签文本字体加粗,笔者使用class属性值为.box将第一个p标签文本字体加粗为900,为什么用class属性值为.box呢,方便初学者理解,其余的都是一样的,就不过多的说明了。
  • 代码块

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字体粗细</title>
</head>
<style>
.box{
font-weight:900;
}
</style>
<body>
<p class="box">成功不是打败别人,而是改变自己。</p>
<p>成功不是打败别人,而是改变自己。</p>
</body> </html>
  • 结果图


font-size设置字体大小

  • font-size属性就是设置文本的字体大小,由于font-size属性值比较单一,就不用font-size属性说明表解释了,font-size属性值是px为单位。

  • 让我们进入font-size属性的实践,实践内容如:将HTML页面中的p标签文本字体大小设置为14像素。

  • 代码块

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字体大小</title>
</head>
<style>
p{
font-size: 14px;
}
</style>
<body> <p>成功不是打败别人,而是改变自己。</p>
</body> </html>
  • 结果图


font-family 设置字体

  • font-family属性给文本的字体设置风格,如:微软雅黑、楷体、宋体....
  • 园友都看到这里了,相信大家都有了一定的自学能力了,就不多介绍了,直接上关键的代码了,大家可以自己尝试各种字体哈。
  • 代码块

font-family: "微软雅黑";
  • 注意:font-family属性可以使用多个如:font-family: "微软雅黑","宋体",....;

  • 细节:一般很特殊的字体,网站上面都是使用图片来表示。是否能显示此字体是根据用户电脑里面是否对应的字体文件,如果没有该文件就会显示为宋体。


font字体设置的缩写

  • 缩写属性能够同时给文本设置斜体、加粗、大小、字体,每一个值之间要使用逗号隔开,并且一定要有顺序。
  • 让我们进入font字体设置缩写实践,实践内容如:将p标签中文本设置为斜体、加粗、大小、字体。
  • 代码块

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体设置的缩写</title>
</head>
<style>
p{
font: italic 900 14px "微软雅黑";
}
</style>
<body> <p>成功不是打败别人,而是改变自己。</p>
</body> </html>
  • 结果图

如何设置HTML页面中文本的字体的更多相关文章

  1. ADT开发中的一些优化设置:代码背景色、代码字体大小、代码自动补全

    初学Android开发,在网上找到一些ADT工具的优化,自己设置好了,截图保存下来.免得以后忘了. 1. 设置背景颜色: 色调85.饱和度90.亮度205 RGB:199.237.204 2. 设置代 ...

  2. Eclipse中项目面板字体的修改

    修改eclipse安装目录中的如下文件,添加黄色标记部分,并设定自己需要的字体大小(这里是10px)即可: \eclipse\plugins\org.eclipse.ui.themes_1.1.1.v ...

  3. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  4. MFC中修改静态文本框中文字的字体、颜色

    假设有一个静态文本框控件,其ID为:IDC_STATIC_XSDJ,且关联一个control类的CStatic类型的变量m_static_xsdj. 设置字体时自然要用到CFont类,下面介绍两种方法 ...

  5. VC++ 设置控件显示文本的前景色、背景色以及字体

    在每个控件开始绘制之前,都会向其父窗口发送WM_CTLCOLOR通告消息,在该消息的处理函数中,可以设置控件显示文本的前景色.背景色以及字体.该消息处理函数还要求返回一个画刷的句柄,用于在控件具体的绘 ...

  6. 【MFC】MFC改变对话框中静态文本的字体大小

    MFC改变对话框中静态文本的字体大小 2010/08/09 11:30 VC的对话框字体设置对所有控件都有效,你不能单独地改变某个静态文本的字体.对于你的问题,需要首先用CreateFont来建立一个 ...

  7. 为了安全请不要随意在页面中设置validateRequest="false"

    为了安全请不要随意在页面中设置validateRequest="false" 分类: ASP.NET2009-04-12 17:24 531人阅读 评论(0) 收藏 举报 asp. ...

  8. 如何给HTML页面的文本设置字符和单词间距

    设置字符和单词间距介绍 属性名 单位 描述 letter-spacing px 设置字符间距 word-spacing px 设置单词间距 letter-spacing设置字符间距 letter-sp ...

  9. Html中设置访问页面不在后进行其他页面跳转

    Html中设置访问页面不在后进行其他页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. VMware ESXI6.0服务器安装系列:RAID设置

    本文转载至http://www.scriptjc.com/article/847 1.连接显示器 2.插上键盘.U盘.显示器 3.看显示屏上的提示,按F12关机 4.关机前输入密码,然后按回车键 更换 ...

  2. drf框架serializers中ModelSerializer类简化序列化和反序列化操作

    0905自我总结 drf框架serializers中ModelSerializer类 基于seriallizer类进行简化 https://www.cnblogs.com/pythonywy/p/11 ...

  3. 常用函数-String

    /************************************************************************ 函数功能:将字符串中str的old_value子字符 ...

  4. POJ 1062 昂贵的聘礼(带限制条件的dijkstra)

    题目网址:http://poj.org/problem?id=1062 题目: 昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submis ...

  5. 5分钟彻底理解Redis持久化

    Redis持久化 RDB快照 在默认情况下,Redis将内存数据库快照保存到dump.rdb的二进制文件中. 可以对Redis进行设置,让它在"N秒内数据集至少有N个改动", 这一 ...

  6. vscode发博客插件更新v0.1.0(可能会相对好用点吧)

    距离上一次编写这个vscode在博客园发博客的插件已经过去好久了,那个时候vscode插件的功能也没有那么强大,期间有人提出问题来,也有人提出建议来,我一直没有抽出时间来维护,深感抱歉,直到有人加到我 ...

  7. 开发架构+osi七层协议+socket(day26)

    目录 软件开发架构 C/S架构 B/S架构 网络编程 互联网协议/OSI七层协议 传输层 网络层 数据链路层 物理连接层 socket 什么是socket 为什么用socket 如何使用 软件开发架构 ...

  8. 设计模式(八)Abstract Factory模式

    抽象工厂的工作是将“抽象零件”组装为“抽象产品”.在抽象工厂模式中将会出现抽象工厂,它会将抽象零件组装为抽象产品.也就是说,我们并不关心零件的具体实现,而是只关心接口.我们仅适用该接口将零件组装起来成 ...

  9. django-表单之模型表单(三)

    models.py-->forms.py-->views.py(get)--index.html-->views.py(post)-->home.html urls.py fr ...

  10. day3------基本数据类型int, bool, str,list,tuple,dict

    基本数据类型(int, bool, str,list,tuple,dict) 一.python基本数据类型 1. int  整数. 主要用来进行数学运算 2. str  字符串, 可以保存少量数据并进 ...