如何设置HTML页面中文本的字体
字体属性介绍
CSS中的字体属性是干什么的呢？字体字体肯定和字体有关咯，就是设置HTML页面中文本的字体，
CSS中常用的字体属性有几种呢，笔者给大家梳理了下，比较常用的一共有5种，今天我们就看看这5种能给文本的字体带来什么效果呢。CSS字体属性定义文本的字体系列、大小、加粗、风格（如斜体）。- 在
CSS中常用的字体属性有5种，如：font-style、font-weight、font-size、font-family、font。
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页面中文本的字体的更多相关文章
- ADT开发中的一些优化设置：代码背景色、代码字体大小、代码自动补全
初学Android开发,在网上找到一些ADT工具的优化,自己设置好了,截图保存下来.免得以后忘了. 1. 设置背景颜色: 色调85.饱和度90.亮度205 RGB:199.237.204 2. 设置代 ...
- Eclipse中项目面板字体的修改
修改eclipse安装目录中的如下文件,添加黄色标记部分,并设定自己需要的字体大小(这里是10px)即可: \eclipse\plugins\org.eclipse.ui.themes_1.1.1.v ...
- 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...
- MFC中修改静态文本框中文字的字体、颜色
假设有一个静态文本框控件,其ID为:IDC_STATIC_XSDJ,且关联一个control类的CStatic类型的变量m_static_xsdj. 设置字体时自然要用到CFont类,下面介绍两种方法 ...
- VC++ 设置控件显示文本的前景色、背景色以及字体
在每个控件开始绘制之前,都会向其父窗口发送WM_CTLCOLOR通告消息,在该消息的处理函数中,可以设置控件显示文本的前景色.背景色以及字体.该消息处理函数还要求返回一个画刷的句柄,用于在控件具体的绘 ...
- 【MFC】MFC改变对话框中静态文本的字体大小
MFC改变对话框中静态文本的字体大小 2010/08/09 11:30 VC的对话框字体设置对所有控件都有效,你不能单独地改变某个静态文本的字体.对于你的问题,需要首先用CreateFont来建立一个 ...
- 为了安全请不要随意在页面中设置validateRequest="false"
为了安全请不要随意在页面中设置validateRequest="false" 分类: ASP.NET2009-04-12 17:24 531人阅读 评论(0) 收藏 举报 asp. ...
- 如何给HTML页面的文本设置字符和单词间距
设置字符和单词间距介绍 属性名 单位 描述 letter-spacing px 设置字符间距 word-spacing px 设置单词间距 letter-spacing设置字符间距 letter-sp ...
- Html中设置访问页面不在后进行其他页面跳转
Html中设置访问页面不在后进行其他页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
随机推荐
- 算法学习之剑指offer（一）
题目一: 题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路1:遍历 ...
- Web前端学习，需用了解的7大HTML知识点
HTML是web前端开发基础,关于HTML,这里有几个很重要的知识点,在日常开发常常用到,并且在大家面试的时候也会问的,记住这7个重要知识点,助你在面试时优先录用. 1.网页结构 网页结构一般都包含文 ...
- 渗透-svn源代码泄露漏洞综合利用
SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subversion ...
- webshell检测方法归纳
背景 webshell就是以asp.php.jsp或者cgi等网页文件形式存在的一种命令执行环境,也可以将其称做为一种网页后门.黑客在入侵了一个网站后,通常会将asp或php后门文件与网站服务器WEB ...
- POJ 3080 Blue Jeans(串)
题目网址:http://poj.org/problem?id=3080 思路: 以第一个DNA序列s为参考序列,开始做以下的操作. 1.将一个字母s[i]作为匹配串.(i为当前遍历到的下标) 2.遍历 ...
- 利用hash远程登陆系统
有的时候当我们拿到系统管理员hash由于密码复杂度过高无法破解时候可以利用hash直接进行远程登录 我们用到Metasploit里面的模块 肉鸡为windwos server 2003 x32系统 1 ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- 02 Python学习笔记-基本数据类型(二)
一.基本知识 1.缩进: 2.一行多条语句: 3.断行: 4.注释 # 单行注释 '''这是一段 多行注释''' 5. 变量 1. 变量类型(局部变量.全局变量.系统变量) 2. 变量赋值 多重赋值x ...
- 手把手实现微信网页授权和微信支付，附源代码（VUE and thinkPHP）
wechat github 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP) 概述 公众号开发是痛苦的,痛苦在好多问题开发者文档是没有提到的,是需要你猜的. 在开发过程中 ...
- 数据结构（四十一）多路查找树（B树）
一.多路查找树的背景 前面所讨论的查找算法都是在内存中进行的,它们适用于较小的文件,而对于较大的.存放在外存储器上的文件就不合适了,对于此类大规模的文件,即使是采用了平衡二叉树,在查找效率上仍然较低. ...