@font-face
@font-face是css3中允许使用自定义字体的模块,他主要是吧自己定义的web字体嵌入到网页中。
基本用法
@font-face {
font-family: <YourDefineFontName>;
src: <url> [<format>],[<source> [<format>]], *;
[font-weight: <weight>];
[font-style: <style>];
}
font-family: 为载入的字体取名字。
src: [url]加载字体,可以是相对路径,可以是绝对路径,也可以是网络地址。[format]定义的字体的格式,用来帮助浏览器识别。主要取值为:【truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
- WOFF
WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上,由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些,因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势,因为所有的现代浏览器都开始支持这种字体格式。 - SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式,体积上比矢量图更小,适合在手机设备上使用。 - EOT
Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。 - OTF / TTF OpenType Font 和 TrueType
Font。部分的因为这种格式容易被复制(非法的),这才催生了WOFF字体格式。然而,OpenType有很多独特的地方,受到很多设计者的喜爱。
font-weight: 定义加粗样式。
font-style: 定义字体样式。
应用示例
t-face的常见写法
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot?qja5i2');
src: url('iconfont.eot?qja5i2#iefix') format('embedded-opentype'),
url('iconfont.ttf?qja5i2') format('truetype'),
url('iconfont.woff?qja5i2') format('woff'),
url('iconfont.svg?qja5i2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
- 为何有两个src?
绝大多数情况下,第一个 src 是可以去掉的,除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面,微软修改了在兼容模式下的 CSS 解析器,导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的,所以在上面添加一个不带问号的 src 属性便可以解决此问题。
font-face的用法
把字体加载进来以后就可以使用了,font-family引入即可生效。
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
由于中文字符太多导致引入的字体文件会很大通常能到达几十兆,在页面加载过程中字体文件的下载会十分耗时,导致前端性能变差。因此需要对字体文件进行优化。
font-spider-plus
这个插件可以压缩字体文件,只打包项目中用到的字体,而那些大部分没用到的会被抛弃,从而达到优化文件体积的目的。
下载安装
npm i font-spider-plus -g
1. 压缩本地WebFont
fsp local [options] <htmlFile1 htmlFile2 ...>
特别说明:htmlFile支持通配符,例如*.htm,*.shtml
2.压缩URL中的WebFont
- 初始化fspconfig文件
fsp init
在根目录生成fspconfig.js文件
2. 完善fspconfig.js文件
{
/**
* 本地font存放路径
* @type {String}
*/
"localPath" : "../font/",
/**
* 线上字体文件路径 (网址中样式文件内font-family的src路径)
* @type {String}
*/
"onlinePath" : "../font/",
/**
* URL
* @type {Array<String>}
*/
"url" : [
"http://ieg.tencent.com/",
"http://game.qq.com/"
]
}
执行
fps run