re:从0开始的CSS学习之路 6. 字体相关属性

1. 字体相关属性

  1. font-size 字体大小

  2. font-family 字体的系列(字体簇)
    可以设置多个字体,每个字体之间以逗号隔开
    设置多个字体的目的是为了用户尽可能的支持字体
    网页字体的五大类:
    serif 衬线字体
    sans-serif 非衬线字体
    monospace 等宽字体
    cursive 草书字体
    fantasy 虚幻字体
    若字体名称中包含空格,则必须使用双引号

  3. font-weight 字体的粗细
    可选值:
    normal 正常显示(默认值)
    bold 粗体
    lighter 特细
    bolder 特粗
    "number" 利用数值指定粗细100-900,值后没有单位
    400相当于normal 700相当于bold

  4. font-style 字体的样式
    可选值:
    normal 正常显示
    italic 斜体
    通常斜体使用相对较少,反而将斜体设置成normal

字体的简写属性:font,使用一个font属性设置所有的相关属性
font:font-style font-weight font-size/line-height font-family

注意:

  1. 每个属性之间以空格隔开
  2. font-size font-family 不可以省略并且必须按照顺序书写,其他可以省略

示例如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>h1 {font-size: 80px;font-family: monospace;}p {/* font-size: 30px;font-family: serif;font-weight: bolder;font-style: italic; */font: italic bolder 80px serif;}
</head><body><h1>天天好心情 I'M happy</h1><p>今天天气不错</p><p>挺风和日丽的</p><p>我们今天在上课</p><p>我心情挺好的</p>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/673522.shtml

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

相关文章

Linux第43步_移植ST公司uboot的第4步_uboot测试

uboot移植结束后&#xff0c;需要进行测试。 1、烧录程序 1)、将STM32MP157开发板的网络接口与路由器的网络接口通过网线连接起来。 2)、将开发板的串口和电脑通过USB线连接起来。 3)、将开发板的USB OTG接口和电脑通过USB线连接起来。 4)、将开发板上拨码开关拨到“000”…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ScrollBar组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之ScrollBar组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、ScrollBar组件 鸿蒙&#xff08;HarmonyOS&#xff09;滚动条组件ScrollBar&…

Leetcode3020. 子集中元素的最大数量

Every day a Leetcode 题目来源&#xff1a;3020. 子集中元素的最大数量 解法1&#xff1a;哈希 枚举 用一个哈希表统计数组 nums 中的元素及其出现次数。 暴力枚举数组中的数&#xff0c;作为 x&#xff0c;然后不断看 x2,x4,⋯ 在数组中的个数。直到个数不足 2 个为止&a…

搭建macOS开发环境-1:准备工作

请记住&#xff1a; 最重要的准备工作永远是&#xff1a;备份数据 !!! 通过图形界面检查 Mac 的 CPU 类型&#xff1a; 在搭载 Apple 芯片的 Mac 电脑上&#xff0c;“关于本机”会显示一个标有“芯片”的项目并跟有相应芯片的名称&#xff1a; 通过命令行检查Mac的CPU类型 …

使用vite创建vue+ts项目,整合常用插件(scss、vue-router、pinia、axios等)和配置

一、检查node版本 指令&#xff1a;node -v 为什么要检查node版本&#xff1f; Vite 需要 Node.js 版本 18&#xff0c;20。然而&#xff0c;有些模板需要依赖更高的 Node 版本才能正常运行&#xff0c;当你的包管理器发出警告时&#xff0c;请注意升级你的 Node 版本。 二、创…

(delphi11最新学习资料) Object Pascal 学习笔记---第4章第2.4节(函数重载)

4.2.4 函数重载 ​ 有时您可能想要两个非常相似但参数和实现不同的函数。传统做法是&#xff0c;您必须为每个函数想出一个稍微不同的名称&#xff0c;但是现代编程语言允许您对一个函数符号进行多次定义。 ​ 重载的概念很简单&#xff1a;编译器允许您使用相同的名称定义两…

.[hudsonL@cock.li].mkp勒索病毒数据怎么处理|数据解密恢复

导言&#xff1a; 在当今数字化时代&#xff0c;勒索病毒已成为网络安全领域的一大威胁。其中一种新近出现的勒索病毒是由[hudsonLcock.li].mkp[hendersoncock.li].mkp[myersairmail.cc].mkp制作的&#xff0c;它以其高效的加密算法和勒索方式而备受关注。本文91数据恢复将介绍…

七、Nacos源码系列:Nacos服务发现

目录 一、服务发现 二、getServices()&#xff1a;获取服务列表 2.1、获取服务列表 2.2、总结图 三、getInstances(serviceId)&#xff1a;获取服务实例列表 3.1、从缓存中获取服务信息 3.2、缓存为空&#xff0c;执行订阅服务 3.2.1、调度更新&#xff0c;往线程池中…

【Spring】Tomcat服务器部署

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Spring⛺️稳中求进&#xff0c;晒太阳 单体项目部署 本地工作 项目在本地开发完毕之后进行一些必要参数的修改。 比如&#xff1a; 数据库的JDBC的配置文件&#xff0c;还有前端页面的…

项目02《游戏-06-开发》Unity3D

基于 项目02《游戏-05-开发》Unity3D &#xff0c; 接下来做 背包系统的 存储框架 &#xff0c; 首先了解静态数据 与 动态数据&#xff0c;静态代表不变的数据&#xff0c;比如下图武器Icon&#xff0c; 其中&#xff0c;武器的名称&#xff0c;描述&#xff…

Swift Combine 发布者publisher的生命周期 从入门到精通四

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三 1. 发布者和订阅者的生命周期 订阅者和发布者以明确定义的顺序进行通信&#xff0c;因此使得它们具有从开始到结束的生命周期&#xff1a; …

课时17:本地变量_命令变量

2.2.3 命令变量 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 基本格式 定义方式一&#xff1a;变量名命令注意&#xff1a; 是反引号定义方式二&#xff1a;变量名$(命令)执行流程&#xff1a;1、执行 或者 $() 范围内的命令…

安卓——计算器应用(Java)

步骤 1: 设置Android Studio项目 创建一个新的Android项目&#xff0c;选择Java作为编程语言。 步骤 2: 设计用户界面 打开activity_main.xml文件&#xff0c;在res/layout目录下&#xff0c;设计你的计算器用户界面。这个例子使用了LinearLayout来排列两个EditText输入框和…

常用C++模版

目录 前言类型转换int 转 stringstring 转 int 进制转换10进制转n进制&#xff08; 2 ≤ n ≤ 16 , n ∈ Z 2\leq n\leq 16,n\in \mathbb Z 2≤n≤16,n∈Z&#xff09;n进制转10进制&#xff08; 2 ≤ n ≤ 16 , n ∈ Z 2\leq n\leq 16,n\in \mathbb Z 2≤n≤16,n∈Z&#xff0…

pycharm像jupyter一样在控制台查看后台变量

更新下&#xff1a;这个一劳永逸不用一个一个改 https://blog.csdn.net/Onlyone_1314/article/details/109347481 右上角运行

Spring IoC容器(四)容器、环境配置及附加功能

本文内容包括容器的Bean 及 Configuration 注解的使用、容器环境的配置文件及容器的附加功能&#xff08;包括国际化消息、事件发布与监听&#xff09;。 1 容器配置 在注解模式下&#xff0c;Configuration 是容器核心的注解之一&#xff0c;可以在其注解的类中通过Bean作用…

UniApp 快速上手与深度学习指南

一、UniApp 简介 UniApp 是中国DCloud公司研发的一款创新的跨平台应用开发框架,它基于广受欢迎的前端开发库Vue.js,旨在解决多端适配和快速开发的问题。通过UniApp,开发者能够采用一套统一的代码结构、语法和API来构建应用程序,从而实现真正意义上的“一次编写,到处运行”…

DevOps落地笔记-20|软件质量:决定系统成功的关键

上一课时介绍通过提高工程效率来提高价值交付效率&#xff0c;从而提高企业对市场的响应速度。在提高响应速度的同时&#xff0c;也不能降低软件的质量&#xff0c;这就是所谓的“保质保量”。具备高质量软件&#xff0c;高效率的企业走得更快更远。相反&#xff0c;低劣的软件…

消息中间件之RocketMQ源码分析(八)

RocketMQ中的消息过滤 RocketMQ设计了消息过滤&#xff0c;来解决大量无意义流量的传输:即对于客户端不需要的消息&#xff0c; Broker就不会传输给客户端&#xff0c;以免浪费宽带&#xff0c;RocketMQ4.2.0支持Tag过滤、SQL92过滤、Filter Server过滤 Tag过滤 第一步:用户发…

chrome扩展插件常用文件及作用

Chrome扩展通常包含以下常用文件及其作用&#xff1a; manifest.json&#xff1a; 描述了扩展的基本信息&#xff0c;如名称、版本、权限、图标等。定义了扩展的各种组件和功能&#xff0c;包括后台脚本、内容脚本、页面、浏览器动作按钮等。 background.js&#xff1a; 后台脚…