CSS设置字体样式

目录

前言:

1.font-family:

2.font-style:

3.font-weight:

4.font-size:

5.font-variant:

6.font:


前言:

在网页中字体是重要的组成部分,使用好字体可以让网页更加美观,在CSS中提供了一系列用来设置文本样式的属性,如更改字体,控制字体大小和粗细等等。如下:

font-family:用来设置字体的。

font-style:用来设置字体风格,比如斜体。

font-weight:用来设置字体粗细。

font-size:用来设置字体尺寸。

font-variant:可以将小写字母转换为小型大写字母。

font-stretch:对字体进行伸缩变形(使用较小,并且主流的浏览器都不支持,就不做讲解了)。

font:字体所有属性的缩写,可以在一个声明里面设置多个字体属性。

CSS设置网页颜色-CSDN博客 初识CSS-CSDN博客

1.font-family:

font-family属性是用来设置元素里面的字体,因为字体种类成千上万,有些还要钱,因为我们电脑不可能有所有的字体,所以为了保证我们设置的字体能够正常显示,可以通过font-family属性定义一个由若干字体组成的列表,字体名称之间可以使用逗号,分隔,浏览器会先使用列表里第一个字体,如果不支持就下一个,一直到所有都尝试完之后,如果都不是就使用浏览器默认的字体。font-family的值如下:

说明

family-name,

generic-family

family-name:字体的名称,一个字体名称就表示一种字体,如"宋体"就是字体的种类之一;

generic-family:字体族,就是某种类型的字体组合,一个字体代表一种类型的字体,其中包含很多类似但不同的字体,如"sans-serif"就是一种无衬线字体,其中包含了很重相似的字体。

字体的默认值取决于浏览器的设置。

inherit是从父元素中继承字体的设置。

示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .typeface {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
        }
    </style>
</head>

<body>
    <h1 class="typeface">这设置了font-family属性</h1>
</body>

</html>

在设置字体或者字体族的时候如果其中有多个空格或者多个单词,就需要使用引号将其包裹,如:'Times New Roman'如果元素是在style属性里面使用就必须使用单引号。

代码的运行结果如下所示:

2.font-style:

font-style属性可以用来设置字体的样式,斜体,倾斜等等,如下是其的值:

说明
normal默认值,文本以正常字体样式显示。
italic文本以斜体显示。
oblique文本倾斜显示。
inherit从父元素中继承字体样式。

如下是代码的示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-style: oblique;
        }

        .normal {
            font-style: normal;
        }

        .italic {
            font-style: italic;
        }

        .oblique {
            font-style: oblique;
        }

        .inherit {
            font-style: inherit;
        }
    </style>
</head>

<body>
    只是一段无意义的文本
    <p class="normal">normal:正常的字体。</p>
    <p class="italic">italic:显示一个斜体的字体。</p>
    <p class="oblique">oblique:显示一个倾斜的字体。</p>
    <p class="inherit">inherit:从父元素继承字体的设置。</p>
</body>

</html>

代码的运行结果如下:

 

3.font-weight:

在CSS中font-weight可以设置字体的粗细,其值如下:

说明
normal默认值,标准字体
bold粗体字体。
bolder更粗的字体。
lighter更细的字体。
100,200,300,400,500,600,700,800,900由粗到细的设置字体粗细,100为最细的,400等于normal,700等于bold。
inherit从父元素中继承字体的粗细。

font-weight代码示例如下所示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .weight-100 {
            font-weight: 100;
        }

        .weight-300 {
            font-weight: 300;
        }

        .normal {
            font-weight: normal;
        }

        .bold {
            font-weight: bold;
        }

        .bolder {
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <p class="weight-100">font-weight:100.</p>
    <p class="weight-300">font-weight:300.</p>
    <p class="normal">font-weight:normal.</p>
    <p class="bold">font-weight:bold.</p>
    <p class="bolder">font-weight:bolder.</p>

</body>

</html>

上述代码的运行结果如下所示:

4.font-size:

font-size属性是用来设置字体的大小(字号)的,其值如下:

说明
xx-small,x-smal,small,medium,large,x-large,xx-large以关键字的形式把字体设置为不同的大小,从xx-small到xx-large依次变大,默认值为medium。
smaller为字体设置一个比父元素更小的尺寸。
larger为字体设置一个比父元素更大的尺寸
length以数值加单位的形式把字体设置成为一个固定的尺寸,如18px,2em。
%以百分比的形式给字体设置一个相对于父元素字体的大小。
inherit

从父元素中继承字体的尺寸。

 font-size属性的示例代码如下:

5.font-variant:

font-variant属性可以将文本里面的小写英文字母转换为小型大写字母(转换之前的字母和转换之后的字母大小基本差不多,所以称其为小型大写字母),其值如下:

说明
normal默认值,浏览器会显示一个标准的字体
small-caps将文本中的小写字母转换为小型大写字母。
inherit从父元素里继承font-variant属性的值。

 font-variant属性的示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .normal {
            font-variant: normal;
        }

        .small {
            font-variant: small-caps;
        }
    </style>
</head>

<body>
    <p class="normal">This is a paragraph</p>
    <p class="small">This is a paragraph</p>

</body>

</html>

 上述代码的运行结果如下所示:

6.font:

font属性和之前的background功能类似,通过font属性可以同时设置多个字体的属性,不同的是,使用font需要遵循如下顺序:

font: [[font-style||font-variant||font-weight||font-stretch]?font-size[/line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar

使用font时需要注意:

  • 使用font属性必须按照上述顺序,而且font-sizefont-family这两个属性不可以忽略。
  • font属性里的每个参数只可以设置一个值,除font-sizefont-family属性外,被忽略的属性将变成各自的默认值。
  • 如要定义line-height属性,就需要使用斜线/font-sizeline-height属性隔开。

如下是font的示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .font {
            font: oblique 100 12px/30px arial, sans-serif;
        }
    </style>
</head>

<body>
    <p class="font">这是一个font属性的设置。</p>
</body>

</html>

上述代码的运行结果如下:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第一次在msf控制台中运行search命令提示Module database cache not built yet问题解决

0x00 问题描述 在新装的kali虚拟机中使用msfconsole执行search命令时提示Module database cache not built yet问题&#xff0c;显然&#xff0c;是我们相关的数据库缓存存在问题。 故障现象&#xff1a; 0x01 启动数据库服务 msf中的search功能是基于postgresql来实现的&am…

python学习25:python中的元组(tuple)

python中的元组(tuple) 1.什么是元组&#xff1f; 元组也是容器数据类型的一种&#xff0c;同列表几乎是一样的&#xff0c;都是可以在里面封装多个&#xff0c;不同类型的元素在内&#xff1b;与列表最大的不同就是&#xff1a; 元组一旦被定义&#xff0c;就不能修改 2.元组…

物理层习题及其相关知识(谁看谁不迷糊呢)

1. 对于带宽为50k Hz的信道&#xff0c;若有4种不同的物理状态来表示数据&#xff0c;信噪比为20dB 。&#xff08;1&#xff09; 按奈奎斯特定理&#xff0c;信道的最大传输数据速率是多少&#xff1f;&#xff08;2&#xff09; 按香农定理&#xff0c;信道的最大传输数据速度…

Java设计模式—享元(FlyWeight)模式

享元模式&#xff08;Flyweight&#xff09;&#xff0c;运用共享技术有效地支持大量细粒度的对象 public abstract class Piece {protected PieceColor m_color;protected PiecePos m_pos;public Piece(PieceColor color ,PiecePos pos){m_color color;m_pos pos;}public ab…

Java笔试总结

. 操作系统中关于竞争和死锁的关系下面描述正确的是&#xff1f; A 竞争一定会导致死锁 B 死锁一定由竞争引起 C 竞争可能引起死锁 D 预防死锁可以防止竞争 答案: C 进程的控制信息和描述信息存放在()。 A JCB B PCB C AFT D SFT 答案: B 当系统发生抖动&#xff08;thrash…

元宇宙虚拟空间的场景的渲染(五)

前言 该文章主要讲元宇宙虚拟空间的场景的渲染&#xff0c;基本核心技术点&#xff0c;不多说&#xff0c;直接引入正题。 场景的渲染 下面第二个图中的代码是一个循环渲染逻辑&#xff0c;首先getDelta 获取2次时间的时间间隔&#xff0c;requestAnimationFrame请求我们的一…

Qt Creator 界面

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、认识 Qt Creator 界面 1、总览 2、左边栏 3、代码编辑区 4、UI设计界面 5、构建区 一、认识 …

99%的人不知道,Oracle resetlogs强制开库需要推进SCN?

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

算法---分治(归并排序)

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 小比特 大梦想 此篇文章与大家分享分治算法关于归并排序的专题 对于归并排序在我个人主页专栏 <排序> 有详细的介绍 如果有不足的或者错误的请您指出! 1.归并排序 题目: 排序数组 1.1解析 关于归并排序…

STM32使用HAL库获取GPS模块HT1818Z3G5L信息(方法1)

1、写在最前 先了解一下GPRMC的格式 格 式&#xff1a; GPRMC,024813.640,A,3158.4608,N,11848.3737,E,10.05,324.27,150706,A*50 说 明&#xff1a; 字段 0&#xff1a;$GPRMC&#xff0c;语句ID&#xff0c;表明该语句为Recommended Minimum Specific GPS/TRANSIT Data&…

Open CASCADE学习|在给定的TopoDS_Shape中查找与特定顶点 V 对应的TopoDS_Edge编号

enum TopAbs_ShapeEnum{TopAbs_COMPOUND,TopAbs_COMPSOLID,TopAbs_SOLID,TopAbs_SHELL,TopAbs_FACE,TopAbs_WIRE,TopAbs_EDGE,TopAbs_VERTEX,TopAbs_SHAPE}; 这段代码定义了一个名为 TopAbs_ShapeEnum 的枚举类型&#xff0c;它包含了表示不同几何形状类型的常量。这些常量通常…

通过学习mayfly-go,我学会了前端如何优雅设计字典值

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen shigen在假期的最后一天早晨起来&#xff0c;翻看了一下博客&#xff0c;一个ma…

spring注解驱动系列--声明式事务

一、环境搭建 一、导入依赖 <!-- 数据源、数据库驱动、spring-jdbc模块--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.12.RE…

Dockerfile详解构建镜像

Dockerfile构建企业级镜像 在服务器上可以通过源码或rpm方式部署Nginx服务&#xff0c;但不利于大规模的部署。为提高效率&#xff0c;可以通过Dockerfile的方式将Nginx服务封装到镜像中&#xff0c;然后Docker基于镜像快速启动容器&#xff0c;实现服务的快速部署。 Dockerf…

统一网关 Gateway(黑马程序员)

网关的技术实现 在 SpringCloud 中网关的实现包括两种&#xff1a; gatewayzuul Zuul 是基于 Servlet 的实现&#xff0c;属于阻塞式编程。而 SpringCloudGateway 则是基于 Spring5 中提供的 WebFlux &#xff0c; 属于响应式编程的实现&#xff0c;具备更好的性能。 网关的作…

火柴排队(c++实现)

题目 涵涵有两盒火柴&#xff0c;每盒装有 n 根火柴&#xff0c;每根火柴都有一个高度。 现在将每盒中的火柴各自排成一列&#xff0c;同一列火柴的高度互不相同&#xff0c;两列火柴之间的距离定义为&#xff1a; 其中 ai 表示第一列火柴中第 i 个火柴的高度&#xf…

【OneAPI】贴纸生成API

OneAPI新接口发布&#xff1a;贴纸生成 生成一个10241024像素的贴纸。 API地址&#xff1a;POST https://oneapi.coderbox.cn/openapi/api/stickers 请求参数&#xff08;body&#xff09; 参数名类型必填含义说明prompt提示词是提示词示例&#xff1a;一只可爱的小狗 响应…

网络网络层之(1)IPv4地址

网络网络层之(1)IPv4地址 Author: Once Day Date: 2024年4月1日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day的…

嵌入式系统初学者指南

什么是嵌入式系统&#xff1f; 嵌入式系统是一种独立的、基于微处理器的计算机系统。您可以将其视为大型系统的一部分的微型计算机。如今&#xff0c;从洗碗机到波音 747&#xff0c;几乎所有“电子”产品内部都有嵌入式系统。但是&#xff0c;嵌入式系统与笔记本电脑或手机不…

mysql dublewrite 双写缓存机制

mysql dublewrite 双写缓存机制&#xff0c;像不像主板双bois系统&#xff0c; 在MySQL的InnoDB存储引擎中&#xff0c;当进行数据写操作时&#xff0c;会先将数据写入到内存中的缓冲池&#xff08;Buffer Pool&#xff09;&#xff0c;然后异步刷新到磁盘上的数据文件。为了提…