【CSS】字体样式,包括字体系列、大小、修饰、粗细、简写...

简介: 有关CSS字体样式的学习记录。

1️⃣前言

今天的笔记内容是:

  • 字体属性的设置,包括字体系列、字体大小、字体修饰、字体粗细、字体属性简写等

2️⃣字体

🎐字体系列

CSS使用font-family属性来定义文本的字体系列。

如果我们不设置字体系列,则使用浏览器中的默认字体。但我们也可以利用font-family属性来设置文本中字体的类型。

font-family属性有两种取值,具体如下:

  • generic-family:字体族,共五种,分别表示不同类型的字体,注意,每个字体族都包含很多相似但又不同的字体。比如Lucida BrightBrush Script Std
  • family-name :字体名称,也就是字体的具体名。 比如“宋体”、“微软雅黑”等

关于字体族的介绍如下:

字体族 含义 举例
serif 衬线字体,在每个字母的边缘都有一个小的笔触或衬线 Times New Roman GeorgiaGaramondLucida Fax
sans-serif 无衬线字体,即在文字笔画结尾处是平滑的,字体线条简洁(没有小笔画) Open SansTrebuchet MS
monospace 等宽字体,即每个文字的宽度都是相同的,有固定宽度 Courier NewLucida ConsoleConsolas
cursive 草书字体,模仿人类笔迹,有种手写的感觉 Brush Script MTLucida HandwritingLucida Calligraphy
fantasy 具有特殊艺术效果(装饰性/俏皮)的字体 PapyrusCurlz MT

字体族的部分举例如下:

image.png

family-name 字体举例如下:

image.png

总结的说,我们使用font-family属性来设置文本的字体系列,同时该属性应该设置多个值充当"后备"机制,如果当前浏览器无法支持第一种字体系列,则尝试写一个字体系列,以此类推。需要注意的是,如果字体系列的名称超过一个字,则必须使用引号括起来。

举个例子:

image.png

字体设置如下:

image.png

效果如下:

image.png

🖊️字体大小

font-size属性用于定义字体的大小。用精确数值加px作为单位。谷歌浏览器的字体默认大小为16px,不同浏览器显示的字体默认大小可能不一致,我们尽量给字体设置一个明确的大小。

🪄字体修饰

CSS使用font-style属性来修饰字体的样式。font-style属性的取值有两个:

  1. normal:默认值,浏览器会显示标准的字体样式;
  2. italic:斜体,浏览器会显示倾斜的字体样式。

举个例子:

image.png

效果如下:

image.png

💡字体粗细

font-weight属性用于定义文本字体的粗细。font-weight属性值如下所示:

属性值 含义
normal 默认值(不加粗)
bold 字体加粗
lighter 字体变细

当然,font-weight属性也可以填数值,范围为100~900,其中400相当于normal700相当于bold,需要注意的是,数值后面不用带单位。

image.png

🪜简写属性

为了节约代码量,我们可以使用复合属性,将字体属性简写在font属性中。使用font属性时,需要按照一定顺序填写,各个属性之间用空格隔开。具体顺序如下所示:

image.png

使用font属性时,不需要设置的字体属性可以省略,但有两个特殊的属性必须保留:font-sizefont-family,这两个属性无法省略,否则font属性将不起作用。

📓属性总结

属性 含义
font-family 字体名称,比如'宋体' 定义字体属于哪种系列
font-size 精确值,单位为px 定义字体的大小
font-style normal / italic 定义字体样式:正常 / 斜体
font-weight normal / bold / lighter 定义字体粗细:正常 / 加粗 / 变细

3️⃣写在最后

好了,今天的笔记就到写这。

目录
相关文章
|
3月前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
7月前
|
前端开发
【CSS】CSS字体样式【CSS基础知识详解】
【CSS】CSS字体样式【CSS基础知识详解】
|
12天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
13天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
18天前
|
前端开发
css_字体混合正片叠底与发光
css_字体混合正片叠底与发光
15 0
css_字体混合正片叠底与发光
|
20天前
|
前端开发 开发者 流计算
css字体
【4月更文挑战第23天】css字体
13 3
|
24天前
|
前端开发
css 字体渐变样式(设置字体渐变样式+附加实现源码)
css 字体渐变样式(设置字体渐变样式+附加实现源码)
22 0
|
28天前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
61 1
|
4月前
|
前端开发
让页面里的字体变清晰,变细用CSS怎么做?
让页面里的字体变清晰,变细用CSS怎么做?
49 2
|
4月前
|
Web App开发 前端开发
CSS:字体和文本样式
CSS:字体和文本样式
42 0