字体属性介绍

  • 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页面中文本的字体的更多相关文章

  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. 深度长文回顾web基础组件

    什么是Serlvet ? 全称 server applet 运行在服务端的小程序: 首先来说,这个servlet是java语言编写的出来的应用程序,换句话说servlet拥有java语言全部的优点,比 ...

  2. 算数运算符and数据类型转换

    一元(单目)运算符有且只有一个运算参数,二元(双目)运算符有且只有两个运算参数. 二元运算符:+(加).-(减).*(乘)./(求商).%(求余) 一元运算符:+(正),-(负),++(自增),--( ...

  3. 介绍ArcGIS中各种数据的打开方法——mxd（地图文档）

    1.加载地图文档 在ArcGIS中,以mxd作为扩展名的文件叫地图文档. 地图文档中只是包含图层的引用,即存储当前地图的图层路径.符号.状态.修饰等信息,并不存储真实的数据层. ArcGIS Map中 ...

  4. 【Java 基础】谈谈集合.List

    目录 1. ArrayList 1.1 ArrayList的构造 1.2 add方法 1.3 remove方法 1.4 查询方法 1.5 一些其他常用方法 1.6 ArrayList小结 2. Vec ...

  5. Kubernetes的Ingress简单入门

    目录 一.什么是Ingress 二.部署Nginx Ingress Controller 三.部署一个Service将Nginx服务暴露出去 四.部署一个我们自己的服务Cafe 五.部署ingress ...

  6. pycharm中拉取新分支代码

    将本地代码由主分支切换到新分支 切换成功

  7. 1,下载和部署开发环境--AutoCAD二次开发

    环境需求为: AutoCAD 2020版 ObjectARX SDK 下载地址:https://www.autodesk.com/developer-network/platform-technolo ...

  8. Typora忘记保存的文件怎么找回

    打开Typora,选择文件--偏好设置,在通用设置下点击恢复未保存的草稿,就可以找到你所有未保存的文件.

  9. 《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记(二)

    这是一个应用的例子,学以致用嘛 <!--这些代码我就直接放在了博客园的"页首Html代码"中,用于自定义博客,效果就是页面左上角的白色文字--> <p> & ...

  10. 史上最轻松入门之Spring Batch - 轻量级批处理框架实践

    从 MariaDB 一张表内读 10 万条记录,经处理后写到 MongoDB . Batch 任务模型 具体实现 1.新建 Spring Boot 应用,依赖如下: <!-- Web 应用 -- ...