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
转载于:https://www.cnblogs.com/Kummy/p/4442142.html
Font-Spider 一个神奇的网页中文字体工具,就是这么任性相关推荐
- 一个简单的网页抓取工具
前两天遇到一个妹子,她说不会从拉网页,我想用node做个网页抓取工具是何尝的简单,于是装x之路开始了. 其实想法很简单,由网址得到html,由html解析css,js,image等,分别下载就行了, ...
- python常用字体显示方框_seaborn模块中,图表中文字体变成方块的问题如何解决?...
有两种方法,一个是seaborn设置中文字体绝对路径,另一个是修改matplotlib的中文字体配置文件.本人使用的是Mac,下面以Mac系统添加思源黑体为例,Windows下设置方法大同小异. 1. ...
- python中文字体下载_Python在Matplotlib图中显示中文字体的操作方法
1. 说明 本篇主要针对在Ubuntu系统中,matplotlib显示不了中文的问题,尤其是在无法安装系统字体的情况下,解决Python绘图时中文显示的问题. 2. 在系统中安装字体 $ fc-lis ...
- STM32使用EMWin实现中文字体显示
博主在使用正点原子的STM32F4驱动液晶屏的时候,一直使用的是英文字体,也就是我们常用的ASCII码,这种是可以直接显示的.但是最近的一个需求是显示中文字体,这就需要我们嵌入中文,但是看正点原子的例 ...
- jieba库 python2.7 安装_Python中文分词工具大合集:安装、使用和测试
这篇文章事实上整合了前面两篇文章的相关介绍,同时添加一些其他的Python中文分词相关资源,甚至非Python的中文分词工具,仅供参考. 首先介绍之前测试过的8款中文分词工具,这几款工具可以直接在AI ...
- Python中文分词工具大合集:安装、使用和测试
转自:AINLP 这篇文章事实上整合了之前文章的相关介绍,同时添加一些其他的Python中文分词相关资源,甚至非Python的中文分词工具,仅供参考. 首先介绍之前测试过的8款中文分词工具,这几款工具 ...
- python 分词工具训练_Python中文分词工具大合集:安装、使用和测试
这篇文章事实上整合了前面两篇文章的相关介绍,同时添加一些其他的Python中文分词相关资源,甚至非Python的中文分词工具,仅供参考. 首先介绍之前测试过的8款中文分词工具,这几款工具可以直接在AI ...
- 【ttf 压缩】html网页引用中文字体,文件过大,加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...
- 给网页图标字体 Font Awesome 添加动画效果
在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看<30个免费网页图标字体以及使用方法>一文,其中Font Awes ...
最新文章
- 常量 - PHP手册笔记
- [Bjoi2014]大融合
- ABP官方文档翻译 0.0 ABP官方文档翻译目录
- 一套代码小程序WebNative运行的探索02
- 粤港澳大湾区菜篮子-农业大健康·林裕豪:从玉谋定功能产业
- 【转】Unity C# 调用C++ dll 问题集锦
- 合作模式歌利亚机器人_智能时代挑战下的机器人教育新方向!
- mysql b 树 b树_MySQL B树和B+树的区别
- 可信计算3.0工程初步pdf_查校 | 英国大学工业工程与运筹学专业40个授课硕士+研究Mphil/Phd 项目汇总...
- 四六级成绩查询,你的『验证码』刷出来了吗?
- Spring Boot学习——统一异常处理
- mysql导入报错1071_导入sql文件报错:1071 Specified key was too long; max key length is 767 bytes...
- vue安装axios以及如何使用axios
- 小米游戏本bios_年轻人的第一台游戏本?——小米游戏本2019评测
- 常见坐标系经纬度转换
- win10家庭版如何修改用户名对应的文件夹的名字(中文该成英文字符)
- c语言程序设计在哪讲,《C语言程序设计》讲.doc
- 数列的操作 div2
- iOS视图控制器编程指南—— 支持无障碍
- 马走日,象走田;车走直路炮翻山