js+php+java动态中文web字体生成压缩解决方案
网站观察
中文字库非常庞大，webfont技术的使用对于中文来说很吃力，下载个字体都需要好长时间，不过5g可能会好些，但是流量也是钱啊，有没有办法解决中文web字体大小的问题呢
有，首先我们来看看iconfont的实现方式
http://iconfont.cn/webfont#!/webfont/index
通过抓包我们发现在输入了文字后，点击生成，后端程序根据我们的文字首先检测这个字体对应的文字有没有本地缓存，如果有的话直接返回缓存的字体url，如果没有的话就根据源字体和客户端传过来的文字抽取字体生成一个压缩版的新字体存放在服务器的缓存目录中，然后返回url
ok，原理说完了
现在说说怎么实现吧
一、首先js端很好实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
$('#genfontbtn').click(function() {
$.get("genfont.php", {
fontid: $("#fontid").val(), word: $("#word").val()
},
function(res) {
if (res.err) {
alert(res.data);
} else {
$("#font-style").html("<style>@font-face {font-family: 'bfwfont';src: url('"+res.data+"');font-weight: normal;font-style: normal;}#preview {font-family: 'bfwfont';}</style>");
$("#preview").html($("#word").val());
}
});
});
});
</script>
</head>
<body>
<textarea id="word" placeholder="请输入文字"></textarea>
<select id="fontid"><option value="华文行楷">华文行楷</option><option value="微软雅黑">微软雅黑</option></select>
<input type="button" id="genfontbtn" value="生成字体" />
<div id="preview"></div>
<div id="font-style"></div>
</body>
</html>二、然后是压缩字体
我们采用的是sfnttool，点击下载sfnttool.zip
确保你的电脑已经安装了Java环境（能运行Java命令），这是必须的。
命令行进入到sfnttool所在目录下。（一个小技巧，在当前文件夹里按住Shift再右键，里面有个“在此处打开命令行”。）
输入下面的命令即可：
java -jar sfnttool.jar -s '这是一段测试文字' 源字体.ttf 压缩后的字体.ttf
java -jar sfnttool.jar -h
subset [-?|-h|-help] [-b] [-s string] fontfile outfile
prototype font subsetter
-?,-help print this help information
-s,-string string to subset
-b,-bench benchmark (run 10000 iterations)
-h,-hints strip hints
-w,-woff output woff format
-e,-eot output eot format
-x,-mtx enable microtype express compression for eot format
还有一种办法可以采用font-spider，官网地址https://github.com/aui/font-spider
三、php请求处理
php端主要接受客户端传来的字体id及文字然后查找本地缓存，如果没有就调用命令生成字体，返回字体路径给前端
<?php
$_fontid = $_GET['fontid'];
$_word = $_GET['word'];
$_fontwordfilename = "font/".md5($_word.$_fontid).".ttf";
if (file_exists($_fontwordfilename)) {
echo json_encode(['err' => false, "data" => $_fontwordfilename]);
return;
}
exec("java -jar sfnttool.jar -s '".$_word."' ".$_fontid.".ttf ".$_fontwordfilename, $output); //执行字体抽取压缩
if (file_exists($_fontwordfilename)) {
echo json_encode(['err' => false, "data" => $_fontwordfilename]);
return;
}
?>最后补充一下计算机中常见的字体格式
一、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
{{collectdata}}
网友评论0