对于做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给图片命名,保存在指定文件夹。

  1. $file_path = "fan.txt";//txt格式默认用utf8格式,否则转换
  2. $str=file_get_contents($file_path);
  3. $encode= mb_detect_encoding($str, array('GB2312','GBK','UTF-8'),true);
  4. if($encode=="GB2312")
  5. {
  6. $str = iconv("GB2312","UTF-8",$str);
  7. }
  8. else if($encode=="GBK")
  9. {
  10. $str = iconv("GBK","UTF-8",$str);
  11. }
  12. else if($encode=="EUC-CN")
  13. {
  14. $str = iconv("GBK","UTF-8",$str);
  15. }
  16. else//CP936
  17. {
  18. //$str = iconv("GB2312","UTF-8",$str);
  19. $str = mb_convert_encoding($str, 'UTF-8', 'GBK');//把GBK编码转化为 UTF-8编码
  20. }
  21. $arr=array();
  22. for($i=0;$i<mb_strlen($str,'utf8');$i++){
  23. $arr[$i]=mb_substr($str,$i,1,'utf8');
  24. }
  25. $imgpath = './08/';//图片保存的文件夹
  26. foreach($arr as $key=>$value){
  27. $code=unicode_encode($value);
  28. if(file_exists($imgpath.$code.'.png')){
  29. echo $imgpath.$mycode.'.png is already exist';continue;
  30. }
  31. $value=urlencode($value);
  32. $url="http://sampler.linotype.com/sam/sam?ID=1390633^&text=".$value."^&sizex=4000^&sizey=4000^&fontsize=3000";
  33. $command="d:/wget/wget -T 25 -t 0 -O ".$imgpath.$code.".png ".$url;//d:/wget为wget的执行文件路径
    exec($command);
    }
  34. //将内容进行UNICODE编码,编码后的内容格式:56fe
  35. function unicode_encode($name)
  36. {
  37. $name = iconv('UTF-8', 'UCS-2', $name);
  38. $len = strlen($name);
  39. $str = '';
  40. for ($i = 0; $i < $len - 1; $i = $i + 2)
  41. {
  42. $c = $name[$i];
  43. $c2 = $name[$i + 1];
  44. if (ord($c) > 0)
  45. { // 两个字节的文字
  46. $c=base_convert(ord($c), 10, 16);
  47. $c2=base_convert(ord($c2), 10, 16);
  48. if(strlen($c)<2)$c="0".$c;
  49. if(strlen($c2)<2)$c2="0".$c2;
  50. $str .=$c.$c2;
  51. }
  52. else
  53. {
  54. $str .= $c2;
  55. }
  56. }
  57. return $str;
  58. }

3、安装fontforge,该软件支持python,运行python脚本自动导入指定目录下的字体图片(根据文件名对应汉字),然后导出生成字体文件,该文件即为简化后的字体库。此python脚本一次导入50张图,字数多的需要多次导入。

  1. import os,fontforge;
  2. imgsPath = "D:/phpstudy/www/img";
  3. imgs = os.listdir(imgsPath);
  4. font = fontforge.activeFont();
  5. i = 0;
  6. for index in xrange(len(imgs)):
  7. fontforge.logWarning("index:"+str(index));imgName = imgs[index][:-4];fontforge.logWarning("imgName:"+imgName)
  8. glyph=font.createChar(int(imgName,16),"uni"+imgName);
  9. layer=glyph.foreground;
  10. if layer.isEmpty():
  11. try:
  12. glyph.importOutlines(imgsPath+"/"+imgs[index]);
  13. except:
  14. fontforge.logWarning(str(index)+"/"+str(len(imgs))+":"+imgsPath+"/"+imgs[index]+"is error");
  15. continue;
  16. else:
  17. glyph.autoTrace();glyph.simplify();glyph.activeLayer=0;glyph.clear();i=i+1;
  18. fontforge.logWarning(str(index)+"/"+str(len(imgs))+":"+imgsPath+"/"+imgs[index]+"is OK"+str(i))
  19. if i==50:
  20. break;
  21. else:
  22. continue;

webfont自定义字体的实现方案的更多相关文章

  1. Android:更好的自定义字体方案

    http://ryanhoo.github.io/blog/2014/05/05/android-better-way-to-apply-custom-font/ 情景 解决方案 1)Android默 ...

  2. WebFont技术使用之如何在app中使用自定义字体

    参考 H5自定义字体解决方法(mark) 移动Web字体的使用 [原]移动web页面使用字体的思考 CSS @font-face规则 引用外部服务器字体

  3. 使用 font-spider 对 webfont 网页字体进行压缩

    原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...

  4. 微信小程序自定义字体及自定义图标问题说明

    自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...

  5. css3 自定义字体的使用方法

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  6. iOS - 使用自定义字体-苹方字体

    苹方提供了六个字重,font-family 定义如下:苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;苹方-简 极细体font-family: ...

  7. CSS 自定义字体

    移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue Android 默认中文字 ...

  8. 【WP 8.1开发】如何把自定义字体塞进应用里

    或许,系统自带的字体不足以体现应用程序的魅力,对于表现极强的汉字来说,更是如此.这时候,我们就会想,要是能把网上下载的艺术字体塞到应用包中,那岂不美哉?那么,这可以实现吗?答案是Yes的. 接下来,阿 ...

  9. CSS3 使用自定义字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...

随机推荐

  1. [BZOJ 1106] [POI2007] 立方体大作战tet 【树状数组】

    题目链接:BZOJ - 1106 题目分析 从1到2n枚举每一个位置. 如果枚举到某一个数,这个数已经是第二次出现,那么就看它和第一次出现的位置之间有多少数还没有被匹配,有多少没有匹配的就要进行多少次 ...

  2. nodejs广播

    http://site.douban.com/185124/widget/notes/10805558/note/240909343/ http://t42dw.iteye.com/blog/1767 ...

  3. linux里的php使用phpize拓展各种功能(curl,zip,gd等等)

    这里的实验以拓展zip功能为实例,成功使用zip功能需要如下步骤: 1.下载zip拓展包,并解压,并进入zip文件夹 tar -zxvf zip.tar.gz // 解压 cd zip //进入文件夹 ...

  4. 三大框架SSH(struts2+spring+hibernate)整合时相关配置文件的模板

    最近在学SSH三大框架的整合,在此对他们整合时相关配置文件做一简单的模板总结,方便以后复用! 首先是web.xml配置文件,这里面就配置一些简单的监听器.过滤器,包括spring核心配置文件appli ...

  5. 基于android的Socket通信

    一.Socket通信简介 Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户 ...

  6. Git标签管理

    一般我们发布一个新版本到线上服务器时都会在版本库中打一个标签,这时就确定了某个版本将发布到线上.我们可以随时可以查看这个打标签的版本,也就 是说标签其实呢,就是版本库中一个快照.简单说标签就是指向某个 ...

  7. JAVA的节点流和处理流以及流的关闭顺序

    今天在编写hadoop程序的时候,用到了流的处理.关闭流的时候出现了问题: 代码: FSDataInputStream fsin = fs.open(new Path(filein)); FSData ...

  8. Java多线程同步方法Synchronized和volatile

    11 同步方法  synchronized – 同时解决了有序性.可见性问题  volatile – 结果可见性问题 12 同步- synchronized synchronized可以在任意对象上加 ...

  9. Fzu Problem 2082 过路费 LCT,动态树

    题目:http://acm.fzu.edu.cn/problem.php?pid=2082 Problem 2082 过路费 Accept: 528    Submit: 1654Time Limit ...

  10. Index of super-prime - SGU 116(素数+背包)

    题目大意:素数表2,3,5,7,11.....如果一个素数所在的位置还是素数,那么这个素数就是超级素数,比如3在第2位置,那么3就是超级素数.....现在给你一个数,求出来这个数由最少的超级素数的和组 ...