likes
comments
collection
share

自定义字体一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带

作者站长头像
站长
· 阅读数 14

本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载

概述

一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带的字体。所以你可以看到网页的字体一般都比较中规中矩，不像平面设计那样各种新花样。

但是我们在浏览一些网站时，还是可以发现一些非常酷炫和高端的字体。如小米笔记本 Air：

自定义字体一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带

这里我们可以看到其使用了'F5130a'字体，但是这个酷炫的高端字体我们的电脑里面都没有，它其实就是该站点自定义设置的字体。

那么如何实现自定义字体的效果呢？答案是 CSS 的 [@font-face](/user/font-face) 。

[@font-face](/user/font-face)

[@font-face](/user/font-face) 的语法规则如下：

[@font-face](/user/font-face) {
    font-family: <fontFamily>; /* 自定义的字体名称; */
    src: <source> [<format>][,<source> [<format>]]*;  /* 自定义的字体的存放路径、格式; */
    [font-weight: <weight>]; /*  是否为粗体 */ 
    [font-style: <style>]; /*  定义字体样式，如斜体 */
}

其取值说明如下：

  • fontFamily

    此值指的就是你自定义的字体名称，如“font-family: myFirstFont”。

  • source

    此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝对路径。

  • format

    此值表达自定义的字体的格式，用于帮助浏览器识别字体类型。

  • weight和style

    这两个值大家一定很熟悉，weight 定义字体是否为粗体，style 主要定义字体样式，如斜体。

实战使用

了解了 [@font-face](/user/font-face) 后，我们具体来实战下。首先我们可以到 dafont 随便下载一个字体，这里我们选中了下面这个字体：

自定义字体一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带

解压之后，得到我们的字体文件（ .ttf 和 .otf 属于不同格式的字体，下面我们再介绍）

自定义字体一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带

编写代码（为了方便使用，已经把 .ttf 格式的字体重命名为 webfont.ttf）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义字体</title>
    <style type="text/css">
        /* 定义字体 */
        [@font-face](/user/font-face) {
            font-family: 'Hard Stones Sans Strip';
            src: url('webfont.ttf') format('truetype');
        }
        .custom-font {
            font-family: 'Hard Stones Sans Strip'; /* 使用 [@font-face](/user/font-face) 自定义的字体 */
            font-size: 80px;
        }
    </style>
</head>
<body>
<p class="custom-font">HEAD SCRIPT</p>
</body>
</html>

最后效果可见：自定义字体。

字体格式

从上面下载的字体解压包来看，我们看到两个不同格式的字体（ .ttf 和 .otf ），除此之外还有几种字体格式，大体介绍如下（可以了解下）：

  • TrueType (.ttf)

    Windows 和 Mac 系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

  • OpenType (.otf)

    OpenType 是一种可缩放字型（scalable font）电脑字体类型，采用 PostScript格式，是美国微软公司与Adobe 公司联合开发，用来替代 TrueType 字型的新字型。这类字体的文件扩展名为.otf，类型代码是 OTTO。

  • Embedded Open Type (.eot)

    嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染。这些文件只在当前页活动的状态下，临时安装在用户的系统中。

  • Web Open Font Format (.woff)

    相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（ Metadata ），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。

  • Scalable Vector Graphics Fonts (.svg) 顾名思义，就是使用SVG技术来呈现字体，还有一种 gzip 压缩格式的 SVG 字体 .svgz。

这么多字体带来的问题是浏览器的支持：目前现代浏览器基本都支持 .ttf、 .otf、 .woff 的字体格式。但需要注意的是 IE8以下仅支持 .eot 格式，而 .svg 目前只有 safari 支持。具体兼容性可参看如下：

如何兼容

通过上面我们可以了解到若在使用 [@font-face](/user/font-face) 规则时仅仅考虑一种字体格式，则可能导致在某些浏览器中无法生效。因此为了兼容不同的浏览器，我们一般会使用多个格式，如下：

[@font-face](/user/font-face) {
    font-family: 'myFont';
    src: url('myFont.eot'); /* IE9 Compat Modes */
    src: url('myFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('myFont.woff') format('woff'), /* Modern Browsers */
}

自定义图标字体（iconfont）

自定义字体平时其实使用还是非常少的，不过它还有一个应用非常广的领域——自定义图标字体（iconfont）。如下面的图标：

自定义字体一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带

我们经常会在网页中使用这些图标，以前主要是通过背景图去做的，每次换个颜色或改个大小就得重新切个图，所以维护使用比较繁琐。这样图标字体就应时而生，它提供了一种解决方案：把一些简单的图标制作成字体，然后让图标变成和文字一样可以通过 CSS 去改变颜色大小等。

对于使用图片的图标来说，iconfont 图标有许多优点：

  • 灵活性：改变图标的颜色，背景色，大小都非常简单
  • 兼容性：基本没有兼容性问题，在IE6，Android2.3都能够兼容
  • 扩展性：替换图标很方便，新增图标也非常简单
  • 高效性：iconfont有矢量特性，不会失真
  • 轻便性：在使用上字体文件和普通的静态资源一样，既可以外链也可以内链，并且字体文件也可以使用gzip压缩

既然有这么多优点，我们也实战下。

首先我们先去Fontello这个图标字体库去选中几个图标：

自定义字体一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带

然后下载下来，解压如下：

自定义字体一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带

通过浏览器打开我们的 demo.html 文件就可以看到我们下载到的字体图标效果。

在正式使用之前，我们先研究下 fontello.css 的样式，代码截图大概如下：

自定义字体一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带

首先是使用 [@font-face](/user/font-face) 定义了字体，然后通过伪元素选择器 [class^="icon-"]:before, [class*=" icon-"]:before 使用该自定义字体，最后再根据不同的 class 设置不同伪元素的内容。

我们新建一个文件，直接引入（或拷贝）解压包中fontello.css的字体样式，写上对应的 HTML 结构如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体图标</title>
    <link rel="stylesheet" href="css/fontello.css">
</head>
<body>
    <i class="icon-search"></i>
    <i class="icon-mail"></i>
</body>
</html>

最后效果可见：字体图标。

更多关于字体图标的使用可参看：为什么要用和如何使用字体图标。

PS：一般来说，用不到那么多种字体格式，可以根据实际需要兼容的浏览器来选择格式，把其余不需要的都去掉。

字体资源与字体图标库

参考资料

转载自:https://juejin.cn/post/6844903550644912142
评论
请登录