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>

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

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

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

相关文章

[AIGC] Spring Interceptor 拦截器详解

文章目录 什么是Spring Interceptor如何使用Spring InterceptorSpring Interceptor的影响 什么是Spring Interceptor Interceptor&#xff08;拦截器&#xff09;是Spring MVC框架中的一种特性&#xff0c;类似于Servlet开发中的Filter&#xff08;过滤器&#xff09;&#xf…

一点点安全资料:数通知识扩展

工具 ENSP 华为防火墙 华为防火墙是华为提供的一种网络安全产品&#xff0c;设计用来保护企业网络不受未经授权访问和各种网络威胁的侵害。华为防火墙采用先进的技术&#xff0c;以确保网络安全&#xff0c;同时提供高性能的数据处理能力。下面我们就来详细了解一下华为防火墙…

Spring 面试题(三)

1. Spring Bean 支持哪几种作用域? Spring Bean支持以下五种作用域&#xff1a; Singleton&#xff08;单例&#xff09;&#xff1a;这是Spring默认的作用域。它表示在整个Spring IoC容器中&#xff0c;只会创建一个bean实例。这种作用域适用于那些无状态的bean&#xff0c…

Java常用函数接口

Java常用函数接口 Java 8 中引入的常用函数式接口&#xff0c;也就是 java.util.function 包中的接口。这些接口提供了一种简洁的方式来定义函数&#xff0c;常用于 Lambda 表达式和方法引用。下面是一些常用的接口&#xff1a; 一、Predicate&#xff08;断言&#xff09; …

go实现工厂模式

在Go中实现工厂模式&#xff0c;可以定义一个工厂接口和实现该接口的具体工厂类型。以下是一个简单的例子&#xff1a; package main import "fmt" // 定义一个接口&#xff0c;所有的具体产品都需要实现这个接口 type Product interface { Use() string } …

前端学习之DOM编程星星点灯案例

这个案例的实现逻辑是当你点击屏幕时&#xff0c;会完成一个事件&#xff0c;在你的屏幕上生成一张星星图片。然后再设置星星图片的大小将其改为随机。 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><t…

js和ts中的null与undefined

本文在个站同步发布&#xff0c;您可以在>>这里看到最新的文章。 1 定义 本文中的undefined和null指变量的字面值&#xff1a; undefined&#xff1a;已声明但未初始化的变量值null&#xff1a;未定义&#xff08;不存在&#xff09;的变量值 例如&#xff1a; var v…

代码随想录刷题——5双指针法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言5.1 移除元素&#xff08;3.30&#xff09;5.2 翻转字符串&#xff08;3.30&#xff09;5.3 替换数字&#xff08;3.30&#xff09;5.4 翻转字符串里的单词(3.3…

Halcon TCP 服务端接收命令

Halcon TCP 服务端接收命令 * 1.创建服务端 ***************************************** 协议 Protocol : TCP4 * 端口 Port : 5321 * 超时 Timeout : 1.0* 打开TCP服务端 open_socket_accept (Port, [protocol, timeout], \[Protocol,Timeout], AcceptingSocket)* 2.循环接受…

Netty和websocket,如何部署Netty

Netty是一个**高性能、异步事件驱动的网络应用框架**。 Netty是基于Java NIO&#xff08;非阻塞IO&#xff09;实现的&#xff0c;它提供了一套易于使用的API&#xff0c;帮助开发者能够更高效地开发出网络应用程序。以下是Netty的一些主要特点&#xff1a; 1. **异步和事件驱…

使用开源AI引擎:提高合同管理效率与合规性方案|可本地化部署

合同管理是企业运营中的关键环节&#xff0c;它不仅涉及到企业的经济利益&#xff0c;还直接关系到企业的法律风险控制。随着企业规模的扩大和业务的复杂化&#xff0c;传统的人工合同审核方式已经难以满足高效、准确的管理需求。因此&#xff0c;采用技术手段提高合同管理的效…

Vue基础知识:vue路由——模式设置(hash路由,history路由)

路由的路径会出现#,能否将#符号去掉。 1.hash路由&#xff08;默认&#xff09; 例如&#xff1a; “http//local:8080/#/home” 哈希路由&#xff0c;它的底层基于a标签锚 2.history路由&#xff08;常用&#xff09;例如&#xff1a; “http//local:8080/home”&#xff08…

LabVIEW数控磨床振动分析及监控系统

LabVIEW数控磨床振动分析及监控系统 在现代精密加工中&#xff0c;数控磨床作为关键设备之一&#xff0c;其加工质量直接影响到产品的精度与性能。然而&#xff0c;磨削过程中的振动是影响加工质量的主要因素之一&#xff0c;不仅会导致工件表面质量下降&#xff0c;还可能缩短…

zdpdjango_argonadmin Django后台管理系统中的常见功能开发

效果预览 首先&#xff0c;看一下这个项目最开始的样子&#xff1a; 左侧优化 将左侧优化为下面的样子&#xff1a; 代码位置&#xff1a; 代码如下&#xff1a; {% load i18n static admin_argon %}<aside class"sidenav bg-white navbar navbar-vertical na…

【Go】十八、管道

文章目录 1、管道2、管道的定义3、管道的关闭4、管道的遍历5、管道 协程6、只读、只写管道7、管道的阻塞8、select 1、管道 channel本质是一个队列&#xff0c;先进先出自身线程安全&#xff0c;多协程访问时&#xff0c;不用加锁&#xff0c;channel本身就是线程安全的一个s…

RCE(远程命令执行)漏洞详解

漏洞描述 RCE(remote command/code execute&#xff0c;远程命令执行)漏洞 远程代码执行 (RCE) 攻击是指攻击者可以在一个组织的计算机或网络上运行恶意代码。执行攻击者控制的代码的能力可用于各种目的&#xff0c;包括部署额外的恶意软件或窃取敏感数据。 漏洞原理 远程代…

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(六)- 向量内存一致性模型

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

练习 19 Web [BJDCTF2020]Easy MD5

如果你是第一批做这个题的&#xff0c;这道题一点也不easy 打开在前端代码里面看到&#xff0c;输入框输入的内容实际是’password’ 随意输入内容&#xff0c;查看响应header中的内容有一句SQL代码&#xff0c;可知我们要让password在md5后返回值为true 然后尬住&#xff…

蓝桥杯嵌入式(G431)备赛笔记——LED

目录 cubeMX配置&#xff1a; 代码模板&#xff1a; 注意&#xff1a; cubeMX配置&#xff1a; 原理图&#xff0c;其中PD2高电平使能锁存器&#xff0c;PC8-15默认给高电平&#xff0c;放置上电初始化LED亮 74HC573是八路输出锁存器 1脚是使能&#xff0c;低电平有效&#…

05-延迟任务精准发布文章

延迟任务精准发布文章 1)文章定时发布 2)延迟任务概述 2.1)什么是延迟任务 定时任务&#xff1a;有固定周期的&#xff0c;有明确的触发时间延迟队列&#xff1a;没有固定的开始时间&#xff0c;它常常是由一个事件触发的&#xff0c;而在这个事件触发之后的一段时间内触发…