前端中font的使用

news2025/1/20 6:03:18

知识点:

 

 

 

 

 

运行截图:

 

代码:

<!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.coloradmin.cn/o/414621.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【RabbitMQ】SpringBoot整合RabbitMQ、实现RabbitMQ五大工作模式(万字长文)

目录 一、准备 1、创建SpringBoot项目 2、添加配置信息 3、创建配置类 二、RabbitMQ的配置类里创建队列 三、RabbitMQ的配置类里创建交换机及绑定队列 四、SpringBoot整合RabbitMQ入门案例 1、生产者 2、消费者 四、SpringBoot里实现RabbitMQ五大工作模式 1、简单模式…

Linux--进程多线程(上)

前言 精神内耗一方面可能是消极的&#xff0c;人好像一直在跟自己过不去&#xff0c;但其实它也是一种积极的情绪。精神内耗在某种程度上&#xff0c;是在寻找一种出口&#xff0c;寻找他自己人生的出口&#xff0c;寻找我今天的出口&#xff0c;或者寻找我一觉醒来明天的出口。…

【k8s完整实战教程5】网络服务配置(nodeport/loadbalancer/ingress)

系列文章&#xff1a;这个系列已完结&#xff0c;如对您有帮助&#xff0c;求点赞收藏评论。 读者寄语&#xff1a;再小的帆&#xff0c;也能远航&#xff01; 【k8s完整实战教程0】前言【k8s完整实战教程1】源码管理-Coding【k8s完整实战教程2】腾讯云搭建k8s托管集群【k8s完…

恐怖的ChatGPT!

大家好&#xff0c;我是飞哥&#xff01;不知道大家那边咋样。反正我最近感觉是快被ChatGPT包围了。打开手机也全是ChatGPT相关的信息&#xff0c;我的好几个老同学都在问我ChatGPT怎么用&#xff0c;部门内也在尝试用ChatGPT做一点新业务出来。那就干脆我就趁清明假期这一天宝…

AB测试基本原理

AB测试基本原理AB测试AB测试的基本步骤1、AB测试的基本步骤①选取指标指标的分类②建立假设③选取实验单位④计算样本量⑤流量分割⑥实验周期计算⑦线上验证⑧数据检验AB测试 所谓的AB测试就是使用实验组和对照组&#xff0c;通过控制变量法保证实验组和对照组基本条件一致&am…

NumPy 数组学习手册:6~7

原文&#xff1a;Learning NumPy Array 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 六、性能分析&#xff0c;调试和测试 分析&#xff0c;调试和测试是开发过程的组成部分。 您可能熟悉单元测试的概念。 单元测试是程序员编写的用于测试其代码的自动测试。 例如&…

AI —— 一看就懂的代码助手Copilot获取教程

背景 随着chatgpt的发布&#xff0c;人工智能领域近期站上了风口浪尖。GitHub Copilot由github与 OpenAI 合作创建&#xff0c;是世界上第一个使用 OpenAI 的 Codex 模型&#xff08;GPT-3 的后代&#xff09;制作的大规模生成式 AI 开发工具。GitHub Copilot 作为 AI 结对程序…

【条件判断】

目录知识框架No.0 筑基No.1 条件判断题目来源&#xff1a;PTA-L1-031 到底是不是太胖了题目来源&#xff1a;PTA-L1-063 吃鱼还是吃肉题目来源&#xff1a;PTA-L1-069 胎压监测题目来源&#xff1a;PTA-L1-077 大笨钟的心情题目来源&#xff1a;PTA-L1-083 谁能进图书馆知识框架…

Day15-二维数组字符串

文章目录一 二维数组二 字符串案例1案例2案例3-随堂练习案例4-输入-类型转换案例5案例6案例7一 二维数组 <script>// 书:编号 名称 描述 价格/*** 二维数组* */let arr [ [1001,"HTML","网页设计",100],[1002,"CSS","样式设计"…

Leetcode刷题之环形链表

莫等闲&#xff0c;白了少年头&#xff0c;空悲切。 --岳飞 目录 1.环形链表 2.环形链表Ⅱ 1.环形链表 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next …

Stable Diffusion扩散模型

1 GAN到Stable Diffusion的改朝换代 随着人工智能在图像生成&#xff0c;文本生成以及多模态生成等生成领域的技术不断累积&#xff0c;生成对抗网络&#xff08;GAN&#xff09;、变微分自动编码器&#xff08;VAE&#xff09;、normalizing flow models、自回归模型&#xf…

Android Textview Button 等基础组件学习

一 Textview 1 基本使用 <?xml version"1.0" encoding"utf-8"?><LinearLayout android:layout_height"match_parent"android:layout_width"match_parent"android:orientation"vertical"xmlns:android"http…

vue中的pinia使用和持久化 - 粘贴即用

学习关键语句&#xff1a; pinia怎么用 写在前面 pinia 作为 vuex 的替代品好像变得不得不学习了&#xff0c;学起来一用发现 vuex 是什么麻烦的东西&#xff0c;我不认识 这篇文章一共包含的内容有&#xff1a; 安装 pinia读取数据修改数据数据持久化 其中&#xff0c;修…

代码不熟没关系,让AI替你写

程序员早已不是一个陌生的群体&#xff0c;但程序、代码相对普通人而言&#xff0c;看着还是比较深奥难懂&#xff0c;但自从有了ChatGPT&#xff0c;不少对此有兴趣的外行人士&#xff0c;也能轻松写出代码了&#xff0c;比如让ChatGPT写一个贪吃蛇游戏&#xff0c;按它给出的…

C++入门(2)

C入门1.缺省参数1.1. 缺省参数举例和概念1.2. 函数的传参是从左到右给参数的1.3.缺省参数分类1.4. 缺省参数的函数声明与定义2.函数重载2.1.函数重载的概念2.2. 函数重载的情况2.3.剖析C语言不能函数重载而C却可以的原因2.3.1. 编译链接过程2.3.2. 函数名修饰规则3.引用3.1. 引…

Java并行流:一次解决多线程编程难题,让你的程序飞起来

前言 在日常的工作中&#xff0c;为了提高程序的处理速度&#xff0c;充分利用多核处理器的性能&#xff0c;我们需要手动编写多线程代码。但是多线程编程非常复杂&#xff0c;容易出现死锁、竞态条件等问题&#xff0c;给我们带来了很大的困扰。而 Java 并行流则提供了一种更加…

python机器学习和深度学习在气象中的应用

查看原文>>> Python人工智能在气象中的实践技术应用 Python 是功能强大、免费、开源&#xff0c;实现面向对象的编程语言&#xff0c;在数据处理、科学计算、数学建模、数据挖掘和数据可视化方面具备优异的性能&#xff0c;这些优势使得 Python 在气象、海洋、地理、…

14:24面试,14:32就出来了 ,问的实在是太...

从外包出来&#xff0c;没想到算法死在另一家厂子&#xff0c;自从加入这家公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以也就忍了。没想到8月一纸通知&#xff0c;所有人不许加班&#xff0c;薪资直降30%&#xff0c;顿时有吃不起饭的赶脚。 好在有…

PythonFlash+MySQL实现简单管理系统的增删改查

今天简单分享一下用Python的flash框架结合MySQL来实现信息管理系统的增删改查&#xff01; ps&#xff1a;该博客只完成了信息的添加和查看&#xff0c;删除和修改按照该方法下推即可&#xff01; 实现功能之前我们先在数据库里设置数据&#xff0c;例如&#xff1a; 我们创…

日常记录:天梯赛练习集L1-046 整除光棍

题目&#xff1a; 这里所谓的“光棍”&#xff0c;并不是指单身汪啦~ 说的是全部由1组成的数字&#xff0c;比如1、11、111、1111等。传说任何一个光棍都能被一个不以5结尾的奇数整除。比如&#xff0c;111111就可以被13整除。 现在&#xff0c;你的程序要读入一个整数x&#x…