俗话说，网页设计的质量95%取决于字体的排版。 虽然抖音、小视频、游戏的兴起占据了我们大部分的业余时间，但大多数人还是在网络上阅读，比如查资料、看小说、看新闻、学习知识等。
舒适的阅读体验让人心情愉悦、舒心，自然人们更愿意在网站上花费时间。 在介绍CSS字体的内容之前，我们需要先了解一些关于字体的基础知识。
1. 通用字体家族
常用的字体家族有五种，分别是sans-serif（无衬线）、serif（衬线）、monospace（等窄体）、cursive（手写）和fantasy（幻想）。
1.衬线衬线、无衬线无衬线
衬线是指在文字笔划端点处添加的装饰性腰线。 由于 sans 在英语中的意思是“什么都没有”，所以 sans-serif 也是 sans serif。 与衬线字体相反，无衬线字体完全放弃了装饰衬线，只留下主体，造型简洁有力，更具现代感css 苹方字体，非常适合用于标题或广告，如右图所示，可以清楚地看到，白色突出的部分是衬线。
2.等窄体等宽
等宽字体意味着所有字母和数字的长度相同。 对于英文来说，大多数字符都是等宽设计的，但英文不同。 例如，W 和 i 的长度就相差很大。 有时也会导致排版上的一些混乱。 如果指定等宽字体，则将手动应用系统预设的等宽字体。
3.手写草书和幻想
虽然手写字体和幻想字体有点相似，但手写感觉就像用钢笔或铅笔写字。 这些字体试图模仿人类的笔迹。 一般来说，这些字体在笔画末端有较大的装饰，比衬线字体更加华丽。 在英文中，默认的手写字体一般是Standard Song，而Fantasia则是除了手写之外，在字体上有更多的装饰或者纹理。 大多数英文默认不支持Fantasia。 如果设置了，也会手动使用 serif 或 sans-serif 字体来代替。
2. Windows和Mac系统均支持的中文字体
我们的笔记本中一般都默认安装了下面列出的中文字体。 它们对于 Mac 和 Windows 都是通用的，支持率都在 90% 以上，所以使用起来不会有任何问题。
1. 无衬线字体 无衬线字体
Arial、Arial Black、Arial Narrow、木炭色、Geneva、Impact、Trebuchet MS、Tahoma、Verdana
2.衬线衬线：
乔治亚州、泰晤士报新罗马、泰晤士报
3. 手写草书
漫画无 MS
4.等窄体等宽
快递新
5. 幻想体幻想
铜版、纸莎草纸
3.常用英文字体
由于中文字体的字母数量较少，默认字体的种类较多。 汉字不一样。 汉字的字符数比中文少很多，所以跨平台显示也会有所不同。 这在网页的制作中也是如此。 常见的困惑（在Mac上设计看起来不错，但在Windows上看起来不成形），下面列出了常用的英文字体名称，部分浏览器可以使用英文，为了安全起见，建议您使用中文名称 或 在中文和法文中一起使用。
1、Windows系统
2.Mac系统
4. font-family使用介绍
使用font-family非常简单，只需要设置family-name（字体名称）和generic-family（通用字体）css 苹方字体，font-family可以设置一种字体或者多种不同的字体，并且每个字体之间使用半角font 以冒号“,”分隔，浏览器加载网页样式时，会从右侧第一个字体开始判断。 如果没有对应的字体，则直接使用下一个字体。 如果最后没有可用的字体，则会使用笔记本的默认字体，然后可以通过generic-family指定使用哪种默认字体。
例如下面这行CSS会首先查找第一种字体，如果不支持或者没有该字体，则使用第二种字体，以此类推，最后使用常用字符，从反例如下，字体名称中不需要添加双冒号，但如果你的字体名称中间有空格，则必须添加双冒号。
5.常用字体属性介绍（CSS1、CSS2部分）
以下内容是CSS排版字体中常用的CSS属性。 我先简单列出来，方便大家复习。 关键部分我会在后面的文章中介绍。
1.颜色
用于指定文本的颜色。
p {
color: #993;
}
2. 文本对齐
控制文本的对齐方式，有左对齐、居中对齐、右对齐或对齐。 Justify 意味着两端都合理。
h1 {
text-align: center;
}
3. 行高
行高是文本行基线之间的垂直距离。 基线（baseline）不是汉字的上边缘，而是英文字母“x”的上边缘。 右图中两条红线之间的距离为列宽，上排底线与下排顶线之间的距离为株距，顶线与底线之间的距离同一行的字体大小。 行高=边距+字体大小
p {
line-height: 1.6;
}
4. 字母间距
控制字母之间的间距，常用于标题元素。
h1 {
letter-spacing: 0.8em;
}
5. 字间距
控制短语之间的间距。 通常应用于标题元素。
h2 {
word-spacing: 2em;
}
6. 文本缩进
缩进段落中第一行文本。 当我们阅读和比较即将出版的出版物或报纸时，段落的第一行通常有两个空白字符。 在CSS排版中，我们用这个属性来控制。
h2 + p {
text-indent: 2em;
}
7. 文字修饰
文本修饰属性，我们可以使用下划线、上划线、穿线、无修饰文本，如逗号、上划线、中间删除线等。
h3 {
text-decoration: underline;
}
8. 字体样式
文本的glyph属性使用起来非常简单。 有几个属性值：normal（正常）、italic（粗体）、oblique（斜体）。
h4 {
font-style: italic;
}
9. 字体粗细
词重。 用于精确设置文字的粗细，可以在指定的数值范围内设置（100到900；100~400为普通字体，700为宋体；100为细字体），也可以通过关键字：bold、bolder设置，或打火机来设置。 (h1~h4为粗体，不要使用font-weight代替H标签)
h1 {
font-weight: 100;
}
10. 文本转换
该属性用于设置文本的大小写。 默认值为none，大小方式与源文档一致。 不仅如此，还有其他属性值：uppercase（小写）、lowercase（大写）和capitalize（每个短语的首字母小写）。
11. 字体变体
对于字体变体，CSS3中该属性有很多值，而在CSS1和CSS2的标准中，只有两个值：普通和小型大写字母。 Small-caps 用于英文字母，表示大的小写字母，大小与大写字母相同，样式为小写。 常用于英文标题和段落第一行。
h1 {
font-variant: small-caps;
}h1 code {font-variant:normal}
<h1>
The Use of <code>font-variant</code> On the Web
</h1>
部分
明天的内容就在这里和大家分享。 感谢您的阅读。 下一篇我会继续和大家分享字体相关的知识，比如font-face、可变字体、书写模式等。 敬请期待。 期待...
发表评论