认识网络字体

在使用网络字体前,先回顾一下font-family 的使用和过程:

我们需要提供一个或多个字体种类名称,浏览器会在列表中搜寻 ,直到找到它所运行的系统上可用的字体
这样的方式完全没有问题,但对于传统的web开发人员来说,字体选择是有限的;
这就是所谓的Web-safe 字体;
并且这种默认可选的字体并不能进行一些定制化的需求;

比如如下的字体样式,系统的字体肯定是不能实现的

那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts 即可.

Web fonts 的工作原理

首先,我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):

对于某些收费的字体 ,我们需要获取到对应的授权
对于某些公司定制的字体 ,我们需要设计人员来设计
对于某些免费的字体 ,我们需要获取到对应的字体文件;

其次,在我们的css代码中使用该字体;

最后,在部署静态资源时,将HTML/CSS/JavaScript/Font 一起部署在静态服务器上.

从用户的角度来说:

浏览一个网页时,因为代码中有引入字体文件,字体文件会一起被下载下来;
浏览器会根据使用的字体在下载的字体文件中,查找,解析,使用对应的字体;
在浏览器中使用对应的字体显示内容

如何使用Web Fonts

第一步:在字体天下网站下载一个字体

第二步:使用字体

将字体放到对应的目录中
通过@font-face来引入字体 ,并设置格式
使用字体

注意: @font-face 用于加载一个自定义的字体

web-fonts 的兼容性

我们刚才使用的字体文件时 .ttf,它是TureType字体.

在开发中某些浏览器可能不支持该字体,所以为了浏览器的兼容性问题,我们需要有对应其他格式的字体;

常见字体格式

TrueType 字体: 拓展名是 .ttf
OpenType/TrueType 字体:拓展名是.ttf,.otf,建立在TrueType 字体之上
Embedded OpenType 字体:拓展名是.eot,OpenType字体的压缩版
SVG字体:拓展名是.svg,.svgz
WOFF 表示 Web Open Font Format web开放字体: 拓展名是.woff,建立在TrueType 字体之上

这里提供一个网站来生产对应的字体文件

font.qqe2.com/#

web fonts兼容性写法

css 复制代码

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

这是被称为 bulletproof @font-face syntax(刀枪不入的@font-face 语法)

src 用于指定字体资源
url 指定资源的路径
format 用于帮助浏览器快速识别字体的格式.

完整demo 操作例子

html 代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        font-family: "tutu";
        font-size: 30px;
        color: aquamarine;
        text-shadow: 2px 2px forestgreen;
      }

      @font-face {
        font-family: "tutu";
        src: url("./font/QTxiaotu.eot"); /* IE9 */
        src: url("./font/QTxiaotu.eot?#iefix") format("embedded-opentype"),
          /* IE6-IE8 */ url("./font/QTxiaotu.woff") format("woff"),
          /* chrome、firefox */ url("./font/QTxiaotu.ttf") format("truetype"),
          /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
            url("./font/QTxiaotu.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
      }
    </style>
  </head>
  <body>
    <div>兔年发财,跳跳更快乐!!</div>
  </body>
</html>

文件放置目录

这里需要注意, 通过转化的字体文件中的css 文件也要拖进来,否则会出现问题.(icon.css,page.css,QTxiaotu-symbol.svg)

如何在网站中使用网络字体