CSS 字体学习笔记

在网页设计中,字体的使用对于提升用户体验和页面美观性至关重要。CSS 提供了一系列字体属性,用于控制文本的显示效果。以下是对 CSS 字体属性的详细学习笔记。

一、字体系列(font-family

1. 字体系列的分类

在 CSS 中,字体系列分为两类:

  • 通用字体系列:拥有相似外观的字体系统组合,如 "Serif"、"Sans-serif"、"Monospace" 等。

  • 特定字体系列:一个特定的字体系列,如 "Times New Roman"、"Arial"、"Courier New" 等。

2. 常见字体系列对比

表格

复制

通用字体系列 字体系列 说明
Serif Times New Roman<br>Georgia Serif 字体中字符在行的末端拥有额外的装饰
Sans-serif Arial<br>Verdana "Sans" 意为无,这些字体在末端没有额外的装饰
Monospace Courier New<br>Lucida Console 所有的等宽字符具有相同的宽度

3. 设置字体系列

font-family 属性用于设置文本的字体系列。建议设置多个字体名称作为"后备"机制,以防浏览器不支持第一种字体。如果字体系列名称包含多个单词,需要用引号括起来。

示例

css

复制

复制代码
p {
    font-family: "Times New Roman", Times, serif;
}

二、字体样式(font-style

font-style 属性用于指定文本的字体样式,主要有以下三个值:

  • normal:正常显示文本

  • italic:以斜体字显示文本

  • oblique:文字向一边倾斜(与斜体类似,但支持度较低)

示例

css

复制

复制代码
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

三、字体大小(font-size

font-size 属性用于设置文本的大小。字体大小的值可以是绝对大小或相对大小。

1. 绝对大小

  • 设置一个指定大小的文本

  • 不允许用户在所有浏览器中改变文本大小

  • 在确定输出的物理尺寸时非常有用

示例

css

复制

复制代码
h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

2. 相对大小

  • 相对于周围的元素来设置大小

  • 允许用户在浏览器中改变文字大小

默认情况下,浏览器中普通文本段落的字体大小是 16 像素(16px = 1em)。

示例

css

复制

复制代码
h1 {
    font-size: 2.5em; /* 40px / 16 = 2.5em */
}

h2 {
    font-size: 1.875em; /* 30px / 16 = 1.875em */
}

p {
    font-size: 0.875em; /* 14px / 16 = 0.875em */
}

3. 使用百分比和 em 组合

为了在所有浏览器中实现一致的文本大小调整,可以将 <body> 元素的默认字体大小设置为百分比,然后使用 em 单位设置其他元素的字体大小。

示例

css

复制

复制代码
body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

四、字体粗细(font-weight

font-weight 属性用于指定字体的粗细。常见的值包括:

  • normal:正常粗细

  • bold:加粗

  • bolder:更粗

  • lighter:更细

  • 数字(100 到 900):数字越大,字体越粗

示例

css

复制

复制代码
p.normal {
    font-weight: normal;
}

p.bold {
    font-weight: bold;
}

p.bolder {
    font-weight: bolder;
}

p.lighter {
    font-weight: lighter;
}

五、小型大写字体(font-variant

font-variant 属性用于指定文本是否以小型大写字体显示。主要值包括:

  • normal:正常字体

  • small-caps:小型大写字体

示例

css

复制

复制代码
p.normal {
    font-variant: normal;
}

p.small-caps {
    font-variant: small-caps;
}

六、字体简写属性(font

font 属性允许在一个声明中设置所有的字体属性,包括 font-stylefont-variantfont-weightfont-sizeline-heightfont-family

示例

css

复制

复制代码
p {
    font: italic small-caps bold 16px/30px Georgia, serif;
}
相关推荐
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121388 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴9 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript