CSS Web Fonts 网络字体

Fonts

1. CSS font-family

在 CSS 中，可以使用 font-family 属性来指定字体，浏览器渲染文字时候会根据这个属性应用于元素。如果没有指定这个属性或者指定的字体不存在于客户的计算机上，则浏览器会使用默认字体。

    <style>
        .line {
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
    <p>Hello World!</p>

• 如果没有设置 font-family，浏览器会使用默认字体应用于元素。
• 如果 font-family 属性指定的字体，在本地计算机没有，则使用默认字体
• 如果字体的名称有空格，则必须要使用引号。
• 使用 font-family 属性可以指定一个字体，也可以指定一组字体列表——将多个字体用逗号分割
• 如果指定一组字体列表，则会依次查找，第一个字体本地没有，则使用第二个。如果指定的字体列表中的字体，本地计算机都没有，则浏览器使用默认字体应用于元素

2. Web safe fonts (网络安全字体)

系统中通常只有一定数量的字体可用，并且不同的系统中的字体可能不相同，所以在 Windows 上可以用的字体，在其他系统中不一定可以用。

开发者指定的字体，在自己的电脑上已经被安装，所以可以正常显示。但客户端机器并没有安装整个字体，则客户端会使用默认字体显示。所以开发者考虑哪一些字体是客户端基本都会被安装的。

有一些字体在常见系统（Windows, Mac, 常见的Linux发行版, Android和iOS版本）中都可以用，这些字体就是安全字体。
具体参考：
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts

3. Web fonts (网络字体)

Web 字体是一种 CSS 功能，允许指定的字体文件被下载到本地。

这是一种非常有效的方式，这样字体就不受限于本地是否安装了字体，而且大部分浏览器都支持Web 字体。

网络字体使用方式：

• Setp 1 下载网络字体；在 CSS 中，使用 @font-face 关键字下载网络字体，有2个必要属性

  • src 指定字体资源，

  • font-family 自定义一个名称。

    @font-face {
        font-family: "myFont";
        src: url("myFont.ttf");
    }
  

• Setp 2 使用字体；设置 font-family 属性，而这时 font-family 设置的是网络字体的名称，而不再是系统的字体。(网络字体的名称在上一步已经定义。)

    .line {
      font-family: 'myFont;
    }
  

3.1. 关于Web字体

1. Web 字体作为一种技术，从 IE 4 开始就得到了支持。
2. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。
   大多数浏览器都支持WOFF/WOFF2(Web Open Font Format versions 1 and 2, Web 开放字体格式版本1和2)，它是最有效的格式，但似乎旧版本IE只支持EOT(Embedded Open Type, 嵌入式开放类型)的字体，可能需要包含一个SVG版本的字体支持旧版本的 iPhone 和 Android 浏览器。
3. 字体一般都不能自由使用。必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。不应该在没有授权的情况下偷窃字体。

3.2. 字体格式

• TureType(.ttf)格式

  .ttf 字体是 Windows 和 Mac 的最常见的字体，是一种 RAW 格式，支持这种字体的浏览器有 ID9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+

• OpenType(.otf)格式

  .otf 字体被认为是一种原始的字体格式，其内置在 TureType 的基础上，支持这种字体的浏览器有 Firefox 3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+

• Web Open Font Format(.woff) 格式

  .woff 字体是 Web 字体中最佳格式，它是一个开放的 TrueType/OpenType 的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+

• Embedded Open Type(.eot)格式

  .eot 字体是 IE 专用字体，可以从 TrueType创建此格式字体，支持这种字体的浏览器有 IE4+

• SVG(.svg)格式

  .svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

不同的浏览器支持的格式不同，一些浏览器的老旧版本，它们只支持老旧版本的字体格式。例如， 大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器

所以我们一般都会把这几种字体都提供，让浏览器自己选择，这样可以获得更好的兼容性。

字体一般不能自由使用，必须要付费，或者遵循一些条件。不应该在没有授权的情况下偷窃字体。

3.3. 声明字体，@font-face

@font-face {
    font-family: 'myFont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

font-family 定义字体的名称，就像“宋体”，“微软雅黑”，“console”之类的内置的字体一样。

src 有2部分：

• url：指定要导入（下载）的字体文件的路径

• format：声明字体文件的格式，它允许浏览器更快地找到可以使用的字体，可选项。

src 可以列出多个声明，用逗号分隔。

浏览器按声明顺序找到它可以使用的字体，因此把最好的格式放在前面，把比较久的格式放在后面。比如WOFF2一般放在最前面，TTF放在最后面。

eot字体和IE是一个例外，eot是IE创建的一种格式，只有IE支持，并且IE9不支持format声明，所以会有2个src声明，其中一个是专门针对eot和IE9的

http://www.w3help.org/zh-cn/causes/RF1001

https://www.w3.org/Submission/EOT/

4. 获取网络字体

可以通过一些字体服务商获取字体，有一些是收费的，也有一些是免费的。

4.1. 通过互联网获得字体，使用 iconfont

国内也有不少网站提供字体，但一般用阿里的 iconfont ，在首页上方的菜单栏选择 在线字体

Step 1 在最上面的文本框中输入要应用字体的文字，比如：

我是一个任性的孩子，我希望，每一个时刻都象彩色蜡笔那样美丽。

（输入的这行句子总共有30个文字）

Step 2 添加你要应用的字体格式。

Step 3 下载并解压文字，

在你需要应用的字体文字的展示框里，选择本地下载，下载得到一个zip文件，将其解压，就得到了字体文件。

阿里提供了在线引用和下载到本地两种引用方式，但这里我们选择下载，本地测试不能使用在线引用。@@@具体官方有解释，参考官方的 webfont前端使用帮助 里 Q&A 的第三条。

解压之后会看到有.eot .svg .ttf .woff .woff2 这些格式的文件，这些就是字体文件。

4.2. 简单了解字体文件

这些文件直接打开，基本都是乱码，没法直接查看，唯独 .svg 我们是可以直接打开的。

打开 .svg 我们可以发现2个重要的东西：

• （针对我刚才那段文字生成的svg）里面总共有26个 <glyph> 元素
• 每个元素都有一个 unicode 属性

首先来看 unicode 属性：

这个 unicode 属性就是表示一个文字的 unicode 码，我们截取刚才输入文字的部分，看下面文字和 unicode 编码的对照：

我       是      一      个       任      性      的       孩      子       ，
我是一个任性的孩子，
我是一个任性的孩子，

（第一行是文字，第二行是对应的10进制 unicode 编码，第三行是对应的16进制 unicode 编码）

.svg 文件里的 unicode 使用的是16进制 unicode 编码，所以把上面的16进制 unicode 编码去 .svg 文件里查找，每一个都能找到。并且仔细看 <glyph>的排序方式，是根据 unicode 编码顺序排序的。所以每一个 <glyph> 都对应了一个文字的 unicode 和显示（属性d）。

再来看 <glyph> 元素：

每一个 <glyph> 都对应了一个文字的 unicode 和显示（属性d），但这里总共只有26个 <glyph> ，而我们的文字总共有30个，为什么只有26个 <glyph> 呢？

因为我们输入的30个文字中有3个文字是重复的：“我”，“一“，“，”（逗号）。不重复的文字共26个，所以阿里的 iconfont 只给我们生成了我们输入的这个26个文字，并且是根据 unicode 编码顺序排序的。所以这里要注意我们下载的字体只有这26个文字，其他文字没有这种字体。

另外还有个.html文件，这是使用字体的详细步骤，共3步。

4.3. 声明和使用字体

其实使用方式在 .html 文件里都有说明，跟着操作即可。

    <style>
        /* 第一步：使用font-face声明字体 */
        @font-face {
            font-family: 'hello-web-font';
            font-display: swap;
            src: url('webfont.eot');
            /* IE9 */
            src: url('webfont.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('webfont.woff2') format('woff2'),
                url('webfont.woff') format('woff'),
                /* chrome、firefox */
                url('webfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('webfont.svg#webfont') format('svg');
            /* iOS 4.1- */
        }
        /* Step 2, 定义使用 webfont 的样式 */
        .my-web-font {
            font-family: "hello-web-font" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <!-- Step 3. 为文字加上对应的样式 -->
    <p class="my-web-font">我是一个任性的孩子，我希望，每一个时刻都象彩色蜡笔那样美丽。</p>
    <p class="my-web-font">我希望，能在心爱的白纸上画画，画出笨拙的自由</p>

上面的例子中，特地多加了一行话，来看一下结果：

---

我是一个任性的孩子，我希望，每一个时刻都象彩色蜡笔那样美丽。

我希望，能在心爱的白纸上画画，画出笨拙的自由

---

结果差不多如上面这种效果，为什么有一些字体被改变，有一些使用的确实默认字体呢？

因为我们生成的字体文件只有我们生成的那26个文字，第一行就是我们生成的内容，所以第一行全部改变了字体，而第二行只有字体文件中包含的那几个文字（ unicode 编码），才会有对应的字体实现。

5. 字体图标

首先来看一下不同的字体，下面有3种不同的字体，分别是：默认字体、vivaldi 字体、Wingdings 字体。

（这个3个字体都是 Windows 系统默认就已经安装的字体）

<span>ABC123</span>
<span style="font-family:vivaldi">ABC123</span>
<span style="font-family:Wingdings">ABC123</span>

上面的代码输出结果如下：

---

ABC123

ABC123

ABC123

---

第一行是默认字体。

第二行字体非常漂亮，但也很好理解，因为我们在处理文档时会经常使用各种漂亮的字体。

第三个就比较奇怪了，第三行就是"ABC123"，但是字体把他显示成了"特殊"的文字，用户感觉这不像一个文字，更像一个图标，但本质上他就是一个文字、一段编码。

所以字体图标就是一个文字，称作字体“图标”是因为应用某个字体之后，这个文字看上去“像”一个”图标“。

5.1. 字体图标的应用

网站上总是有各种图标，比如返回按钮有一个表示返回的小图标，比如菜单栏——用户信息一般有个用户小人图标，购物车有个购物车图标。

以前小图标都是用精灵图处理，精灵图处理有3个缺点

• 要写样式
• 精灵图是小图片，放大会失真
• 精灵图是图片，无法修改颜色

在CSS中，可以使用字体图标替代精灵图，并且有许多优点：

1. 将所有图标打包成字体库、减少请求（字体被打包，访问网页时候一次性被下载）
2. 具有矢量性，放大不会失真，随意放大缩小可保证清晰度
3. 使用灵活，便于维护（因为他是一个文字，所以可以所以修改颜色、样式、大小等；对字体应用字体样式要比修改图片灵活的多。）

5.2. 通过互联网获得字体图标，使用 iconfont

字体图标本质上就是文字，所以生成字体图标和生成Web字体没有任何区别。在 iconfont 首页上方的菜单栏找到 图标库 - 官方图标库

在图表库中搜索自己想要的图标，然后鼠标移动到图标上选择那个”购物车“，把图标保存到自己的购物车里。

图标都添加完成之后，选择右上角的购物车，然后在购物车里选择添加到项目。（如果没项目则添加项目）

然后进入项目页面，在项目页面选择“下载到本地”

打开文件夹会发现和网络字体一样，会有多个字体文件和一个demo.html。详细操作在demo.html里头都有。

接下去，使用方式就和网络字体一样（使用 unicode 字体），

Step 1 声明字体，使用 @font-face

Step 2 定义样式

Step 3 应用样式，注意：这一部需要指定具体 unicode 编码

使用字体图标的步骤 Step 3 看上去略微不同——需要自己指定 unicode 编码，但实际上和字体文字一样（字体图标就是字体文字），因为在字体文字里头，我也强调了我们只下载了我们生成的文字，如果对字体文件里没有的文字应用该字体，则这些文字不会有任何变化，会使用默认字体显示。所以字体图标的 Step 3 ——要指定自己的 unicode 编码，其实和字体文字一样，只不过字体图标在使用的时候我们就是要使用指定的图标（文字），所以你需要使用哪个图标，就要在这里使用对应 unicode 编码。

前面两个步骤和字体文字一样，且demo.html种已经有详细描述，只是 Step 3 要注意使用对应的 unicode 编码，比如我使用的一个购物车图标的 unicode 编码是：

<span class="hello-icon-font">&#xe63c;</span>

5.3. 结合伪元素使用

unicode 编码的方式出现在 HTML 里头，不直观，如果光看代码，不可能知道这表示一个购物车“图标”

<span class="my-icon-font">&#xe63c;</span>

使用CSS伪元素添加文字（unicode 编码），并且通过给CSS样式的名称更加直观，这是一个好主意。

比如：

Step 2 定义字体图标样式

.my-icon-font{
    font-family: hello-icon-font;
}

Step 3 使用伪元素，因为这个“图标”表示一个购物车，所以给定义的样式名称叫“cart”，这样更直观。

.cart::before{
    content: "e641"; /* &#xe641 */
}

既然是一个字体，就能修改字体属性，（之前样式写在 Step 2 里）

.cart::before{
    content: "e641"; /* &#xe641 */
    color: red;
    font-size: 50px;
}

Step 4 就是原来的 Step 3 ，应用样式到元素

<span class="my-icon-font cart"></span>

参考：

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts