Font-Spider 一个神奇的网页中文字体工具,就是这么任性

文章摘要:

   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

1 npm install font-spider -g

步骤二:  在 CSS 中使用 WebFont

 1 /*声明 WebFont*/
 2 @font-face {
 3   font-family: ‘pinghei‘;
 4   src: url(‘../font/pinghei.eot‘);
 5   src:
 6     url(‘../font/pinghei.eot?#font-spider‘) format(‘embedded-opentype‘),
 7     url(‘../font/pinghei.woff‘) format(‘woff‘),
 8     url(‘../font/pinghei.ttf‘) format(‘truetype‘),
 9     url(‘../font/pinghei.svg‘) format(‘svg‘);
10   font-weight: normal;
11   font-style: normal;
12 }
13
14 /*使用选择器指定字体*/
15 .home h1, .demo > .test {
16     font-family: ‘pinghei‘;
17 }

 注意:

1>>. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成

2>>. 开发阶段请使用相对路径的 CSS 与 WebFont

步骤三: 运行 font-spider 命令

1 font-spider ./*.html

提醒】:我的思路就是先统计项目中总共用到了那些字,归类的生成的不同的字库,目前font-spider还不支持动态的生成:

效果如下:

 font-spider 生成的:方正喵呜.ttf

 font-spider 生成的:邯郸-韩鹏毛遂体.ttf

时间: 2024-08-08 17:25:38

Font-Spider 一个神奇的网页中文字体工具,就是这么任性的相关文章

解决Ubuntu下Chrome浏览器网页中文字体混乱

在Ubuntu下使用Chrome浏览器时碰到了网页中文字体混乱的现象: 黑体和楷体混杂,看起来非常不美观. 这是由于许多网页并没有指定字体,然后浏览器将调用系统默认字体配置. 首先,安装文泉驿字体: sudo apt-get install ttf-wqy* 编辑字体设置 sudo gedit /etc/fonts/conf.avail/69-language-selector-zh-cn.conf 可以设置字体的优先级,个人比较喜欢文泉驿正黑(WenQuanYi Zen Hei) 最后,重启电

iText生成pdf中文字体解决方案

相信用过itext的朋友都知道,中文显示一直都是个问题(最新版5.5.7官方也没直接集成中文字体). 当然这样的问题,早就有高手解决了,那就是使用iTextAsian.jar. 但是本文介绍的,不是使用iTextAsian.jar,而是另一种解决方法. 在此之前,需要准备的仅仅为itextpdf-5.x.jar 和一个 ttf格式的中文字体.比如我们常用的宋体simsun.ttf. 我们首先要做的,就是将simsun.ttf集成到我们的项目中: 测试例子: package com.example

中文网页的字体

本站字体按照如下设置,正文字体大小采用18px,文档采用MARKDOWN编辑. 在 Web 上应用字体是一项基本技术,同时也是一门艺术.对于英文字体来说可选择的范围实在是太广泛了,合理的使用它们将会为你的网站增色不少.关于英文字体的使用和搭配技巧,在这里不做赘述,只推荐一套非常好的视频:Fundamentals of Design by CodeSchool {{more}} 而真正的挑战在于中文字体,由于中文字体组成的特殊性导致其体积过于庞大,除了操作系统内置的字体之外,我们很难在网站上应用其

网站开发进阶(四十一)中文字体网页开发指南

网站开发进阶(四十一)中文字体网页开发指南 前言 字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响.   但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积为几个MB:单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体.(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做.) 不同的操作系统.不同的版本预装不同的字体(因为版权),几乎没有交集.因此,大多数开

中文字体网页开发指南

字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积为几个MB:单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体.(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做.) 不同的操作系统.不同的版本预装不同的字体(因为版权),几乎没有交集.因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈

[转] 中文字体网页开发指南

字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积为几个MB:单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体.(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做.) 不同的操作系统.不同的版本预装不同的字体(因为版权),几乎没有交集.因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈

在网页中使用特殊中文字体成为可能

转载 http://www.cnblogs.com/Kummy/p/4442142.html ??以前还不知道这种办法的时候,如果要在网页中显示特殊中文字体的话,需要导入整个全部的.ttf字体文件,而文件高达好几兆,根本是不可取的,偶然间看到以上链接的文章,新的思路新的方法,将网页中需要用特殊字体的中文文字,进行打包压缩. 1.安装font-spider npm install font-spider -g 2.在css中使用webfont @font-face{ font-family: 'p

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数

CSS,font-family,好看常用的中文字体(转载若侵可删)

例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; 例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 例3(加网 ):font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;