一.@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:learningwebindex.html 3.会覆盖原来字体文件, 同时生成一个.font-spider文件夹, 存放完整的字体文件
如果手机端, 关于@font-face加载特殊字体在QQ、360浏览器中显示不正常。字体抗锯齿
-webkit-text-stroke- 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.
');
});
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插件先回退到其他字体, 然后再转化字体, 有可以会出现字体变化的过程