用 @font-face 实现自定义字体

一、语法

二、字体格式

三、实战使用

四、各浏览器兼容

五、用 unicode-range 指定字体适用范围

1. unicode-range的值和语法

2. unicode-range的常用值

六、字体压缩

参考文章

一、语法

@font-face {font-family: <fontFamily>; /* 自定义字体名称; */src: <source> [<format>][,<source> [<format>]]*;  /* 自定义字体的存放路径、格式; */[font-weight: <weight>];[font-style: <style>];
}

src: 远程字体文件位置的URL或用户计算机上的字体名称，可以使用 local 语法指定用户本机上的字体。如果找不到该字体，将会按顺序尝试其他来源，直到找到它。

iconfont 图标字体就是使用了自定义字体。

二、字体格式

1) .ttf 格式

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

2) .otf 格式

.otf 全称 OpenType，是一种可缩放字型电脑字体类型，采用 PostScript格式，是美国微软公司与Adobe 公司联合开发，用来替代 TrueType 字型的新字型。

3) .eot 格式

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

4) .woff 格式

Web开发字体格式 .woff 全称 Web Open Font Format，是一种专门为了 Web 而设计的字体格式标准，是对 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（ Metadata ），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施，是 Web 字体中最佳格式。

兼容性：IE9+

5) .svg 格式

.svg 全称 Scalable Vector Graphics Fonts，是使用SVG来呈现字体，还有一种 gzip 压缩格式的 SVG 字体 .svgz。

兼容性：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+

三、实战使用

首先我们可以到 dafont 随便下载一个字体，这里我们选中了下面这个字体：

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

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

/* 定义字体 */
@font-face {font-family: MyFont;src: url('webfont.ttf') format('truetype'),url('webfont.otf');
}/* 使用字体 */
.font {font-family: MyFont;
}

四、各浏览器兼容

@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 */
}

五、用 unicode-range 指定字体适用范围

现在我们再来下载一种比较飘逸的字体

现在我们来实现一下 a 用这种比较飘逸的字体（J-Flames），其余的用上面那种字体

@font-face {font-family: MyFont;src: url('webfont.ttf') format('truetype'),url('webfont.otf');
}
@font-face {font-family: Fashion;src: url('J-Flames.ttf');unicode-range: U+61; /* a的unicode */
}.font {font-family: Fashion, MyFont;
}

效果图

1. unicode-range的值和语法

unicode-range 值的组成：U+跟上对应字符的charCode值。

unicode-range: U+26;               /* 单个字符编码 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* 字符编码区间 */
unicode-range: U+4??;              /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 多个值 */

这里使用的 Unicode 是十六进制的，所以要把用 charCodeAt 获取的十进制 Unicode 用 toString 转成十六进制才能使用。

let unicode10 = 'a'.charCodeAt(0);
let unicode16 = unicode10.toString(16); // 61

于是，前端领域字符表示方式又多了一员：
1. HTML中字符输出使用&#x配上charCode值；
2. 在JavaScript文件中为防止乱码转义，则是\u配上charCode值；
3. 而在CSS文件中，如CSS伪元素的content属性，直接使用\配上charCode值。
4. unicode-range是U+配上charCode值。

2. unicode-range的常用值

汉字：[0x4e00,0x9fa5]（或十进制[19968,40869]）
数字：[0x30,0x39]（或十进制[48, 57]）
小写字母：[0x61,0x7a]（或十进制[97, 122]）
大写字母：[0x41,0x5a]（或十进制[65, 90]）

六、字体压缩

自定义的字体文件一般都比较大，这时可以用字蛛进行压缩。

字蛛官网是这么介绍字蛛的：字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

参考文章

CSS unicode-range特定字符使用font-face自定义字体
自定义字体