npm速度优化
玩hexo的,肯定经常和npm打交道,但是npm的下载速度着实是有点慢。
由于下面内容会安装较多的插件,建议先更改npm仓库地址,以便能更快的安装插件
- 阿里的淘宝团队在国内做了个跟npm仓库一样的镜像叫
cnpm
。 - 淘宝镜像与npm官方包的同步频率目前为10分钟一次,来保证尽量与官方服务同步。
- 所以二者可以说是一样,不用担心有什么差别。
通过改变地址来使用淘宝镜像(推介)
npm的默认仓库地址是
https://registry.npmjs.org/
可以使用以下命令查看当前npm的仓库地址
npm config get registry
可以使用以下命令来改变默认下载地址,从而达到不安装
cnpm
就能采用淘宝镜像的目的,然后使用上面的get命令查看是否设置成功。npm config set registry https://registry.npm.taobao.org
安装CNPM
安装cnpm,命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后,使用以下命令测试是否安装成功:
cnpm -v
成功后,以后都使用
cnpm
代替以前npm
来执行命令!
访问速度优化
图片加载优化
在做优化之前,让我们先了解什么是预加载
和 懒加载
(废话时间)。
什么是预加载
预加载
就是进入项目前提前加载资源,避免在项目中加载缓慢,影响用户体验
- 缺点:会增加服务器压力
什么是懒加载
懒加载
一般是当图片滚动进可视窗口内才加载图片,可视窗口之外的图片则不加载
- 优点:对服务器有一定的缓解压力作用
我用的 matery主题 整体采用预加载模式,这样可以在我们访问其他页面的时候会稍微快点。我们可以在这个基础上对图片进行懒加载,这样做效果就是html、css、js加载之后,图片再加载。既保证了网页的打开速度,也不会因图片的庞大体积而拖累了整个页面的加载。
开始操作
首先安装图片懒加载插件: hexo-lazyload-image
在Hexo根目录执行
npm install hexo-lazyload-image --save
然后在Hexo配置文件末尾加入以下代码
lazyload:
enable: true
onlypost: false # 是否只对文章的图片做懒加载
loadingImg: # eg ./images/loading.gif
到这里就配置完了,执行hexo cl&&hexo g&&hexo s
就有效果了,以后博客上的图片就都是懒加载了,以上步骤理论上任何主题都可以用
一般情况下懒加载会和gallery插件会发生冲突,结果可能就是点开图片,左翻右翻都是loading image。matery主题的解决方案是:
修改 /themes/matery/source/js
中的 matery.js
文件
在第108行加上:
$(document).find('img[data-original]').each(function(){
$(this).parent().attr("href", $(this).attr("data-original"));
});
做完这步之后,还有点小Bug,首页的logo点击会直接打开logo图,而不是跳到首页。
伪解决方案:打开 /themes/matery/layout/_partial/header.ejs
文件,
在img
和span
的两个头加个div
:
<div class="brand-logo">
<a href="<%- url_for() %>" class="waves-effect waves-light">
<div>
<% if (theme.logo !== undefined && theme.logo.length > 0) { %>
<img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
<% } %>
<span class="logo-span"><%- config.title %></span>
</div>
</a>
</div>
自定义loading图片
hexo-lazyload-image
插件提供了自定义loading图片的选项
方法就是在 loadingImg
后配置图片的路径就好了
Like this:
lazyload:
enable: true
onlypost: false # 是否只对文章的图片做懒加载
loadingImg: /medias/loading.gif # eg ./images/loading.gif
懒加载优化
经过以上操作就已经很完美了,以下内容可做可不做
其实第一次加载后本地都是有缓存的,如果每次都把loading显示出来就不那么好看
所以我们需要对插件进行魔改,让图片稍微提前加载,避开加载动画
打开
Hexo根目录
>node_modules
>hexo-lazyload-image
>lib
>simple-lazyload.js
文件第9行修改为:
&& rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)
作用:提前240个像素加载图片;当然这个值也可以根据自己情况修改
代码压缩优化
为什么要把代码压缩?
因为hexo生成的html、css、js等都有很多的空格或者换行,而空格和换行也是占用字节的,所以需要将空格换行去掉也就是我要进行的“压缩”。
有人说空格换行能占多少字节?确实占不了多少,但是一个人访问是这么多字节,那么一百人,一万人呢?加起来这量就不少了吧,这都是流量啊!这也是很多css/js文件的后缀为*.min.js或*.min.css的原因。虽然我们可能没那么多访问量,但是能减小一点资源文件的大小也是对访问速度有那么一点提升的。
gulp实现代码压缩
cd到Hexo根目录依次执行以下命令:
# 全局安装gulp模块 npm install gulp -g # 安装各种小功能模块 执行这步的时候,可能会提示权限的问题,最好以管理员模式执行 npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save # 额外的功能模块 npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save
在Hexo根目录新建文件
gulpfile.js
,并复制以下内容到文件中,有中文注释,可以根据自己需求修改。var gulp = require("gulp"); var debug = require("gulp-debug"); var cleancss = require("gulp-clean-css"); //css压缩组件 var uglify = require("gulp-uglify"); //js压缩组件 var htmlmin = require("gulp-htmlmin"); //html压缩组件 var htmlclean = require("gulp-htmlclean"); //html清理组件 var imagemin = require("gulp-imagemin"); //图片压缩组件 var changed = require("gulp-changed"); //文件更改校验组件 var gulpif = require("gulp-if"); //任务 帮助调用组件 var plumber = require("gulp-plumber"); //容错组件(发生错误不跳出任务,并报出错误内容) var isScriptAll = true; //是否处理所有文件,(true|处理所有文件)(false|只处理有更改的文件) var isDebug = true; //是否调试显示 编译通过的文件 var gulpBabel = require("gulp-babel"); var es2015Preset = require("babel-preset-es2015"); var del = require("del"); var Hexo = require("hexo"); var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象 // 清除public文件夹 gulp.task("clean", function () { return del(["public/**/*"]); }); // 下面几个跟hexo有关的操作,主要通过hexo.call()去执行,注意return // 创建静态页面 (等同 hexo generate) gulp.task("generate", function () { return hexo.init().then(function () { return hexo .call("generate", { watch: false }) .then(function () { return hexo.exit(); }) .catch(function (err) { return hexo.exit(err); }); }); }); // 启动Hexo服务器 gulp.task("server", function () { return hexo .init() .then(function () { return hexo.call("server", {}); }) .catch(function (err) { console.log(err); }); }); // 部署到服务器 gulp.task("deploy", function () { return hexo.init().then(function () { return hexo .call("deploy", { watch: false }) .then(function () { return hexo.exit(); }) .catch(function (err) { return hexo.exit(err); }); }); }); // 压缩public目录下的js文件 gulp.task("compressJs", function () { return gulp .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js .pipe(gulpif(!isScriptAll, changed("./public"))) .pipe(gulpif(isDebug, debug({ title: "Compress JS:" }))) .pipe(plumber()) .pipe( gulpBabel({ presets: [es2015Preset] // es5检查机制 }) ) .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩 .pipe(gulp.dest("./public")); //输出到目标目录 }); // 压缩public目录下的css文件 gulp.task("compressCss", function () { var option = { rebase: false, //advanced: true, //类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: "ie7" //保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式] //keepBreaks: true, //类型:Boolean 默认:false [是否保留换行] //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀 }; return gulp .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css .pipe(gulpif(!isScriptAll, changed("./public"))) .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" }))) .pipe(plumber()) .pipe(cleancss(option)) .pipe(gulp.dest("./public")); }); // 压缩public目录下的html文件 gulp.task("compressHtml", function () { var cleanOptions = { protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理 unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理 }; var minOption = { collapseWhitespace: true, //压缩HTML collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css" removeComments: true, //清除HTML注释 minifyJS: true, //压缩页面JS minifyCSS: true, //压缩页面CSS minifyURLs: true //替换页面URL }; return gulp .src("./public/**/*.html") .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" }))) .pipe(plumber()) .pipe(htmlclean(cleanOptions)) .pipe(htmlmin(minOption)) .pipe(gulp.dest("./public")); }); // 压缩 public/medias 目录内图片 gulp.task("compressImage", function () { var option = { optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级) progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片 interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染 multipass: false //类型:Boolean 默认:false 多次优化svg直到完全优化 }; return gulp .src("./public/medias/**/*.*") .pipe(gulpif(!isScriptAll, changed("./public/medias"))) .pipe(gulpif(isDebug, debug({ title: "Compress Images:" }))) .pipe(plumber()) .pipe(imagemin(option)) .pipe(gulp.dest("./public")); }); // 执行顺序: 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器 gulp.task( "build", gulp.series( "clean", "generate", "compressHtml", "compressCss", "compressJs", "compressImage", gulp.parallel("deploy") ) ); // 默认任务 gulp.task( "default", gulp.series( "clean", "generate", gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage") ) ); //Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数,分别是任务名和运行任务的函数
以后的执行方式有两种:
- 直接在Hexo根目录执行
gulp
或者gulp default
,这个命令相当于hexo cl&&hexo g
并且再把代码和图片压缩。 - 在Hexo根目录执行
gulp build
,这个命令与第1种相比是:在最后又加了个hexo d
,等于说生成、压缩文件后又帮你自动部署了。
- 直接在Hexo根目录执行
值得注意的是:这个加入了图片压缩,如果不想用图片压缩可以把第154行的
"compressImage",
和第165行的,"compressImage"
去掉即可
hexo-neat插件实现代码压缩
可能以上方法比较复杂,来介绍个简单的,hexo-neat插件也是用来压缩代码的,底层也是通过gulp来实现的。
但是这个插件是有Bug的:
- 压缩 md 文件会使 markdown 语法的代码块消失
- 会删除全角空格
Hexo根目录执行安装代码:
npm install hexo-neat --save
在Hexo配置文件
_config.yml
末尾加入以下配置:neat_enable: true neat_html: enable: true exclude: neat_css: enable: true exclude: - '*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '*.min.js'
然后直接
hexo cl&&hexo g
就可以了,会自动压缩文件 。补充:为了解决以上Bug,对于matery主题(其他主题自行解决)需要将以上默认配置修改为:
#hexo-neat 优化提速插件(去掉HTML、css、js的blank字符) neat_enable: true neat_html: enable: true exclude: - '**/*.md' neat_css: enable: true exclude: - '**/*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/**/instantpage.js' - '**/matery.js'
全站CDN加速
本节参考:github page网站cdn优化加速 - 辣椒の酱
CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。——百度百科
放在Github的资源在国内加载速度比较慢,因此需要使用CDN加速来优化网站打开速度,jsDelivr + Github便是免费且好用的CDN,非常适合博客网站使用。
用法:
https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
例如:
https://cdn.jsdelivr.net/gh/skyls03/skyls03.github.io/medias/loading.gif
注意:版本号不是必需的,是为了区分新旧资源,如果不使用版本号,将会直接引用最新资源
还可以配合PicGo
图床上传工具的自定义域名前缀来上传图片,使用极其方便。更多详细信息可参考我另一篇文章:超好用的软件插件网站集合
重点(敲黑板!)
这个不止可以作用于图片,可以像这样把所有的css、js等文件的加载路径都修改下,从而让全站使用CDN加速!具体怎么修改要根据主题的情况而定,比较麻烦,不过原理都是一样的,有能力的可以改改。
这里我提供一个4.15M的图片文件,供大家测试:
腾讯
:COS + CDN
GitHub
:GitHub + jsDelivr
阿里
:OSS
浏览器打开
->F12
->Network
->Ctrl + F5(强制刷新,即不使用缓存刷新)
,然后看加载时间多少。
我的测试结果:
每个人的网络情况不一样,测试数据仅供参考
阿里云的
OSS
:2.60s加载完成jsDelivr + Github
:1.68s加载完成
SEO优化
SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 ——百度百科
百度收录
在这之前,有个事情需要注意:
GitHub
是不允许百度的Spider
(蜘蛛)爬取GitHub
上的内容的,所以任何部署在GitHub上的静态博客都是不能百度爬取到的!解决方案:可以参考我另一篇文章 关于百度无法爬取GitHub内容解决方案
让百度收录你的站点
首先来搞百度的,刚建完站在百度上是不可能搜索到我们的网站的,可以先在百度上搜索site:<你的域名>
,一般是搜不到的,然后点击 提交网址
将自己的网站提交给百度。
添加自己的站点到百度
登录百度搜索资源平台, 只要是百度旗下的账号就可以, 登录成功之后在站点管理中点击添加网站,输入域名,三步走。
第三步验证网站的时候, 验证网站所有权的方式有三种:
- 文件验证
HTML
标签验证CNAME
解析验证(推荐使用)
同理,百度的spider是爬取不到GitHub的内容的,所以HTML标签验证
方式也是不太可取的。
向百度推送自己的资源
经过以上步骤,百度已经知道有我们网站的存在了,但是百度还不知道我们的网站上有什么内容,所以要向百度推送我们的内容。
还是在百度资源搜索平台,找到数据引入->链接提交,可以看到向百度推送自己的内容有两个方式:
自动提交
(分三种)- 主动推送
- 自动推送
- sitemap(站点地图)
手动提交
- 即手动地将链接一次性提交给百度
一般自动提交比手动提交效果好一点,自动提交又从效率上来说:
主动推送>自动推送>sitemap
自动提交的三种方式:
主动推送
:最为快速的提交方式。将站点当天新产出链接通过此方式推送给百度,以保证新链接可以及时被百度收录。自动推送
:最为便捷的提交方式。将自动推送的JS代码部署在站点的每一个页面源代码中,当部署代码的页面在每次被浏览时,链接就会被自动推送给百度。可以与主动推送配合使用。sitemap
:您可以定期将网站链接放到sitemap文件
中,然后将sitemap文件
提交给百度。百度会周期性的抓取检查您提交的sitemap
,对其中的链接进行处理,但收录速度慢于主动推送。
使用sitemap方式推送
安装sitemap插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
这两个插件是用来生成 Sitemap文件
的插件,而 Sitemap
是用来告知搜索引擎我们的网站上有哪些可供抓取的网页的。
注意一点:
hexo配置文件中的url一定要改成你的域名,这两个插件是根据你的url生成站点地图的。
安装后直接执行hexo cl&&hexo g
命令,然后就会在网站根目录生成sitemap.xml
文件和baidusitemap.xml文件
,其中sitemap.xml
文件是搜索引擎通用的文件,baidusitemap.xml
是百度专用的sitemap
文件。
有sitemap文件
之后,再将生成的sitemap文件
提交给百度或者其他搜索引擎
百度方式:在自动提交的sitemap那里填写自己sitemap文件
的URL地址即可
https://你的域名/baidusitemap.xml
提交后会有状态提示:
这里需要注意严格区分http和https
http和https是不一样的,刚添加的站点是HTTP协议的,如果你网站开启了
强制https
,是会报301重定向错误的,也就是百度不能抓取到你的sitemap如果想用https,可以在
数据监控
->HTTPS认证
进行认证这个认证有时会很慢,可以在你的站点只留一个首页的
简单HTML
,然后再去百度认证,这样应该会快一点。
如果是其他的搜索引擎,一般是在填写sitemap的地方,填写以下内容即可
https://你的域名/sitemap.xml
自动推送方式
只要每个需要被百度爬取的HTML页面中加入一段JS代码即可:
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
我所使用的matery主题可以自动给每个页面加上这段代码,只需在主题配置文件中配置:
# 百度搜索资源平台提交链接
baiduPush: true
即可!
其他主题一般都有这个功能的实现,如果没有的话,想办法在每个页面加入以上JS代码即可,原理是一样。
主动推送方式
安装主动推送插件:hexo-baidu-url-submit
npm install hexo-baidu-url-submit --save
然后打开hexo配置文件
,在末尾加入以下配置:
# hexo-baidu-url-submit 百度主动推送
baidu_url_submit:
count: 80 # 提交最新的一个链接
host: blog.sky03.cn # 在百度站长平台中注册的域名
token: xxxxxxx # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里
密匙的获取是在百度的自动提交的主动推送那里。
再加入新的deploy
:
deploy:
- type: baidu_url_submitter
如图:
这样每次执行 hexo d
的时候,新的链接就会被推送了。
推送成功时,会有如下终端提示!
各种不同的推送反馈字段说明点我查看,一般来说,推送失败基本都是地址不相符造成的,我们只需对比baidu_url_submit
在public
中生成的baidu_urls.txt
的地址,与自己填写在host
字段中的地址对比看是否一样即可。
谷歌收录
相比于百度,google的效率实在不能更快,貌似一天左右站点就被收录了,其实方法是和百度是一样的。
登录谷歌站长平台,添加自己的域名
DNS验证
(就是验证下网站是不是你的)就是域名解析那里添加一条TXT解析记录然后点击验证即可
再到谷歌的Search Console,添加自己的
sitemap
地址接下来,等就是了
提交 robots.txt
robots.txt是干嘛的?
robots.txt
是一种存放于网站根目录下的 ASCII
编码的文本文件,它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的,哪些是禁止爬取的。robots.txt
要放在 Hexo根目录
下的 source
文件夹中。
每个人站点目录可能不太一样,可以参考下我的 robots.txt
文件,内容如下:
User-agent: *
Allow: /
Allow: /posts/
Disallow: /about/
Disallow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /contact/
Disallow: /fonts/
Disallow: /friends/
Disallow: /libs/
Disallow: /medias/
Disallow: /page/
Disallow: /tags/
Disallow: /categories/
更多关于 robots.txt
的写法参见 https://blog.csdn.net/fanghua_vip/article/details/79535639
编写完以上内容再重新部署一下,然后到百度资源平台的数据监控
->Robots
点击检测并更新
看能不能检测到。
同样注意:刚添加的站点没有进行 HTTPS认证
,直接检测有可能会报301错误。
配置 Nofollow
nofollow 是HTML页面中
a标签
的 属性值。这个属性的作用是:告诉搜索引擎的爬虫不要追踪该链接,为了对抗博客垃圾留言信息
URL优化
一般来说,SEO搜索引擎优化认为,网站的最佳结构是 用户从首页点击三次就可以到达任何一个页面,但是我们使用Hexo
编译的站点结构的URL
是:域名/年/月/日/文章标题
四层的结构,这样的URL
结构很不利于SEO
,爬虫就会经常爬不到我们的文章,于是,我们需要优化一下网站文章的URL
方案一:
直接改成域名/文章标题
的形式,在Hexo配置文件
中修改permalink
如下:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.sky03.cn
root: /
permalink: :title.html
permalink_defaults:
这个方式有个不好的地方:
直接以文章的标题
作为URL,而我们所写的文章的标题一般都是中文,但是URL只能用字母数字和标点符号表示,所以中文的URL只能被转义成一堆符号,而且还特别长。
方案二:
安装固定链接插件:hexo-abbrlink
插件作用:自动为每篇文章生成一串数字作每篇文章的URI地址。每篇文章的Front-matter
中会自动增加一个配置项:abbrlink: xxxxx
,该项的值就是当前文章的URI地址。
Hexo根目录执行:
npm install hexo-abbrlink --save
Hexo配置文件
末尾加入以下配置:# hexo-abbrlink config 、固定文章地址插件 abbrlink: alg: crc16 #算法选项:crc16、crc32,区别见之前的文章,这里默认为crc16丨crc32比crc16复杂一点,长一点 rep: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制
Hexo配置文件
中修改permalink
如下:# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: https://blog.sky03.cn root: / permalink: posts/:abbrlink.html permalink_defaults:
这样站点结构就变成了:域名/posts/xxx.html
优化小技巧
异步加载JS
方法:将JS文件的引入,放到HTML的body结束标签的上方
例:
<html>
<head>
<title>Hello World!</title>
</head>
<body>
xxxxx....
<script src="xx/xx.js"></script>
</body>
</html>
原理:首先要明白,HTML的加载是从上往下一行一行解释执行的,把js文件的引入放到下面,这样就会先把HTML页面展示出来,然后再加载js。这样看起来的效果就是,大体的页面先出来,而js让它慢慢加载执行,如果你把js放到网页的上方,效果就是必须要加载完js才能继续展示网页,体验极差。
注意:原主题的js文件尽量不要动,我们只需将自己增加的一些js按照异步加载的方式做即可,比如一些音乐js插件、实时在线聊天js插件等放到最后即可!因为这些文件要加载的东西很多。
字蛛
使用场景
你的网站中需要自定义字体(额外添加一些普通电脑中没有的字体),但是一般字体是包含很多字符的,这就导致字体文件的体积很大
字蛛作用
字蛛就是自动检测网站的 CSS 与 HTML 文件中的自定义字体(额外加的字体),并将网站中用到的文字重新打包成一个新的字体文件,并自动引入;
而没用到的文字就会删除,从而达到压缩字体文件体积的作用。
安装
npm install font-spider -g
在 CSS 中使用 WebFont:
/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: 'pinghei';
}
- @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
- 开发阶段请使用相对路径的 CSS 与 WebFont
运行 font-spider 命令:
font-spider ./demo/*.html
页面依赖的字体将会自动压缩好,原 .ttf 字体会备份