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和百分比。
示例

<!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。
百分比
百分比以父元素中文本大小作为参照来改变当前元素中的文本大小。
示例

<!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值以父元素中文本大小作为参照来改变当前元素中的文本大小。
示例

<!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>
以上