Font-Spider 一个神奇的网页中文字体工具,就是这么任性
2015-04-20 17:59
429 查看
文章摘要:
1>> font-spider 字体神奇
由于活动项目推广的需要,页面需要用到一些漂亮好看的字体,example : 邯郸-韩鹏毛遂体.ttf、 方正喵呜.ttf
我看了一些好看的测试活动页面的demo,页面的(问题和答案)都是直接切成的小图片,我看了也是楞了,难怪这么好看。于是本想着也这么做,结果发现了一个很严重的问题。
我计算了一下,我们的问题大概有60道,而每道题的答案有3、4、5个,算了一个下,如果是切成小图片来维护的话,至少也得有: 60*4=240 张图片吧。于是设计和后端开发都不干了,这是一个噩梦啊。
此处省略千言万语................,等等。问题还是得解决的,于是经过协商还是准备采用字体库来做,于是走上了高大上的道路
对于第一次接触我来说,发现了很多英文的字体倒是挺多,中文的字体很少,到网上找了大半天,都没有找到一个好的字库。无意中找到了一个叫做Font-Spider的中文蜘蛛,于是好奇的用了下,发现了它真是神奇。
font-spirder 官网:http://font-spider.org/
font-spirder:让网页自由引入中文字体成为可能
步骤分为3步,超级简单:
步骤一: npm 安装 font spider
步骤二: 在 CSS 中使用 WebFont
注意:
1>>. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
2>>. 开发阶段请使用相对路径的 CSS 与 WebFont
步骤三: 运行 font-spider 命令
【提醒】:我的思路就是先统计项目中总共用到了那些字,归类的生成的不同的字库,目前font-spider还不支持动态的生成:
效果如下:
[b][b] font-spider 生成的:方正喵呜.ttf[/b][/b]
font-spider 生成的:邯郸-韩鹏毛遂体.ttf
1>> font-spider 字体神奇
由于活动项目推广的需要,页面需要用到一些漂亮好看的字体,example : 邯郸-韩鹏毛遂体.ttf、 方正喵呜.ttf
我看了一些好看的测试活动页面的demo,页面的(问题和答案)都是直接切成的小图片,我看了也是楞了,难怪这么好看。于是本想着也这么做,结果发现了一个很严重的问题。
我计算了一下,我们的问题大概有60道,而每道题的答案有3、4、5个,算了一个下,如果是切成小图片来维护的话,至少也得有: 60*4=240 张图片吧。于是设计和后端开发都不干了,这是一个噩梦啊。
此处省略千言万语................,等等。问题还是得解决的,于是经过协商还是准备采用字体库来做,于是走上了高大上的道路
对于第一次接触我来说,发现了很多英文的字体倒是挺多,中文的字体很少,到网上找了大半天,都没有找到一个好的字库。无意中找到了一个叫做Font-Spider的中文蜘蛛,于是好奇的用了下,发现了它真是神奇。
font-spirder 官网:http://font-spider.org/
font-spirder:让网页自由引入中文字体成为可能
步骤分为3步,超级简单:
步骤一: npm 安装 font spider
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'; }
注意:
1>>. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
2>>. 开发阶段请使用相对路径的 CSS 与 WebFont
步骤三: 运行 font-spider 命令
font-spider ./*.html
【提醒】:我的思路就是先统计项目中总共用到了那些字,归类的生成的不同的字库,目前font-spider还不支持动态的生成:
效果如下:
[b][b] font-spider 生成的:方正喵呜.ttf[/b][/b]
font-spider 生成的:邯郸-韩鹏毛遂体.ttf
相关文章推荐
- 字蛛(FontSpider)-中文WebFont自动化压缩工具,让网页自由引入中文字体成为可能!
- 字蛛(FontSpider,中文字体压缩器)网页自由引入中文字体
- fontSpider字蛛字体压缩工具使用方法
- 字蛛(font-spider)让你爱上 @font-face 网页自定义字体
- div+css - 工具 - Microsoft Typography微软印刷技术 - WEFT 3网页嵌入字体3 - Wizard向导 - Create font objects创建字体对象
- font-spider利器对webfont网页字体压缩使用
- 前端开发必备工具:WhatFont Bookmarklet-方便的查询网页上的字体
- 【ttf 压缩】html网页引用中文字体,文件过大,加载缓慢的解决办法【字蛛】【web font】
- 前端开发必备工具:WhatFont Bookmarklet-方便的查询网页上的字体
- 前端开发必备工具:WhatFont Bookmarklet-方便的查询网页上的字体
- 前端开发必备工具:WhatFont Bookmarklet-方便的查询网页上的字体
- Font Combiner – 自定义网页字体和图标生成工具
- 发布一个网页监控小工具
- asp.net(c#)做一个网页数据采集工具
- word中字体大小(pt)和网页中css设置font-size时用的px大小对应关系
- 网页使用Google Font API(字体)的方法
- 用font-spider释放字体文件大小,只取所需!
- HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)
- 在窗体上放置一个标签、一个按钮、一个fontDialog控件。标签内容改为“烟台大学”。实现功能:1)程序运行时,单击打开字体对话框按钮,可选择字体,并以所选字体作为标签字体。
- 一个神奇高效的工具-正则表达式(五)