前端中font的使用

news/2024/12/30 1:45:54/

知识点:

 

 

 

 

 

运行截图:

 

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS字体属性之字体大小</title>

    <style>

        body{

            font-size: 16px;

        }

        /* 标题标签比较特殊,需要单独制定文字大小 */

    h2{

        font-size:16px;

    }

    /* 字体的加粗,第三句诗里面 */

    .bold{

        font-weight: bold;

        /* 700后面不需要加单位,等价于bold都是加粗的效果 */

        /* 实际开发过程中,我们更提倡使用数字,表示加粗或者变细 */

        /* font-weight: 700; */

    }

    p {

        font-style: italic;

    }

     div{

        /* 第一种写法: */

        /* font-style: italic; */

        /* font-weight: 700; */

        /* font-size: 16px; */

        /* font-family: 'Microsoft yahei'; */

        /* 第二种写法: */

        /* 这种写法是复合属性:简写的方式 节约代码 */

        /* 使用font属性时,,必须按照上面语法格式中的顺序来写,不能更换顺序,并且各个属性间使用空格隔开 */

       /* 不需要设置的属性可以进行省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用 */

        /* font: font-style font-weight font-size/line-height font-family; */

        font:italic 700 16px "Microsoft yahei";

        /* font: 200px; */

    }

    </style>

</head>

    <body>

        <div>三生三世十里桃花,三生三世枕上书</div>

        <h2>春夜喜雨</h2>

        <p>好雨知时节⑴,当春乃发生⑵。</p>

        <p>好雨知时节⑴,当春乃发生⑵。</p>

        <p class="bold">野径云俱黑⑸,江船火独明⑹。</p>

        <p>好雨知时节⑴,当春乃发生⑵。</p>

</body>

</html>


http://www.ppmy.cn/news/45179.html

相关文章

小程序组件的生命周期

组件生命周期 组件的生命周期&#xff0c;指的是组件自身的一些函数&#xff0c;这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。 其中&#xff0c;最重要的生命周期是 created attached detached &#xff0c;包含一个组件实例生命流程的最主要时间点。 …

Java就业前景如何?

Java还有出路吗&#xff1f; 2023年的就业市场依然经历着面临挑战&#xff0c;很多有经验有技术的人被淘汰下来&#xff0c;而马上又有一千多万的新鲜血液涌入就业市场。经济大环境对于各行各业的影响是非常大的&#xff0c;也为IT行业的内卷推波助澜。在2023年想学习Java入行就…

智慧养老平台建设方案word

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用&#xff0c;如有侵权请联系删除。 1、 总体设计 1.1 建设原则 养老机构智能化管理工程是一项涉及多学科知识的复杂的系统工程&#xff0c;养老机构智能化管理围绕机构发展战略&#xff0c;立足机构需求&…

Reactor设计模式

一、Reactor设计模式 1、什么是Reactor设计模式&#xff1f; Reactor模式是高性能I/O设计中&#xff0c;常用的设计模式。其中心思想是将所有要处理的I/O事件注册到一个中心I/O多路复用器上&#xff0c;同时主线程阻塞在多路复用器上&#xff0c;一旦有I/O事件到来或是准备就绪…

stegano(图片隐写、摩斯密码)

附件是PDF&#xff0c;我们在选择内容时发现光标溢出了文本 说明这里还存在一些我们看不到的内容 直接CtrlA全选&#xff0c;CtrlC复制后新建一个纯文本文件 将复制的东西粘贴过去 粘贴后发现果然多出来了一些东西&#xff0c;提取出来 BABA BBB BA BBA ABA AB B AAB ABAA A…

大力出奇迹——GPT系列论文学习(GPT,GPT2,GPT3,InstructGPT)

目录 说在前面1.GPT1.1 引言1.2 训练范式1.2.1 无监督预训练1.2.2 有监督微调1.3 实验 2. GPT22.1 引言2.2 模型结构2.3 训练范式2.4 实验 3.GPT33.1引言3.2 模型结构3.3 训练范式3.4 实验3.4.1数据集3.5 局限性 4. InstructGPT4.1 引言4.2 方法4.2.1 数据收集4.2.2 各部分模型…

联想凌拓 ThinkSystem DE 系列全闪存阵列

ThinkSystem DE 系列全闪存阵列 超高的性能&#xff0c;极具竞争力的价格 通过消除过量配置最大限度地提高效率&#xff0c;同时通过降低空间、电源和冷却要求来降低成本。 利用高级数据保护&#xff0c;在本地或从远距离上防止数据丢失和停机事件。 在模块化 2U 构建模块中…

ENVI 5.6软件安装教程

软件下载 [软件名称]&#xff1a;ENVI 5.6 [软件大小]&#xff1a;3.25G [安装环境]&#xff1a;Win7~Win11或更高 软件介绍 ENVI 5.6是一款实现遥感图像处理的工具&#xff0c;已经广泛应用于科研、环境保护、气象、石油矿产勘探、农业、林业、医学、地球科学、公用设施管…