webfont自定义字体的实现方案
对于做Web前端的人来说,现在不知道webfont为何物似乎显得有点low了。webfont固然可爱,但似乎仍只可远观,不可亵玩。原因就在于中文字体库体积庞大,远比26个字母来的复杂。于是有同学就说了,为何不制作一个精简的字库,按需订制就可以了。正解,下面的就介绍下制作方法:
工具:提供font字体的网站(比如:http://sampler.linotype.com/sam/sam?ID=1390633&text=狠&sizex=4000&sizey=4000&fontsize=3000,ID对应字体,text对应字,其它定义字体大小),fontforge字体编辑器,wget下载工具,PHP运行环境。
1、首先确认你需要哪些字,将这些字依次填入txt文档中,并以utf8格式保存;
2、下载安装wget工具、PHP运行环境。在cmd下运行php文件,根据txt文件中的字自动下载字体图片,并以中文unicode给图片命名,保存在指定文件夹。
$file_path = "fan.txt";//txt格式默认用utf8格式,否则转换
$str=file_get_contents($file_path);
$encode= mb_detect_encoding($str, array('GB2312','GBK','UTF-8'),true);
if($encode=="GB2312")
{
$str = iconv("GB2312","UTF-8",$str);
}
else if($encode=="GBK")
{
$str = iconv("GBK","UTF-8",$str);
}
else if($encode=="EUC-CN")
{
$str = iconv("GBK","UTF-8",$str);
}
else//CP936
{
//$str = iconv("GB2312","UTF-8",$str);
$str = mb_convert_encoding($str, 'UTF-8', 'GBK');//把GBK编码转化为 UTF-8编码
}
$arr=array();
for($i=0;$i<mb_strlen($str,'utf8');$i++){
$arr[$i]=mb_substr($str,$i,1,'utf8');
}
$imgpath = './08/';//图片保存的文件夹
foreach($arr as $key=>$value){
$code=unicode_encode($value);
if(file_exists($imgpath.$code.'.png')){
echo $imgpath.$mycode.'.png is already exist';continue;
}
$value=urlencode($value);
$url="http://sampler.linotype.com/sam/sam?ID=1390633^&text=".$value."^&sizex=4000^&sizey=4000^&fontsize=3000";
$command="d:/wget/wget -T 25 -t 0 -O ".$imgpath.$code.".png ".$url;//d:/wget为wget的执行文件路径
exec($command);
}
//将内容进行UNICODE编码,编码后的内容格式:56fe
function unicode_encode($name)
{
$name = iconv('UTF-8', 'UCS-2', $name);
$len = strlen($name);
$str = '';
for ($i = 0; $i < $len - 1; $i = $i + 2)
{
$c = $name[$i];
$c2 = $name[$i + 1];
if (ord($c) > 0)
{ // 两个字节的文字
$c=base_convert(ord($c), 10, 16);
$c2=base_convert(ord($c2), 10, 16);
if(strlen($c)<2)$c="0".$c;
if(strlen($c2)<2)$c2="0".$c2;
$str .=$c.$c2;
}
else
{
$str .= $c2;
}
}
return $str;
}
3、安装fontforge,该软件支持python,运行python脚本自动导入指定目录下的字体图片(根据文件名对应汉字),然后导出生成字体文件,该文件即为简化后的字体库。此python脚本一次导入50张图,字数多的需要多次导入。
import os,fontforge;
imgsPath = "D:/phpstudy/www/img";
imgs = os.listdir(imgsPath);
font = fontforge.activeFont();
i = 0;
for index in xrange(len(imgs)):
fontforge.logWarning("index:"+str(index));imgName = imgs[index][:-4];fontforge.logWarning("imgName:"+imgName)
glyph=font.createChar(int(imgName,16),"uni"+imgName);
layer=glyph.foreground;
if layer.isEmpty():
try:
glyph.importOutlines(imgsPath+"/"+imgs[index]);
except:
fontforge.logWarning(str(index)+"/"+str(len(imgs))+":"+imgsPath+"/"+imgs[index]+"is error");
continue;
else:
glyph.autoTrace();glyph.simplify();glyph.activeLayer=0;glyph.clear();i=i+1;
fontforge.logWarning(str(index)+"/"+str(len(imgs))+":"+imgsPath+"/"+imgs[index]+"is OK"+str(i))
if i==50:
break;
else:
continue;
webfont自定义字体的实现方案的更多相关文章
- Android:更好的自定义字体方案
http://ryanhoo.github.io/blog/2014/05/05/android-better-way-to-apply-custom-font/ 情景 解决方案 1)Android默 ...
- WebFont技术使用之如何在app中使用自定义字体
参考 H5自定义字体解决方法(mark) 移动Web字体的使用 [原]移动web页面使用字体的思考 CSS @font-face规则 引用外部服务器字体
- 使用 font-spider 对 webfont 网页字体进行压缩
原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...
- 微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...
- css3 自定义字体的使用方法
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
- iOS - 使用自定义字体-苹方字体
苹方提供了六个字重,font-family 定义如下:苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;苹方-简 极细体font-family: ...
- CSS 自定义字体
移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue Android 默认中文字 ...
- 【WP 8.1开发】如何把自定义字体塞进应用里
或许,系统自带的字体不足以体现应用程序的魅力,对于表现极强的汉字来说,更是如此.这时候,我们就会想,要是能把网上下载的艺术字体塞到应用包中,那岂不美哉?那么,这可以实现吗?答案是Yes的. 接下来,阿 ...
- CSS3 使用自定义字体
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...
随机推荐
- ViewController 的loadView、viewDidLoad、viewDidUnload分别是什么时候调用的,在自定义ViewCointroller时在这几个函数中应该做什么工作?
由init.loadView.viewDidLoad.viewDidUnload.dealloc的关系说起 init方法 在init方法中实例化必要的对象(遵从LazyLoad思想) init方法中初 ...
- Alternating Current
Codeforces Round #200 (Div. 1) B:http://codeforces.com/problemset/problem/343/B 题意:这一题看懂题意是关键,题目的意思就 ...
- Qt 窗体的模态与非模态(setWindowFlags(Qt::WindowStaysOnTopHint);比较有用,还有Qt::WA_DeleteOnClose)
概念 模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等. 1. 模态窗体 ...
- (转载)MySQL BETWEEN 用法
(转载)http://www.5idev.com/p-php_mysql_between.shtml MySQL BETWEEN 语法 BETWEEN 运算符用于 WHERE 表达式中,选取介于两个值 ...
- 改进的sqlhelper学习日志
下面就是详细的sqlhelper的代码了 using System; using System.Collections.Generic; using System.Linq; using System ...
- House Robber II——Leetcode
After robbing those houses on that street, the thief has found himself a new place for his thievery ...
- 用GPUImage开启相机并且开启滤镜效果
GPUImage提供了GPUImageVideoCamera这么一个类,它的对象能够调用摄像头,并且加上滤镜的效果. //init VideoCamera //这里的两个参数可以设定拍 ...
- 2013.08.23.diary
Today, my baby called me.She said, she want to go abroad . And she wants me to go abroad too. I thin ...
- h2 database
java -cp h2-1.4.187.jar org.h2.tools.Shell -url jdbc:h2:file:~/.h2/hzhssh -user sa 如果有个数据库的文件名为:hzhs ...
- 你不一定能做对的JavaScript闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...