CSS 21天入门：字体和字号
|
admin
2024年10月18日 22:45
本文热度 168
|
CSS 字体属性定义字体的样式，如大小，加粗，下划线等等。
字体族
CSS 定义了五种通用字体：
Serif、Sans-serif 和 Monospace
通过 Serif、Sans-serif 和 Monospace 三个 font-family，可以指定上述衬线、无衬线和等宽字体。
Serif: Times New Roman 和 Georgia
Sans-serif: Arial 和 Verdana
Monospace: Courier New 和 Lucida Console
CSS 字体属性
| 属性 | 描述 |
|---|
| font | 在一个声明中设置所有的字体属性 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本 |
| font-weight | 指定字体的粗细 |
| font-size | 指定文本的字体大小 |
| font-family | 指定文本的字体系列 |
所有的单个属性值，写 inherit 表明值从父元素继承。
font
font 属性可以设置所有字体属性。
可设置的属性按顺即为上面表格的顺序。
其中，font-size 和 font-family 的值是必需的。
如果缺少了其他值，默认值将被插入。
p.one { font: 15px arial, sans-serif; } p.two { font: italic bold 12px/30px Georgia, serif; }
具体来看下面的介绍。
font-style
有如下可选值，其中 normal 是默认值。
| 值 | 描述 |
|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
font-variant
有如下可选值，其中 normal 也是默认值。
| 值 | 描述 |
|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
font-weight
font-weight 有一个特殊之处，它有 100 到 900 的数值。
| 值 | 描述 |
|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100/200/300/400/500/600/700/800/900 | 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 |
font-size
xx-small/x-small/small/medium/large/x-large/xx-large：绝对大小值，把字体的尺寸设置为不同的尺寸 从 xx-small 到 xx-large。默认值：medium。
smaller: 相对大小值，把 font-size 设置为比父元素更小的尺寸。
larger: 相对大小值，把 font-size 设置为比父元素更大的尺寸。
length: 长度值，把 font-size 设置为一个固定的值。比如：14px，1em。
%: 百分比值，把 font-size 设置为基于父元素的一个百分比值。比如：80%。
font-family
有两种类型的字体系列名称：
总结
🍑 CSS 字体族有通用三种常用，衬线，无衬线和等宽字体。
🍑 所有单个字体属性的值都可以使用 inherit 从父元素继承。
🍑 font 是字体属性的简写，使用它按一定顺序指定字体全部属性。
该文章在 2024/10/19 12:45:45 编辑过
400 186 1886
