网页常用字体&CSS 字体设置详细介绍

最近在折腾 WordPress，前天晚上因为网络问题导致主题设置全丢了，包括预设的 font-family 等属性，于是开启了新一轮折腾之旅。对于我一个纯纯小白来说，需要搞明白几点：一是如何定义网页的字体，二是网页字体一般有哪些，三是字体样式美化。以下内容整理自网络，不是教程仅是我个人简要的笔记，有不对的地方请指出。

字体，是网页排版中最重要的元素之一，本篇文章将会针对 CSS 的字体属性比如font-family、font-size、font-style等进行详细介绍，希望帮助大家在跨平台浏览或是做些特殊排版时，能更轻松的使用网页字体，能让网页内容更清楚更精彩。

1、用 CSS font-family 定义网页字体

CSS 属性 font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体，字体之间用英文逗号隔开，当浏览器载入网页样式时，会从左边第一个字体开始判断，如果没有对应的字体，就直接采用下一种字体，如果到最后都没有可用的字体就采用电脑默认字体。

比如本页正在使用的 font-family 为：font-family:'Arial Narrow', 'Microsoft YaHei', sans-serif;，浏览器首先将所有字符尽可能使用 Arial Narrow 字体显示，因为它不含中文字符，于是浏览器继续往下套用，最终在本站呈现的是英文显示为 Arial Narrow 字体，中文显示为雅黑体的一个效果。这是我按照下文常用中文网页字体表一一尝试最后确定的，我个人感觉这样排版稍微好看一点。

CSS font-family 属性标准用法应为：

body{
  font-family:第一种字体, 第二种字体, "第三种 字体", "通用字体";
} 

其中如果你打算用的字体名称中有空格，须要用英文引号包起来。字体排列最末的通用字体共有五种，分别是 sans-serif ( 无衬线体)、serif ( 衬线体)、monospace ( 等宽体)、cursive ( 手写体) 和 fantasy ( 幻想体) ，这个参数其实可以不设置，主要是中文字体对此支持较差，让浏览器调用本地默认字体即可。

衬线体 serif 、无衬线体 sans-serif

衬线 serif 指的是字形笔画末端的装饰部分，因为 sans 在法语中代表「无」，所以 sans-serif 也就是无衬线体，与衬线字体相反，无衬线体完全抛弃装饰衬线，只剩下主干，造型简明有力，更具现代感，很适用于标题或广告。

等宽体 monospace

等宽字体表示所有的字母、数字都是同样的宽度，对于中文而言，每个字在设计上大多都是等宽，但英文就不同了，例如说 W 和 i 的宽度就差很多，这也造成有时在排版上的一些困扰，如果指定 monospace，就会自动套用系统预设的等宽字体。目前在本站上的代码<code>I Love You</code>类就使用了等宽字体，感受感受。

手写体 cursive、幻想体 fantasy

手写体和幻想体其实有点像，顾名思义手写体有点儿像钢笔写出来的感觉，以中文来说预设的手写体通常就是标楷体。而幻想体就是在手写之外，还多了一些额外的修饰，不过大多数的中文字体都不支持幻想体，因此这个参数一般使用衬线体或无衬线体代替。

2、中文网网页常用字体

因为 Win7 及以前版本的停服，Windows 巨大的占有率，现在应该是微软雅黑一统天下了吧？不过这事儿还是应该分中文字符和英文字符来区分看。

Windows 和 Mac 都支持的英文字体

排除系统额外安装和网页自定义引入外，以下字体都是默认内置在了系统中，可以放心地使用。

无衬线字体 sans-serif

Arial	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Arial Black	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Arial Narrow	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Charcoal	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Impact	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Tahoma	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Trebuchet MS	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Verdana	Kevin's Space ABCWLI abcwli 012345 &#@%${}~

衬线字体 serif

Georgia	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Palatino	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Times New Roman	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Times	Kevin's Space ABCWLI abcwli 012345 &#@%${}~

手写字体 cursive

Comic Sans MS

Kevin's Space ABCWLI abcwli 012345 &#@%${}~

等宽字体 monospace

Courier New

Kevin's Space ABCWLI abcwli 012345 &#@%${}~

幻想字体 Fantasy

Copperplate	Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Papyrus	Kevin's Space ABCWLI abcwli 012345 &#@%${}~

简体区常用中文字符一览

英文字体因为字母少，所以默认字体和第三方字体比较多，中文字就不同了，一款中文字的字数远大于英文，所以在跨平台的显示也会有所不同，这也是在制作网页常见的困扰，以下列出我见的比较多的中文字体，欢迎评论区补充。

微软雅黑	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
微软雅黑 Light	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
微软正黑	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
宋体	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
新宋体	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
仿宋	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
仿宋 _GB2312	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
华文仿宋	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
苹方	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
黑体	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
华文黑体	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
楷体	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
楷体 _GB2312	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
华文楷体	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
新明细体	欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~

以上是常见的网页字体，如果上述表格中部分所列没有正常显示的话，那么可能是你系统中不包含该字体……可以考虑本地安装一个，或者由网页引入。

3、网页如何使用外部字体

如果预设的字体都无法满足精心设计的版面，这时就需要使用外部的字体，要使用外部字体有下列三种方式：

使用 CSS link 加载外部字体

这个做法和一般载入 CSS 的方式一样，只是把 CSS 的超连结换成字体的超连结，就能够使用该字体。像最近博友全比较火的霞鹜文楷屏幕阅读版字体族就可以通过如下方式引入到网页，然后定义字体为font-family: "LXGW WenKai Screen", sans-serif;即可，网页效果可参考旅行漫记。

<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.1.0/style.css">

使用 CSS @import 加载字体

运用 CSS 的@import，将要载入的外部字体超链接，写在 CSS 内，载入后就能使用该字体。

<style>
  @import url('外部字体超链接');
</style>

使用@font-face 加载外部字体

@font-face是使用 font-family 很重要的概念，它可以让我们使用本地的字体文件（如 woff、ttf、SVG、EOT），或和线上字体互相搭配使用，亦可一并指定粗体、斜体等样式，还能通过利用unicode-range的方法，指定字元的特定字体，让网页的设计更具备灵活性…那样就显得比较复杂，超过了本文扫盲的范畴了。

4、CSS 字体常见样式美化

网页字体样式设置一般有这么几个参数：font-size、font-weight、font-style、text-transform、letter-spacing，他们分别定义文字大小、子重、字体形态、英文字母大小写转换和字符间距。

这几个属性按字面意思其实是比较容易理解的，实在不行查 W3C，按下不表，这里着重记录下：font-size 定义字符大小的使用方法。

比较难以理解的就是 font-size 具有很多个不同的属性值，比附 pt/px/em/large 等等，方便记忆可以把这些属性分为“网页”和“印刷”两大类，咱们这里只说网页，网页又可分为“单位”和“名称”两类。我个人完全外行，所以常常会简单粗暴的用绝对值，也就是PX定义字体大小，但如果理解了这些属性的意义和用法，往往事半功倍，这篇文章有详细介绍。

font-size 属性值（名称）

medium：预设值，等于 16px ( h4 预设值)
xx-small：medium 的 0.6 倍( h6 预设值)
x-small：medium 的 0.75 倍
small：medium 的 0.8 倍( h5 预设值，W3C 定义为 0.89，实测约为 0.8 )
large：medium 的 1.1 倍( h3 预设值，W3C 定义为 1.2，实测约为 1.1 )
x-large：medium 的 1.5 倍( h2 预设值)
xx-large：medium 的 2 倍( h1 预设值)
smaller：约为父层的 80%
larger：约为父层的 120%

font-size 属性值（单位）

px：绝对单位，代表萤幕中每个“点”( pixel )。
em：相对单位，每个子元素透过“倍数”乘以父元素的 px 值。
rem：相对单位，每个元素透过“倍数”乘以根元素的 px 值。
%：相对单位，每个子元素透过“百分比”乘以父元素的 px 值。