文章摘要:

   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还不支持动态的生成:

效果如下:

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

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

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

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

    在Ubuntu下使用Chrome浏览器时碰到了网页中文字体混乱的现象: 黑体和楷体混杂,看起来非常不美观. 这是由于许多网页并没有指定字体,然后浏览器将调用系统默认字体配置. 首先,安装文泉驿字体: ...

  2. mac下网页中文字体优化

    最近某人吐槽某门户网站在mac下chrome字体超丑,然后发现虽然现在mac用户越来越多,但是大家依然无视mac下的字体差异,于是研究了下mac下网页中的中文字体,和大家分享. 看了一遍国内各大门户和 ...

  3. libgdx游戏中的中文字体工具类

    // ---------全局Font------------ static FreeTypeFontGenerator Generator; static BitmapFont Font; stati ...

  4. html网页引用中文字体,解决加载缓慢办法

    [ttf 压缩]html网页引用中文字体,文件过大,加载缓慢的解决办法[字蛛][web font] [字蛛]http://font-spider.org/ 先安装好 NodeJS,然后执行: npm ...

  5. html网页什么样的字体最好看,css设置各种中文字体样式代码

    css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...

  6. 利用sfntly的sfnttool.jar提取中文字体

    雨忆博客中提到了sfntly(具体介绍可以看:https://code.google.com/p/sfntly/),利用其中sfnttool.jar就可以提取只包含指定字符的字体,如果想在页面中通过@ ...

  7. CSS 中的字体兼容写法:用CSS为英文和中文字体分别设置不同的字体

    font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...

  8. 中文字体@font-face的导入

    由于英文字母只有26个,所以生成.eot..woff..ttf..svg等文件是比较小的,也就十几KB而已.但是对于汉字来说,常用的汉字就已经2500个了,生成的文件一般要2-3MB,如此庞大的包对页 ...

  9. CentOS 7 安装字体库 & 中文字体

    前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效:  如上图可以看出,不仅没有中文字体,连字体 ...

随机推荐

  1. 2019.03.21 admin

    1.新建文件创建一个应用类 stu Python manage.py startapp stu 2,创建应用类 记得在setting中的installed_apps中添加应用 student/mode ...

  2. react 基本配置使用

    react入门的一些配置 安装和启动 npm install -g create-react-app create-react-app my-app cd my-app npm start  创建 t ...

  3. 工作流引擎--swamp

    什么是工作流引擎(Workflow Engine )   例如开发一个系统最关键的部分不是系统的界面,也不是和数据库之间的信息交换,而是如何根据业务逻辑开发出符合实际需要的程序逻辑并确保其稳定性.易维 ...

  4. mysql----------阿里云RDS导入导出

    1.这是阿里云rds如何将导出的物理备份文件,导入到自建库里面: https://help.aliyun.com/knowledge_detail/5973700.html?spm=5176.7766 ...

  5. docker中crontab无法执行

    1.下载的镜像是ubuntu最简版,默认没有安装crontab 2.业务需求需要crontab 最早解决方案 1.在宿主机里面 1 3  * * * root  cd /data/wwwroot/xx ...

  6. C# 5.0五大新特性

    第一:绑定运算符,:=: 这个只是简化了数据绑定,跟ASP.NET MVC3不断改进一样,其实不是什么亮点改进. comboBox1.Text :=: textBox1.Text; //将文本框的内容 ...

  7. db2字符串相关函数的使用

    db2字符串相关函数的使用 from :internet    一.字符转换函数 1.ASCII() 返回字符表达式最左端字符的ASCII 码值.在ASCII()函数中,纯数字的字符串可不用‘’括起来 ...

  8. sitecore系统教程之限制对客户端的访问

    如果您为不同目的配置服务器,根据角色,您可能需要禁用Sitecore客户端.例如,如果配置内容交付服务器或处理服务器,则无需访问客户端应用程序,因此在这种情况下,建议禁用客户端. 为防止未经授权访问S ...

  9. Keep On Movin (贪心)

    #include<bits/stdc++.h> using namespace std; int main(){ int T, n, a;scanf("%d",& ...

  10. Linux服务器下jdk 安装与环境变量的配置

    1,Oracle 官网下载jdk Linux版本 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...