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>