有朋自远方来,不亦乐乎。
使用字体子集化DIY个性化站点
发布于 4个月前 ( 02-26 ) 阅读: 446 次 评论: 2 条 A+

图标库在网页上的应用很广泛,甚至随便进入任何一个网站,都能看到“Font Awesome,,草莓图标……”的身影。

这些图标在一定程度上,让我们的网站变得非常好看跟有特色,但不知道喜欢折腾网站主题的你是否知道‘’这个词?

众所周知,中文字体的fonts文件一般都很大,有时我们想要使用所喜爱的中文字体,到最后却偏偏只能忍痛割爱,就因为本地加载它们可能会拖垮网站的响应速度……

可实在忍不住想用,又该怎么办呢?

没关系,虽然我们无法所有的中文字体都使用特定的字体,但我们可以给自己站点名称、logo(文字logo)、博主昵称等文字,来一份个性化的DIY。而这个时候就需要用到字体子集化了。

那么什么是字体子集化呢?

这里以INLOJV博主的付费主题YUAO为例,他主题首页头像旁边的博客名称跟副标题就是采用了字体子集化,只需事先将‘INLOJV,善败者不乱’这几个字做成单独的类似.eot文件,便可与众不同!

具体DEMO效果,请直接进入INLOJV的博客:

 

接下来是教程,方法其实很简单。

一、字体准备

从求字体或找字体这类的网站,给自己使用的电脑安装喜爱的字体;

二、Fontmin

下载Fontmin软件(当然不想下载客户端,也可以查看‘使用教程’,敲代码手工写)。

Fontmin是第一个纯 JavaScript 字体子集化方案,可以生成WEB字体,自定义选择部分的文字,从而最小化打包。

个人建议直接用客户端来得简单省事:操作很傻瓜直白,只需要花费打字跟选择字体的一两分钟,就能轻轻松松自动生成web字体

三、将以下CSS样式写进style.css文件:

生成所需的web字体文件包以后,马上扔进主题根目录,然后顺手给字体写个样式,便于前端引用。

@font-face {
	font-family:"lyt_logo";//lyt_logo指的是字体名称,请随意名称,但要跟引用时一致
	src:url("images/lyt_logo.eot");//字体子集化文件路径,请自行书写正确的路径
	src:url("images/lyt_logo.eot?#iefix") format("embedded-opentype"),url("images/lyt_logo.woff") format("woff"),url("images/lyt_logo.ttf") format("truetype"),url("images/lyt_logo.svg#des") format("svg");//字体子集化文件路径,请自行书写正确的路径
	font-style:normal;
	font-weight:700
}

四、前端引用

在需要使用Web字体的地方,引用该字体样式,如:

.web-logo {font-family: lyt_logo,Microsoft Yahei,Arial;}

请将.web-logo改为自己所需的。

END.

Principle Team
龙砚庭官方QQ群,做真正意义上的社群!
7人已关注

目前评论:2   其中:访客  1   博主  1

发表评论

请稍候,正在加载新评论...
  1. 明月登楼
    明月登楼3 ( 2018.02.28 11:35:07 )  沙发

    羡慕你们会玩CSS的!