随便一个网站下载字体:
再随便一个网站字体转换格式:
https://www.fontke.com/tool/convfont/
效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>字体引入</title>
</head>
<body>
<div class="font_box">
字体(1):
<p>点击按钮将数组中的每个元素乘以输入框指定的值,并返回新数组</p>
<p>
最小年龄:
<input type="number" id="age" value="10" />
</p>
<button id="btn">按钮</button>
<p id="data">神新数组</p>
</div>
<div class="font_eye">
字体(2):<br>
爱国【艾尔个奥恩;奥利给哦豁
</div>
</body>
@font-face {
font-family:'106font';
src: url('../font/106font.ttf');
src: url('../font/106font.ttf') format('truetype'),
url('../font/106font.woff') format('woff'),
url('../font/106font.eot?#iefix') format('embedded-opentype'),
url('../font/106font.svg#ChunkFiveRegular') format('svg');
}
@font-face {
font-family:'sureEye';
src: url('../font/sureEye.ttf');
src: url('../font/sureEye.ttf') format('truetype'),
url('../font/sureEye.woff') format('woff'),
url('../font/sureEye.eot?#iefix') format('embedded-opentype'),
url('../font/sureEye.svg#ChunkFiveRegular') format('svg');
}
.font_box{
font-family: '106font';
font-size: 16px;
text-shadow: none;
}
.font_eye{
padding-top:20px;
font-family: 'sureEye';
font-size: 16px;
}
这样字体是引入成功了,但是看下font文件夹会发现字体文件非常大,随便都是几十M
当我们开发完之后,用'字蛛'压缩,提取需要的字体,官网:
命令行全局安装:
npm install font-spider -g
再在根目录位置 命令行:
注意:执行这个命令行之前,记得备份一下你的字体包文件,因为它会直接压缩成新的字体包,只会帮你备份.ttf后缀的字体,其他后缀的不会帮你备份
(在 font-spider 后面写的是html页面在你电脑的路径,用*表示作用于这位置下全部的html页面)
font-spider D:\mySelf\project\aaa\*.html
//在根目录的话,可以直接 font-spider *.html
压缩完的font文件夹如下:
大小变成了kb,同时它会给你备份没压缩之前的.ttf后缀的字体在'.font-spider'文件夹里面
不过压缩这个步骤,最好在项目开发完,准备上线再执行,因为'字蛛'的压缩是只提取页面使用到的文字有字体效果。
压缩完再在页面添加,之前没有的文字,新增的文字是没字体效果的。
(千言万语,不知道看的人懂不懂,不理解我最后这句话的,就自己实操一下吧)