css_05 | CSS——CSS 给文本加样式：① 字体属性

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

css_05
复制代码

简述字体图标的原理，动手实现使用 iconfont 实现字体图标的 demo。
复制代码

---

前言： 做为 Web 页面最基本的组成部分，“文本”的重要性不言而喻。对于“文本”来讲，咱们须要掌握两个与之相关的属性——“字体属性”和“文本属性”。
CSS 字体属性：主要定义“文本”的字体系列、字体大小、字体粗细、风格和变形等；
CSS 文本属性：主要定义“文本”的外观：如缩进和水平对齐、垂直对齐、字间隔和字母间隔、文本转换、文本装饰、文本阴影、处理空白符和文本方向等。

本篇，咱们先学习“CSS 字体属性”。

---

1 定义“文本”的字体系列

font-family 属性用于定义“文本”的字体系列。

首先，咱们平时所说的“字体”并不仅是单个的字体，而是一个“字体系列”。

除了如 Times、Verdana、Helvetica 或 Arial 等各类“特定字体系列”外，CSS 还定义了 5 种“通用字体系列”。

所谓“通用字体系列”是指：拥有类似外观的字体系统组合。理论上，用户安装的任何字体系列每每都会落入到这 5 种通用系列当中（实际工做中的特例除外）。

1.1 5种通用字体系列

• Serif 字体（又名“衬线字体”）

• Sans-serif 字体（又名“无衬线字体”）

  

• Monospace 字体 （又名“等宽”字体）

  

• Cursive 字体（又名“手写体”）

  

• Fantasy 字体（又名“梦幻字体”）
  这种字体的特征就是：咱们没法很容易地将其归于以上 4 种字体中。它主要被用在图片中，字体看起来很艺术，实际网页上用得很少。

1.2 工做中，怎么指定“字体系列”

假如需求以下：我想对 p 指定字体为 Times 显示，但同时也接受如下的 serif 字体顺序（TimesNR、Georgia、New Century Schoolbook 、New York）。

那么每每咱们会进行以下代码书写：

p {
    font-family: Times, TimesNR, Georgia, 'New Century Schoolbook', 'New York', serif;
}

/*🏆固然，也能够用 unicode 码来直接表示字体。例如： '\5FAE\8F6F\96C5\9ED1' 就是“微软雅黑”这四个字的 unicode 码 */
/*咱们怎么知道一个“字体”的 unicode 码？咱们能够右键检查元素，而后点击 console ， 而后输入 escape('黑体') ，就能够弹出相应的码。而后把 %u 换成 \ */
复制代码

⚠️为何这么写：

• font-family 属性用于指定文档采用何种“字体系列”；
• 当咱们只对 Web 页面指定一个或几个特定字体时，若按如下代码书写就会出问题：

p {
    font-family: Times, TimesNR, Georgia, 'New Century Schoolbook', 'New York';
}
复制代码

因为在一个跨平台的环境下，咱们没法保证用户一样也安装了这些特定字体。
若是用户没有安装这几种字体，那么用户的浏览器就会使用一个默认的字体来显示这个 Web 。对此，咱们 Web 制做者将没法控制显示效果。
但，若是末尾加了一个 serif ，则能够告诉用户的浏览器：即便你电脑里没有安装我以上的这些字体，那么也请使用一个你电脑里边安装了的“衬线体”来显示个人 p 。

• 注意看规则里边出现了“单引号”：

  

当一个字体名中有一个或多个空格，或者若是字体名包括 # 或 $ 之类的符号时，咱们就必须用单引号把这个字体名引发来，以便浏览器识别。

另一种状况是，若是你把上文的 5 种“通用字体系列”用单引号引发来，那么浏览器则会认为（或者你原本就想告诉浏览器）：你须要一个与这 5 种字体系列同名的“特定字体”而不是“通用字体”。

2 定义“文本”的字体大小

font-size 属性用于定义“文本”的字体大小。

请先阅读文章《CSS 值和单位 》中关于 em 、rem 等的讲解。

💡在实际工做运用中：
在不考虑 IE8 及如下版本的前提下，咱们彻底能够一开始就将文档的 font-size 值设置为 10px，这样在以后的计算中就很简单了。所须要的 (r)em 值就是想获得的像素值除以 10，而不是浏览器默认大小的 16。这样咱们就能够很轻松地调整 HTML 中咱们想调整的不一样类型文本的字体大小了。

3 定义“文本”的字体粗细

font-weight 属性用于定义“文本”的字体粗细。

关键字 100 ~ 900 为字体指定了 9 级加粗度。若是一个字体内置了这些加粗级别，那么这些数字就直接映射到预约义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。

但，字体所拥有的字重的数量，实际上不多存在知足有 9 个字重恰好跟 100-900 的 CSS 字重一一对应的状况，一般字体拥有的字重数量为 4 到 6 个。固然，也没必要担忧，至少 400 和 700 对应的字重是每种字体必备的——数字 400 等价于 normal，而 700 等价于 bold。

实际工做中，咱们通常最经常使用的仍是 normal 和 bold 这两个值。用法举例：

h2 {
    font-weight: bold;
}
复制代码

若是将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与之相反，关键词 lighter 则会致使浏览器将加粗度下移而不是上移。

4 定义“文本”的字体风格

font-style 属性用于定义“文本”的字体风格。

有如下几个值：

4.1 italic

若是当前字体的斜体版本可用，那么文本设置为斜体版本；若是不可用，那么浏览器会利用 oblique 状态来模拟 italics。eg:

p {
    font-style: italic;
}
复制代码

4.2 oblique

将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。eg:

p {
    font-style: oblique;
}
复制代码

4.3 normal

将文本设置为普通字体 (将存在的斜体关闭)

5 定义“文本”的字体变形

font-variant 用于定义“文本”的字体变形。

对于 font-variant ，它只有两个非继承值：默认值 normal 和 small-caps。normal 描述正常文本，small-caps 要求使用“小型大写字母”文本。

6 跳出限制，让“字体”有更多可能——字体图标

@font-face 规则，它容许网页开发者为其网页指定在线字体。 经过这种做者自备字体的方式，@font-face 能够消除对用户电脑字体的依赖。

“规则”写法以下：

@font-face {font-family: "远程字体名称";
            src: url(https://);}
复制代码

如下咱们以实际工做中经常使用的 iconfont 做说明：

• 第一步：打开阿里巴巴旗下网站 www.iconfont.cn/ ，登陆后搜索图标 (如：login)

  

• 第二步：加入购物车，并储存为项目 test-1

  

• 第三步：在“个人项目”这个界面里，咱们着重看 Font class

  

• 第四步：能够按本身须要编辑图标

  

• 第五步：编辑完，“仅保存”后返回项目界面，点击“查看在线连接”

  

• 第六步：复制代码到本身的 html 文档

  

• 第七步：在本身的 html 引入样式表，并查看结果

  

• 第八步：如此一来，咱们就能够像本篇文章一开始介绍的给“文本”加样式同样，来操做这些“字体图标”

  

🏆小总结：

1. 上述这些操做跟 @font-face 有什么关系？

如今咱们把以前粘贴过来的代码在网站上打开，看看是个什么东西：

如图所示，结合阿里的工具，咱们确实是既简单又方便的用了 @font-face 规则。

2. 字体图标的工做原理是怎样的，为何能够这样用？

在文章《① HTML 基础》中咱们就了解到：

咱们在编写 HTML 文档时，<meta charset="utf-8"> 这个标签是必须指定的，这是为了告诉浏览器，你应该用 utf-8 这种 unicode 来解码。

换句话说，即便咱们 HTML 文档里的文字所有直接用 unicode 码来写也是彻底没问题的——unicode 码，能够认为是世界上任意一种文字的特定编号 。

若是这样的话，基于“一个国家的文字，其余国家的人看来就是图标”这个点，那咱们制做出来的任意“图标”也是均可以在页面上展现，并像“文字”同样被操做的。

只是通常的字体图标都不是现有的文字，都是一些流出来可扩展的 unicode 码，换句话说，这些码你能够任意添加东西，但它不是已有的标准。

所以你须要用 @font-face 规则去声明一个字体（如上边及下边的操做说明）。

3. 为何第三步不操做 Unicode ，而操做 Font class ？

那咱们操做一次看看有哪里不妥：

咱们看到单纯的只是把 unicode 码写在文档中，是不会显示出图标的。咱们须要 @font-face 来声明一个下载字体：

复制并粘贴到 HTML 文档中查看效果：

一样均可以出来效果，背后也用的是一样的原理，但咱们能够看到上图中，<body> 标签里的 <p> 和 <h1> 都是以 unicode 码书写的，这种方法将不利于阅读和维护——单纯看代码，咱们根本不知道这是个什么东西。

---

后记： 下篇文章咱们将接着讨论“文本属性”，在学习到其中的 line-height 后，咱们再接着这篇文章引入 font 属性。届时，“CSS 给文本加样式”将彻底被咱们掌握。

祝好，qdywxs ♥ you！