admin管理员组文章数量:1661564
字体格式转换与压缩
参考链接:
1.http://www.360doc/content/18/0925/11/17814860_789494015.shtml
2.https://blog.csdn/jeffasd/article/details/82769689
一、工具介绍:
1.在线转换字体格式工具:Font Converter
2.压缩工具:font-spider
3.【附】特殊字体在线生成器:花藤字体在线生成器
二、字体压缩:
安装
1.前提:先要安装npm与node
2.安装font-spider(字蛛)
# npm install font-spider -g
3.安装之后输入
# font-spider
看到下面的就说明安装成功了
使用
首先要有项目中的html文件 在其外联的css样式中要规定字体文件
注意:
在css中声明webfont(字蛛似乎只支持woff ttf svg),故在使用之前可以使用格式转换器【在工具模块有提及】
目录结构
>demo --------------项目文件
index.html
>font --------------存放字体文件夹
Avenir_Next.ttf --------------文件
index.html中代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/*声明 WebFont*/
@font-face {
font-family: 'Avenir_Next';
src: url('./font/Avenir_Next.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: 'Avenir_Next';
}
</style>
<body>
<div class="home">
<h1>ashdashdASDFGHJKLLL,hajsfgasdfgjahsdgfjhdasgjhfgjashgjdhfasdgfhj.</h1>
</div>
</body>
</html>
其他两种格式格式
src: url(’./font/Avenir_Next.woff’) format(‘woff’);
src: url(’./font/Avenir_Next.svg’) format(‘svg’);
开始压缩
在使用fonts-spider之前先cd到目标文件目录 就是你需要生成的新的字体文件的html目录
或者写全目录
使用font-spider生成:
# font-spider *.html
*是通配符 代表所有的html文件
输入之后回车开始生成:
压缩文件的大小由测试的测试的html中字的多少决定,我测试的比较少,所以只有11kb左右
生成完毕的字体文件会代替原来的字体文件,而原来完整的字体文件会进入到当前目录下的一个叫.font-spider的隐藏文件中
最终目录结构
>demo --------------项目文件
index.html
>font --------------存放字体文件夹
Avenir_Next.ttf --------------压缩后的字体文件
>.font-spider
Avenir_Next.ttf --------------原来完整的字体文件
版权声明:本文标题:字体格式转换与压缩 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729928815a1216684.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论