CSS字体样式

devtools/2024/9/24 6:17:25/

字体样式包含字体的类型,大小,颜色等基本效果也包含字体粗细,下划线,斜体等特殊效果

字体的类型

CSS中font-family属性用来表示字体类型,基本格式:font-family:name。它可以指定多个字体,这些字体可以按有限顺序排列。以逗号的形式隔开。如果字体名称包含空格应该使用引号括起来。
其中serif:衬线字体;sans-serif:无衬线字体;monospace:等宽字体;
Courier New:一种等宽字体,常用于代码编辑,或网页

css">font-family: 'Courier New', Courier, monospace;

字体大小

font-size:用来表示字体大小,拥有的属性值是:
xx-small:最小
x-small:较小
small:小
medium:正常
large:大
x-large:较大
xx-large:最大
larger:根据父对象的字体尺寸进行相应的增大
smaller:根据父对象的字体尺寸进行相应的减小
length:可以是百分值,浮点数字或标识符组成的长度值,但不能为负值。

css">font-size: 20px;

px:像素,根据屏幕像素点的尺寸变化而变化。不同分辨率的屏幕所显示的像素字体大小也是不相同的。分辨率越大,相同像素的字体越小。

字体颜色

color属性定义字体颜色,属性值是颜色值。
颜色值:由16进制来表示红绿蓝(RGB),每个颜色最低值为0,最高值255
十六进制写法:#后面跟十六进制字符
RGB表示方法:rgb(0,0,0)黑色

css">font-family:rgb(0,0,0)

字体粗细

font-weight用来定义字体的粗细,它的属性值有
normal:默认值,正常字体
bold:粗体,相当于700
bolder:相对于正字体而言较粗
lighter:相对于正常字体而言较细
也可以设置为100,200,300···900

css">font-weight:100

斜体字

font-style定义字体样式可以用来定义斜体字,属性值是italic

css">font-size:italic

定义下划线

text-decoration:用来定义下划线
none:无特效
bink:闪烁效果
underline:下划线
line-through:贯穿线效果
overline:上划线

css">text-decoration:none;

字体大小写

font-variant表示字体大小写效果
normal:正常的字体
small-caps:小型大写字母字体

大小写转换

text-transform用来转换英文字母的大小写。
none:默认值,无转换效果
capitalize:将单词的首字母转换成大写
lowercase:转换成小写
uppercase:转换成大写。

css">text-transfrom:capitalize;

http://www.ppmy.cn/devtools/9604.html

相关文章

SpringBoot整合Mybatis

目录 一、引入依赖 二、创建实体类 三、编写mapper接口以及映射文件 Mapper接口 映射文件 四、编写application.yml配置文件 五、进行测试 之前搭建项目的时候,没有什么问题包括引入依赖,结果在测试的时候一直报错,后面原因竟然是引入…

设计模式:生活中的状态模式

让我们通过一个生活中的例子来深入理解状态模式:咖啡机的工作流程。想象一下,一个咖啡机有几种状态:无币状态、有币状态、制作咖啡状态和咖啡制作完成状态。用户在每个状态下与咖啡机的互动都是不同的。 状态模式在咖啡机中的应用 无币状态…

ElasticSearch:查询操作合集

先看下我的数据: 1、查询所有文档: GET /cartest/_search或者 GET /cartest/_search {"query": {"match_all": {}} }2、匹配查询: match匹配类型查询,会把查询条件进行分词,然后进行查询&…

Web3钱包开发获取测试币-Base Sepolia(二)

Web3钱包开发获取测试币-Base Sepolia(二) ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b0c0ac86b04a496087471388532bc54a.png) 基于上篇 Web3钱包开发获取测试币-Polygon Mumbai(一) :https://suwu150.blog.csdn.net/article/details/137949473 我…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用CFMIME Encoder方法进行图像压缩保存(C++)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用CFMIME Encoder方法进行图像压缩保存(C) Baumer工业相机Baumer工业相机通过NEOSDK进行图像压缩的技术背景代码分析第一步:先引用对应的NET框架的DLL文件第二步:在回调函数里进行…

spi 收发流程

patch日期 收发流程的重大修改,来源于2012年的如下补丁 内核提交收发流程的patch spi: create a message queueing infrastructure - kernel/git/stable/linux.git - Linux kernel stable tree 源代码路径及功能 源码作用\drivers\spi\spi.cspi 通用接口&#x…

YOLOv8 测试 5-2:Linux 中 Dockerfile 部署 YOLOv8 项目一键运行,Python 封装 API 接口测试

一、前言 记录时间 [2024-4-15] 系列文章简摘: Docker 学习笔记(二):在 Linux 中部署 Docker(Centos7 下安装 docker、环境配置,以及镜像简单使用) API 接口简单使用(二)…

前端js控制元素移动

背景 页面中有多个表格,每个表格中均有一从右到左匀速移动的元素,随着元素移动需要在表格中增减数据,由于使用css3动画无法捕捉元素移动位置,所以这里采用js控制dom的写法 解决办法 最终代码放在文章的最后,各位看官…