CSS 字体术语
字体有些术语需要了解。
衬线字体
衬线字体指的是有衬线的字体,又称为有衬线体、衬线字、曲线描边字,俗称白体字。
衬线指的是字形笔画末端的装饰细节部分。
衬线字体便于阅读,通常用于长篇文本。
常见的衬线字体有:
Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
无衬线字体
与衬线字体相对的,没有衬线的称为无衬线体、无描边字,俗称黑体字。
在小文本中,无衬线体阅读会更清晰。
常见的无衬线字体有:
"Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif
等宽字体
等宽字体(英语:Monospaced Font)是指字符宽度相同的计算机字体。与此相对,字符宽度不尽相同的计算机字体称为比例字体。
通常用于显示代码。
常见的等宽字体有:
"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace
手写体
手写体又称书写体,港澳粤语称为潦草,是每个人用手书写的字体,用意在于加快书写的速度,而对少数笔画的简写或连写。每个人的手写体因人而异。
手写体包括:用刻字的篆书、毛笔书写的隶书、楷书及草书、钢笔字等等,现时也发明了一些手写的艺术字体。同时中国大陆亦以简化字所用的字形作为手写体,以区别印刷体的字形。
常见的手写体有:
"Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
虚幻字体
虚幻字体通常作为装饰性字体使用,经常用于标题。不适合长篇幅的文本。
粗细
字体的粗细可以起到强调的作用,还能影响空白区域的大小,及页面上的对比情况。
粗细有以下情况:
100 - 淡体 Thin ( Hairline )
200 - 特细 Extra-light ( ultra-light )
300 - 细体 Light
350 - 次细 Demi-Light
400 - 标准 Regular ( normal / book / plain )
500 - 适中 Medium
600 - 次粗 Demi-bold / semi-bold
700 - 粗体 Bold
800 - 特粗 Extra-bold / extra
900 - 浓体 Black ( Heavy )
950 - 特浓 Extra-black ( Ultra-black )
样式
样式有正常的和倾斜的。
其中倾斜的分为:斜体和伪斜体
倾斜(slope / slanted style)的字体称为斜体(italic type)及伪斜体(oblique type)。
样式有以下种类:
- nomarl
- italic
- oblique
伸缩
伸缩是从字体的宽度上来解释的。
在压缩中,字体会更窄,间距更小。
在伸缩中,字体会更宽,间距更大。
伸缩有以下种类:
- compressed
- condensed
- narrow
- normal/regular
- extended
- expanded
font-size
可以改变字体的大小字体大小。它的单位有px,em和百分比。
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >font-size</ title > < style > p{ font-size:48px; } </ style > </ head > < body > < h1 >利永贞网</ h1 > < h2 >学编程,上利永贞网</ h2 > < p >study hard, improve every day</ p > </ body > </ html > |
字体单位
像素
Web浏览器的默认文本大小为16px。
百分比
百分比以父元素中文本大小作为参照来改变当前元素中的文本大小。
示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >百分比</ title > < style > p{ font-size:300%; } </ style > </ head > < body > < h1 >利永贞网</ h1 > < h2 >学编程,上利永贞网</ h2 > < p >study hard, improve every day</ p > </ body > </ html > |
EM值
em值以父元素中文本大小作为参照来改变当前元素中的文本大小。
示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >EM</ title > < style > p{ font-size:3em; } </ style > </ head > < body > < h1 >利永贞网</ h1 > < h2 >学编程,上利永贞网</ h2 > < p >study hard, improve every day</ p > </ body > </ html > |