@font-face 字体

一.@font-face是CSS3中的一个模块，把自己定义的Web字体嵌入到你网页中

@font-face的语法规则
@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

取值说明

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

字体格式

1、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
2、OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
3、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
4、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
5、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

// PC一般都全部用, 移动端只用.ttf字体

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

// 移动端
@font-face {
    font-family: 'stcaiyunregular';
    src: url('../font/STHUPO.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

二、获取@font-face所需字体格式：

fontsquirrel工具
https://www.fontsquirrel.com/tools/webfont-generator

如果你的项目中是英文网站，而且项目中的Logo，Tags等应用到较多的这种特殊字体效果，我建议你不要使用图片效果，而使用@font-face，但是你是中文网站，我觉得还是使用图片比较合适，因为加载英文字体和图片没有多大区别，但是你加载中文字体，那就不一样了，因为中文字体太大了，这样会影响到项目的某些性能的优化；

以上几点都是在平时制作中常出现的问题，希望大家能小意一些，另外我们没有办法在购买所有字体，就算你实力雄厚，那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体，但下面这个工具作用更是无穷的大，他能帮你生成@font-face所需要的各种字体，这工具就是Font Squirrel。

最后在提醒一下，使用@font-face别的可以忘了，但Font Squirrel千万不能忘，因为他能帮你生成@font-face所需的各种字体格式。

三.压缩中文字体

Font-Spider （字蛛）==> 压缩中文字体, 删除没有用到的字体

1.爬行本地 html 文档，分析所有 css 语句
2.记录@font-face语句声明的字体，并且记录使用该字体的 css 选择器
3.通过 css 选择器的规则查找当前 html 文档的节点，记录节点上的文本
4.找到字体文件并删除没被使用的字符
5.编码成跨平台使用的字体格式
地址: http://font-spider.org/

1.安装Font-Spider
npm install font-spider -g

2.转化字体, 删除不需要的字体
font-spider F:\learning\web\index.html

3.会覆盖原来字体文件, 同时生成一个.font-spider文件夹, 存放完整的字体文件

如果手机端, 关于@font-face加载特殊字体在QQ、360浏览器中显示不正常。字体抗锯齿

-webkit-text-stroke-width: 0.2px;
-webkit-font-smoothing: antialiased;

2.使用非阻塞加载CSS

<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';">

3.JavaScript 加载web字体, Web字体加载器大多数是通过JavaScript来工作，提供回调，给body设置不同的类名

var f = new FontFace("stcaiyunregular", "url(font/.font-spider/STHUPO.ttf)", {});
f.load().then(function (loadedFace) {
    console.log(loadedFace)
    document.fonts.add(loadedFace);
    localStorage.font = "stcaiyunregular";
    document.body.style.fontFamily = "stcaiyunregular";
});
document.fonts.ready.then(function() {
    // alert('There are ' + document.fonts.size + ' FontFaces loaded.\n');
});

4.webfontloader ==> 除了提供常用的第三方字体加载方式之外，最主要的功能是可以判断字体加载的各个阶段并赋予相应的 CSS 类来控制目标内容的样式。单独加载font的css文件

地址: https://github.com/typekit/webfontloader

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
    custom: {
        families: ['stcaiyunregular'],
        urls: ['style/font.css']
    },
    timeout: 2000   // 超时
});
</script>

font.css

@font-face {
    font-family: 'stcaiyunregular';
    src: url('../font/STHUPO.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap; // 后备文本立即显示直到自定义字体加载
}

　　

PS: 使用@font-face存在的问题

1.艺术字体可能有版本问题
2.web加载中文字体时太大, 大多几M以上, 不过可用Font-Spider （字蛛）==> 压缩中文字体, 删除没有用到的字体
3.字体没下载完时, 会出现空白等待期, 可以使用webfontloader插件先回退到其他字体, 然后再转化字体, 有可以会出现字体变化的过程