字蛛didnot find

使用字蛛教程以及遇到的bug

前言: 前段时间刚完成一个外项目,歇了几天,老大让我看看公司的官网,优化一下,发现移动端的字体下载特别慢,才发现引用了字体包,一个字体包就达到了11M,想着既然有了图片压缩,那么应该有字体压缩,所以百度,弄了起来,废了不少劲,遇到不少坑,记录下来. WebFont可以让网页使用特殊字体,就不用针对特殊字体用图片来代替了,通过 CSS3的新属性@font-face 语句引入字体资源,然后使用 CSS 选择器指定 font-family运用字体的文本. 一了解字蛛字蛛正如官网所说:是一个中文字

中文WebFont解决方案Font-Spider(字蛛)

我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: 使用图片背景还原设计,即使用 photoshop 将文本图层单独导出成网页背景图片. 产生的问题 1. 制作与维护成本很高.切图繁琐.高清屏适配繁琐.合并雪碧图更繁琐,后期修改更加繁琐. 2. 用户体验差.导致网页不支持选中.复制.搜索.翻译.矢量缩放,也会影响视障用户使用读屏器操作网页

字蛛fontSpider的使用

字蛛官方文档 http://font-spider.org/index.html 首先安装全局包 npm install font-spider -g 然后下载字体 ,本次需要的是 "造字工房力黑(非商用)常规体.ttf" ,放到指定的文件夹里,然后在下面调用 /*声明 WebFont*/ @font-face { font-family: 'zzgflh'; src: url('../font/zzgflh.eot'); src: url('../font/zzgflh.eot?

字蛛（font-spider）-单独压缩字体（解决页面少有的特殊字体的字体包引用）

特别想独立的把这个问题写成一篇内容,分享给大家. 反正我是这个字体压缩使用的受益者,不是打广告. 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字体包,但是,字体包一般都好几兆,特别占内存,特别拉慢页面的加载速度.久而久之我就不爱设计师设计的字体了.就用电脑,手机默认的字体: 问题是,这样的话总是有点差距的.所以这时我们的解决方案就是:特定的文字压缩,这时文字包就只有kb了.所以知道了这个-字蛛要使用字蛛步骤: 1.首先是要在电脑上先安装N

fontSpider字蛛，好用的字体压缩工具教程

一直觉得很多字体特别好看,但是那些好看的字体只能做在图片上不能用CSS样式去实现,作为一个会设计的前端,真心觉得很烦恼,有时候那些文字需要更换,修改起来非常麻烦,要到处去找源文件,找不到源文件还要尽力去P出来. 于是在空闲时间,进入搜索状态,全网搜索能将字体引入,并压缩的软件,不管国内国外都看了,最后发现了fontSpider,中文名:字蛛. 打开字蛛的官网:http://font-spider.org/他上面也是有教程的,但是我表示,我真的是一个很小白很小白的人,我看不懂啊...(和我一样

精简TTF字体、FontPruner、汉字字体瘦身（非字蛛）

20190726更新标黄部分网上比应用比较多的字蛛 http://font-spider.org/ 本文使用了本机安装软件,得到瘦身后的 TTF 字体文件准备工具: python : 我使用是 python-3.7.2.exe jre: 我是用的是 jre-8u191-windows-x64.exe FontPruner: https://gulu-dev.com/post/2017/2017-09-15-font-pruner-intro/content 我的使用环境:win 7 64

用字蛛取出需要的字符应用字体 @font-face

一.安装font-spider npm install font-spider -g 二.目录结构 font-spider font FZZZHONGHJW.ttf font.html 三.font.html内容 <!DOCTYPE html><html><head> <title>方正正中黑简体</title> <meta charset="utf-8"> <style type="text/cs

字蛛webfont 安装及使用方法

先安装nodejs和git,比如放在D:/nodejs/ 文件夹 cmd 进入该文件夹,安装npm install express 安装 npm install font-spider -g 安装 npm install grunt-font-spider --save-dev 安装 npm install gulp-font-spider --save-dev 至此,安装完成.比如我们要压缩 F:/test/www/ 目录下的字体,先把ttf字体放在 www/font/ 文件夹里, 然后用

网站中使用中文个性字库字体--@font-face解决方案探索 l（转）

最近的项目有用到特别中文字体,最终效果如下图: 红线标记处均为字体,可选中,交互起来,比图片方便太多了. 解决思路就是将体积巨大的中文字库,取子集,只包涵要使用的那部分文字,因此体积就很小了(包含100字左右的中文字,也只有50K左右,如下图:).英文字库因为本身就小,就没必要再这么做了. 为了实现以上“取子集”的目标,实际要解决的问题: 1.把字库由TTF格式自动转化为woff.eot.svg等兼容格式,并放到相应路径下. 2.自动分析并提取网站中用到特殊字体的文字-----这一点很重要,

优秀网站看前端 —— 小米Note介绍页面

刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的坑,不过咱挂个优雅点的名字——“优秀网站看前端”,顾名思义的,也是寻觅一些值得玩味的趣味网站,来学习它们的前端技术和交互理念. 作为本系列的开篇,我们拿“买手机送国土”的小米来打头阵,缘由是鄙人有着更换手机的打算又刚好看上小米note高配版,于是逛了下小米note的介绍页面,感觉交互做的挺不错,特别

CSS Font知识整理总结

1.什么是字体字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是计算机上存储的一套文字显示方式.通过对文字进行一些特殊处理(比如末端加强)来提高不同环境中文字的可读性. 比如同样大小的文字,在不同字体下的可读性是不同的. 一般来讲,一款字库的诞生,要经过字体设计师的创意设计.字体制作人员一笔一划的制作.修改,技术开发人员对字符进行编码.添加程序指令.装库.开发安

玩转HTML5移动页面

(1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件.特别地,如果单张雪碧图面积实在太大,可以拆分雪碧图,例如拆分成2-4张,因为现代浏览器都支持4-6个同源请求下载,若资源实在太多,也可以考虑把静态资源放在不同源域名下去请求,这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好,当然,这需要具体情况去衡量.顺便提一下,我写动画

中文web font技术及方案

我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: 使用图片背景还原设计,即使用 photoshop 将文本图层单独导出成网页背景图片. 产生的问题 1. 制作与维护成本很高.切图繁琐.高清屏适配繁琐.合并雪碧图更繁琐,后期修改更加繁琐. 2. 用户体验差.导致网页不支持选中.复制.搜索.翻译.矢量缩放,也会影响视障用户使用读屏器操作网页

CSS3 基本知识

1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的布局.字体.颜色.背景和其他效果实现更加精确的控制,只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分.通过仅仅编辑一个简单的 CSS 文件,外部样式表有能力同时改变站点中所有页面的布局和外观. CSS3 语言开发是朝着模块化发展的.之前的规范作为一个模块很庞大而且比较复杂,所以 CSS

玩转HTML5移动页面(优化篇)

原文:http://www.grycheng.com/?p=472 承接上文<玩转HTML5移动页面(动效篇)>,上次说的是让页面动起来的一些小技巧.而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏. ====前方高能==== (1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动

开源字体包缩减font-spider

最近公司产品用微软雅黑,被告~ 领导要求产品后台系统必须更换字体,美工给了个宋体,个人觉得太丑,就网上搜了些处理方法使用 CSS属性 @font-face 自定义字体, 最后决定用思源黑体 (思源黑体是Adobe与Google宣布推出的一款开源字体,详细内容自行百度,.ttf文件font-spider 的github上有提供下载地址). 思源黑体中文字体包竟然有10几M 页面加载速度太慢,所以就百度解决方案,搜到了字蛛 font-spider ,很好用的一款开源工具. 给个友情链接: htt

grunt插件[font-spider] : 转码,压缩字体 @font-face

字蛛插件:压缩与转码静态页面中的 WebFont 需要注意的是,目前只支持 grunt@0.4.1 package.json { "name": "fontS", "version": "1.0.0", "devDependencies": { "grunt": "^0.4.1", "grunt-contrib-copy": "^1.0.

体验 WebFont，网页上的艺术字

在最新项目中,由于要频繁使用艺术字, 而用户设备没有此字体,因此以往的经验都是使用图片... 所以在同事的瞩目期许之下,我开始实验研究这个问题的解决方案1. 直接使用字体文件 @font-face { font-family: 'xxxx'; src: url('../img/汉仪秀英体简.TTF'); } .font { font-family: 'xxxx', Arial, sans-serif; } 该方案是能用的,因为使用的是微信不用考虑兼容性,但是随着项目发布,还是出现了问题,由于字体

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

[ttf 压缩]html网页引用中文字体,文件过大,加载缓慢的解决办法[字蛛][web font] [字蛛]http://font-spider.org/ 先安装好 NodeJS,然后执行: npm install font-spider -g 安装后,会看到一堆报错.警告,不必理会在 CSS 中使用 WebFont: /*声明 WebFont*/ @font-face { font-family: '方正兰亭刊黑_GBK'; src: url('../fonts/方正兰亭刊黑_GBK.ttf

29.html5 移动端开发总结

手机与浏览器浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏自动的各种内核的浏览器,想想头都大了. 先说下浏览器.在中国有多少种浏览器? ie.百度.360.搜狗.火狐.欧朋.Chrome.谷歌.行者无疆.财猫省钱.遨游.Wise光速.UC.智慧.QQ.海豚...(大概有70-80多种) 五花八门,还好不用担心这都是表象.虽然浏览器各不相同但从浏览器

字蛛didnot find

热门专题