精华内容
下载资源
问答
  • 网页开发过程中,需要用到个性化的字体,此时...安装成功后就可以进行字体压缩了,为了方便,可以新建一个index.html,引入对应的css文件,css中引入字体文件,确保ttf文件被引用 然后使用命令 font-spider E:\folde

    网页开发过程中,需要用到个性化的字体,此时需要引入字体文件

    由于字体文件本身很大, 会导致页面加载速度受到很大影响;因此可以将字体进行压缩处理,再引入页面

    首先配置node环境,这里就不多介绍了

    准备好node环境之后,安装font-spider,输入npm install font-spider -g

    安装成功后就可以进行字体压缩了,为了方便,可以新建一个index.html,引入对应的css文件,css中引入字体文件,确保ttf文件被引用

    然后使用命令 font-spider E:\folder\index*.html 对字体压缩

    在folder下会重新生成压缩后的ttf文件

    注:这种方式适用于静态页面,因为字蛛是爬到页面需要的文字,将这些文字保留,删除没有用到的文字,从而压缩

    附:web 中文字体演示与工具  http://font-spider.org/

     

    展开全文
  • 压缩TTF文件

    2019-04-03 16:22:43
    有时项目中的字体文件太大消耗资源,项目中只用到有限的几个字,本文件可通过输入要保留的字来进行文件缩减。
  • 只要1.6m大小,移动开发,web开发必备字体!有效减少安装包的大小和网络资源!
  • 大小为9M,若太大,请参照该博客自行提取相应汉字 https://editor.csdn.net/md?not_checkout=1&articleId=109098317。
  • 这里要确保ttf文件一定要有,其他的不管 在你的html中也引用了相应的css文件 接下来就是最后一步了 生成新的字体库 nodejs 命令行输入 font-spider C:\Users\wangchao\Desktop\index*.html 也就是你的...

    【以下有部分内容引用的网络文章】
    我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅。面对这种问题,我们通常以下方式来进行设计还原:

    使用图片背景还原设计,即使用 photoshop 将文本图层单独导出成网页背景图片。

    产生的问题

    1. 制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐,后期修改更加繁琐。

    2. 用户体验差。导致网页不支持选中、复制、搜索、翻译、矢量缩放,也会影响视障用户使用读屏器操作网页。

    3. 带来更多带宽消耗。导出的图片体积随着文本面积增加,且字形无法重复利用,这消耗着大量的服务器资源

    WebFont技术提供了在网页使用特殊字体的可能,从而避免用图片的方法。它的实现方法是通过CSS的@font-face引入字体。很多互联网公司已经率先采用了这种方法,比如Apple官网就是采用了自己的字体。Google也推出了免费的WebFont云托管服务,在国外网站自定义字体得到很好的应用。

    在中文方面自定义字体却迟迟没有广泛应用,这是有什么原因呢?

    中文WebFont的困境

    中文字体体积大

    英文字体文字部分由26个字母组成,所以字体文件通常不会太大;而中文汉字数量总共约有九万左右, 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据,常用汉字也要有3500个左右。 中文字体文件通常都会几M的大小,参照现在中国的网络环境,显然不适合在项目中使用。

    浏览器支持

    不同浏览器对字体的支持也是不同的,没有一种可以支持所有浏览器的字体,这就要求我们针对不同的浏览器制作不同的字体。(N=Not supported, P=Partial support, Y=Supported)

    table

    针对以上的问题,我们可以得出中文WebFont要解决的问题是:压缩和转码。

    Font-Spider中文WebFont解决方案的诞生:

    为了不让工程与体验制约着设计师对字体选择以及创意的实现,我们利用业余时间解决了中文WebFont的两大问题即压缩和转码,于是便有了 Font-Spider (字蛛)的诞生。作为业界首款中文 WebFont 本地自动化压缩与转码工具,中文字体 web 化问题迎刃而解。它是一个 web 字体工具,通过自动化技术来压缩、转码跨平台的中文字体,让网页自由嵌入中文字体成为可能。

    原理

    1. 爬行本地 html 文档,分析所有 css 语句

    2. 记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器

    3. 通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本

    4. 找到字体文件并删除没被使用的字符

    5. 编码成跨平台使用的字体格式

    编码零干预

    不需要改变 web 工程师现有的编码习惯、工程师可直接通过 css @font-face与选择器定义并应用字体。

    压缩与转码

    剔除没有使用的字符,通常可将数 MB 的字体压缩成数十 KB 大小,解决中文字体过大的问题,并编码成跨平台兼容的格式。

    web 中文字体演示与工具使用请前往主页:http://font-spider.org/

    【以上有部分内容引用的网络文章】


    接下来说重点,其实上面的可以不看,哈哈。。。
    最近在给公司的网站做改版,放到服务器上之后发现加载特别慢,查找原因,是ttf字体库导致的,一看10M,太大了,页面加载半天才能出来,于是在晚上需求解决方案,终于发现了一好办法【字蛛】,感觉不错,文件可以瞬间小很多,其实原理我觉得很简单,英文就26个字母,中国汉字那么多,字体文件肯定会很大,【字蛛】只不过是把你页面上要用的汉字都给提取出来重新生成一个新的字体文件,显然会很小,废话不多说,接下来上步骤:
    1、【安装nodeJs】
    这步我就不多说了,不是本文的重点,大家可以找度娘,一堆
    这里要注意的事需要用到npm安装, 尼玛中国的网络你懂的,墙很高,怎么办,有办法
    用淘宝镜像,命令如下:

    首先打开nodejs客户端
    输入一下命令:
    npm config set registry http://registry.npm.taobao.org 
    npm info underscore (如果上面配置正确这个命令会有字符串response)
    

    命令行指定
    npm –registry http://registry.cnpmjs.org info underscore

    这样一来速度会快很多了

    2、【安装字蛛】
    输入命令
    npm install font-spider -g
    会看到一堆警告,没关系,到最后会出现如下显示
    这里写图片描述

    说明成功了

    3、【运行】
    安装成功之后就开始压缩了

    我的目录是这样的
    这里写图片描述

    我的css文件是开头是这样的

    这里写图片描述

    这里要确保ttf文件一定要有,其他的不管

    在你的html中也引用了相应的css文件

    接下来就是最后一步了 生成新的字体库

    nodejs 命令行输入
    font-spider C:\Users\wangchao\Desktop\index*.html
    也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件
    然后回车
    这里写图片描述

    这样就成功了,在你原来的字体文件目录下会多出相应的压缩之后的字体文件,发现小了很多吧
    然后你再引用相关的新的字体文件就行了
    到这里就O了,很简单。

    展开全文
  • yueyemoyan ...运行安装成功之后就开始压缩了我的目录是这样的我的css文件开头是这样的这里要确保ttf文件一定要有,其他的不管在你的html中也引用了相应的css文件接下来就是最后一步了 生成新的字体库node

    yueyemoyan

    web 中文字体演示与工具使用请前往主页:http://font-spider.org/

    1. 需要安装 node.js

    2. 输入以下命令: npm install font-spider -g

    3. 运行

      • 安装成功之后就开始压缩了

        我的目录是这样的

        这里写图片描述

        我的css文件开头是这样的

        这里写图片描述

        这里要确保ttf文件一定要有,其他的不管

        在你的html中也引用了相应的css文件

        接下来就是最后一步了 生成新的字体库

        nodejs 命令行输入

        font-spider C:\Users\wangchao\Desktop\index*.html

        也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件

        然后回车

        这里写图片描述

        这样就成功了,在你原来的字体文件目录下会多出相应的压缩之后的字体文件,发现小了很多吧

        然后你再引用相关的新的字体文件就行了

        到这里就O了,很简单。

    展开全文
  • 二来是因为中文字库太大,影响 UE。 TTFRender 就是为了解决这一问题而出现的。我们只需要提供特定字体和需要支持的字列表,然后便可以生成符合应用的字符,有效的节省了带宽与时间,并提升了 UE。 Need To Know 年...
  • 今天小编就为大家分享一篇vue项目引入字体.ttf的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 有时候项目中的字体文件太大,很多字用不到,会造成存储空间的浪费。 本工具可以通过筛选文本条件,缩减ttf文件大小。 步骤: 1.根据项目需求,筛选出所有的中文字 2.精简ttf文件大小
  • 字体文件太大,对各种开发都很不友好,然而每种格式的字体文件都是几M到十几M 如何从字体文件中提取自己想要的个别字,或筛选掉不常用的字体? 线上裁剪ttf文件 线上裁剪字体文件 常用2500字 > 一乙二十丁...
    • 字体文件太大,对各种开发都很不友好,然而每种格式的字体文件都是几M到十几M
    • 如何从字体文件中提取自己想要的个别字,或筛选掉不常用的字体?

    • 线上裁剪ttf文件 线上裁剪字体文件

    • 常用2500字

        > 一乙二十丁厂七卜人入八九几儿了力乃刀又三于干亏士工土才寸下大丈与万上小口巾山千乞川亿个勺久凡及夕丸么广亡门义之尸弓己已子卫也女飞刃习叉马乡丰王井开夫天无元专云扎艺木五支厅不太犬区历尤友匹车巨牙屯比互切瓦止少日中冈贝内水见午牛手毛气升长仁什片仆化仇币仍仅斤爪反介父从今凶分乏公仓月氏勿欠风丹匀乌凤勾文六方火为斗忆订计户认心尺引丑巴孔队办以允予劝双书幻玉刊示末未击打巧正扑扒功扔去甘世古节本术可丙左厉右石布龙平灭轧东卡北占业旧帅归且旦目叶甲申叮电号田由史只央兄叼叫另叨叹四生失禾丘付仗代仙们仪白仔他斥瓜乎丛令用甩印乐句匆册犯外处冬鸟务包饥主市立闪兰半汁汇头汉宁穴它讨写让礼训必议讯记永司尼民出辽奶奴加召皮边发孕圣对台矛纠母幼丝式刑动扛寺吉扣考托老执巩圾扩扫地扬场耳共芒亚芝朽朴机权过臣再协西压厌在有百存而页匠夸夺灰达列死成夹轨邪划迈毕至此贞师尘尖劣光当早吐吓虫曲团同吊吃因吸吗屿帆岁回岂刚则肉网年朱先丢舌竹迁乔伟传乒乓休伍伏优伐延件任伤价份华仰仿伙伪自血向似后行舟全会杀合兆企众爷伞创肌朵杂危旬旨负各名多争色壮冲冰庄庆亦刘齐交次衣产决充妄闭问闯羊并关米灯州汗污江池汤忙兴宇守宅字安讲军许论农讽设访寻那迅尽导异孙阵阳收阶阴防奸如妇好她妈戏羽观欢买红纤级约纪驰巡寿弄麦形进戒吞远违运扶抚坛技坏扰拒找批扯址走抄坝贡攻赤折抓扮抢孝均抛投坟抗坑坊抖护壳志扭块声把报却劫芽花芹芬苍芳严芦劳克苏杆杠杜材村杏极李杨求更束豆两丽医辰励否还歼来连步坚旱盯呈时吴助县里呆园旷围呀吨足邮男困吵串员听吩吹呜吧吼别岗帐财针钉告我乱利秃秀私每兵估体何但伸作伯伶佣低你住位伴身皂佛近彻役返余希坐谷妥含邻岔肝肚肠龟免狂犹角删条卵岛迎饭饮系言冻状亩况床库疗应冷这序辛弃冶忘闲间闷判灶灿弟汪沙汽沃泛沟没沈沉怀忧快完宋宏牢究穷灾良证启评补初社识诉诊词译君灵即层尿尾迟局改张忌际陆阿陈阻附妙妖妨努忍劲鸡驱纯纱纳纲驳纵纷纸纹纺驴纽奉玩环武青责现表规抹拢拔拣担坦押抽拐拖拍者顶拆拥抵拘势抱垃拉拦拌幸招坡披拨择抬其取苦若茂苹苗英范直茄茎茅林枝杯柜析板松枪构杰述枕丧或画卧事刺枣雨卖矿码厕奔奇奋态欧垄妻轰顷转斩轮软到非叔肯齿些虎虏肾贤尚旺具果味昆国昌畅明易昂典固忠咐呼鸣咏呢岸岩帖罗帜岭凯败贩购图钓制知垂牧物乖刮秆和季委佳侍供使例版侄侦侧凭侨佩货依的迫质欣征往爬彼径所舍金命斧爸采受乳贪念贫肤肺肢肿胀朋股肥服胁周昏鱼兔狐忽狗备饰饱饲变京享店夜庙府底剂郊废净盲放刻育闸闹郑券卷单炒炊炕炎炉沫浅法泄河沾泪油泊沿泡注泻泳泥沸波泼泽治怖性怕怜怪学宝宗定宜审宙官空帘实试郎诗肩房诚衬衫视话诞询该详建肃录隶居届刷屈弦承孟孤陕降限妹姑姐姓始驾参艰线练组细驶织终驻驼绍经贯奏春帮珍玻毒型挂封持项垮挎城挠政赴赵挡挺括拴拾挑指垫挣挤拼挖按挥挪某甚革荐巷带草茧茶荒茫荡荣故胡南药标枯柄栋相查柏柳柱柿栏树要咸威歪研砖厘厚砌砍面耐耍牵残殃轻鸦皆背战点临览竖省削尝是盼眨哄显哑冒映星昨畏趴胃贵界虹虾蚁思蚂虽品咽骂哗咱响哈咬咳哪炭峡罚贱贴骨钞钟钢钥钩卸缸拜看矩怎牲选适秒香种秋科重复竿段便俩贷顺修保促侮俭俗俘信皇泉鬼侵追俊盾待律很须叙剑逃食盆胆胜胞胖脉勉狭狮独狡狱狠贸怨急饶蚀饺饼弯将奖哀亭亮度迹庭疮疯疫疤姿亲音帝施闻阀阁差养美姜叛送类迷前首逆总炼炸炮烂剃洁洪洒浇浊洞测洗活派洽染济洋洲浑浓津恒恢恰恼恨举觉宣室宫宪突穿窃客冠语扁袄祖神祝误诱说诵垦退既屋昼费陡眉孩除险院娃姥姨姻娇怒架贺盈勇怠柔垒绑绒结绕骄绘给络骆绝绞统耕耗艳泰珠班素蚕顽盏匪捞栽捕振载赶起盐捎捏埋捉捆捐损都哲逝捡换挽热恐壶挨耻耽恭莲莫荷获晋恶真框桂档桐株桥桃格校核样根索哥速逗栗配翅辱唇夏础破原套逐烈殊顾轿较顿毙致柴桌虑监紧党晒眠晓鸭晃晌晕蚊哨哭恩唤啊唉罢峰圆贼贿钱钳钻铁铃铅缺氧特牺造乘敌秤租积秧秩称秘透笔笑笋债借值倚倾倒倘俱倡候俯倍倦健臭射躬息徒徐舰舱般航途拿爹爱颂翁脆脂胸胳脏胶脑狸狼逢留皱饿恋桨浆衰高席准座脊症病疾疼疲效离唐资凉站剖竞部旁旅畜阅羞瓶拳粉料益兼烤烘烦烧烛烟递涛浙涝酒涉消浩海涂浴浮流润浪浸涨烫涌悟悄悔悦害宽家宵宴宾窄容宰案请朗诸读扇袜袖袍被祥课谁调冤谅谈谊剥恳展剧屑弱陵陶陷陪娱娘通能难预桑绢绣验继球理捧堵描域掩捷排掉堆推掀授教掏掠培接控探据掘职基著勒黄萌萝菌菜萄菊萍菠营械梦梢梅检梳梯桶救副票戚爽聋袭盛雪辅辆虚雀堂常匙晨睁眯眼悬野啦晚啄距跃略蛇累唱患唯崖崭崇圈铜铲银甜梨犁移笨笼笛符第敏做袋悠偿偶偷您售停偏假得衔盘船斜盒鸽悉欲彩领脚脖脸脱象够猜猪猎猫猛馅馆凑减毫麻痒痕廊康庸鹿盗章竟商族旋望率着盖粘粗粒断剪兽清添淋淹渠渐混渔淘液淡深婆梁渗情惜惭悼惧惕惊惨惯寇寄宿窑密谋谎祸谜逮敢屠弹随蛋隆隐婚婶颈绩绪续骑绳维绵绸绿琴斑替款堪搭塔越趁趋超提堤博揭喜插揪搜煮援裁搁搂搅握揉斯期欺联散惹葬葛董葡敬葱落朝辜葵棒棋植森椅椒棵棍棉棚棕惠惑逼厨厦硬确雁殖裂雄暂雅辈悲紫辉敞赏掌晴暑最量喷晶喇遇喊景践跌跑遗蛙蛛蜓喝喂喘喉幅帽赌赔黑铸铺链销锁锄锅锈锋锐短智毯鹅剩稍程稀税筐等筑策筛筒答筋筝傲傅牌堡集焦傍储奥街惩御循艇舒番释禽腊脾腔鲁猾猴然馋装蛮就痛童阔善羡普粪尊道曾焰港湖渣湿温渴滑湾渡游滋溉愤慌惰愧愉慨割寒富窜窝窗遍裕裤裙谢谣谦属屡强粥疏隔隙絮嫂登缎缓编骗缘瑞魂肆摄摸填搏塌鼓摆携搬摇搞塘摊蒜勤鹊蓝墓幕蓬蓄蒙蒸献禁楚想槐榆楼概赖酬感碍碑碎碰碗碌雷零雾雹输督龄鉴睛睡睬鄙愚暖盟歇暗照跨跳跪路跟遣蛾蜂嗓置罪罩错锡锣锤锦键锯矮辞稠愁筹签简毁舅鼠催傻像躲微愈遥腰腥腹腾腿触解酱痰廉新韵意粮数煎塑慈煤煌满漠源滤滥滔溪溜滚滨粱滩慎誉塞谨福群殿辟障嫌嫁叠缝缠静碧璃墙撇嘉摧截誓境摘摔聚蔽慕暮蔑模榴榜榨歌遭酷酿酸磁愿需弊裳颗嗽蜻蜡蝇蜘赚锹锻舞稳算箩管僚鼻魄貌膜膊膀鲜疑馒裹敲豪膏遮腐瘦辣竭端旗精歉熄熔漆漂漫滴演漏慢寨赛察蜜谱嫩翠熊凳骡缩慧撕撒趣趟撑播撞撤增聪鞋蕉蔬横槽樱橡飘醋醉震霉瞒题暴瞎影踢踏踩踪蝶蝴嘱墨镇靠稻黎稿稼箱箭篇僵躺僻德艘膝膛熟摩颜毅糊遵潜潮懂额慰劈操燕薯薪薄颠橘整融醒餐嘴蹄器赠默镜赞篮邀衡膨雕磨凝辨辩糖糕燃澡激懒壁避缴戴擦鞠藏霜霞瞧蹈螺穗繁辫赢糟糠燥臂翼骤鞭覆蹦镰翻鹰警攀蹲颤瓣爆疆壤耀躁嚼嚷籍魔灌蠢霸露囊罐翎qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890《》?!,。妩媚曳鎏怡廓沧
      

    附:一些字体文件


    后期接触其他字体,会再次补充

    展开全文
  • 一、解决uniapp静态文件字体包太大打包大小超出限制 1.在app.vue文件下使用本地文件修改为网络路径 文件大小超过20m可以使用cdn加速我使用unicloud(示例): <style lang='scss'> /* 全局引入思源黑体 */ /...
  • 今天在开发过程中,发现在linux上下载某ttl文件(字体文件太大,传输过程比较慢,于是就想着使用nginx的gzip进行压缩,经过不断尝试,终于发现在nginx的配置目录/etc/nginx/mine.types 文件中少了 font/ttf ttf; ...
  • 最近在弄 three.js ,但是在加载 3D 中文字体的时候发现,带中文字体的文件太大了,从 TextLoader 加载字体文件再到绘制到我网页上的这个时间好几秒(虽然只是本地调试),所以,想着怎样压缩一下 .ttf 文件。...
  • 不少做平面的朋友可能都有过这样的经历:在自己的作品中要使用某种特效...或许你会认为这是专业软件公司的事,个人制作是不是困难了?  其实只要我们选好工具,掌握方法,制作自己的字体并不困难。    一、字体
  • ttf字体文件抽取自己想要的字

    万次阅读 2017-04-14 21:31:15
    【说明】游戏中经常需要用到各种字体,但是网上下载的TTF字体文件最小也有好几兆,要是游戏中需要用到几种字体,那简直不能忍。通常情况下,我们会用BMFont代替TTF字体,BMFont也有着很多的优势,但是缺点也很明显,...
  • 目前解决的方法只有将文件放入到sdcard,但这样除了microsd的读取IO效率和耗电量解决不是很好,同时sd卡移除时可能存在问题,解决的方法如果数据量的化通过sqlite是一种解决方法,同时openFileOutput方式读取也是...
  • 直接引入改字体的字体库.ttf文件 首先第一种方案的缺点,使用图片代替文字,制作和维护的成本很高,前期切图,合并雪碧图比较繁琐,后期修改和维护更是麻烦.同时使用图片,会带来更多的宽带消耗.用户体验方面,用户无法...
  • css太大怎么解决? ** 1、build>webpack.prod.conf.js中的allChunks:false 让scoped里面的css不统一合并到app.css中 new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), ...
  • 但是,中文字体嘛,文件,网站上应用占用资源了。 解决:即上面的原理。 参考资料: 常用中文字体 删除不常用的字体 使用: 全局安装个插件????,下回继续用 npm i font-spider -g 删除不常用的字体 ...
  • 1. 安装node.js 链接:https://jingyan.baidu.com/article/6079ad0edd875e28ff86db17.html 巨简单。 2. 安装font-spider插件 在命令行输入 : 要等一会,出现一堆warn啥的不用管 3.
  • 字体文件优化实践 前言 这次项目中UI小姐姐要求用平方等其他字体,遂引入了这些字体,打包的时候发现,OMG,一个字体文件竟然要10M,实在不能忍,于是开始了字体文件大小的优化实践,最后变成38KB一个,还行吧。 ...
  • 目前做的一个vue项目当中引入了外部的字体文件,打包之后测试发现加载过慢,需等待较长时间才能看到效果,特此记录在vue项目中压缩字体的操作. 安装字蛛 字蛛是一个中文字体压缩器,通过分析本地 CSS 与 HTML 文件...
  • 字蛛是一个中文字体压缩器 ...用于解决页面引入的css字体过的问题 使用方法:  npm i -gfont-spider  在页面引入外部字体 <!DOCTYPE html> <html lang="en"> <head> <meta cha...
  • 情人节来了,教你个用 Python 表白的技巧

    万次阅读 多人点赞 2020-02-12 21:47:54
    虽然创意和使用效果都不错,但有一缺点,这是那个exe文件,女神需要打开电脑,才有可能参与进来,进而被你成功"调戏”。 由于是很早期的文章了,应该有很多人没有看过。 没有看过的,你可以点击这里查看:用Pyt...
  • 减小字体文件的大小方案

    千次阅读 2015-11-11 22:11:27
    字体文件太大,怎么办?在界面开发的时候经常要用到各种字体,但字体文件特别的,而我们只是用到其中几个字而已,这时候我们就需要精简字体了。下面介绍一下字体文件的制作方法。首先下载FontCreator,版本最好为9.0...
  • python表白神器

    千次阅读 多人点赞 2019-11-12 10:01:54
    过程很简单在cmd里输入这一行代码即可转成可执行文件,同时我加载了部分小姐姐喜欢的王者荣耀建立亲密感,剩下的就是不期而遇的惊喜啦,我也将这个exe打包上传到网盘,小伙伴们在后台回复【表白】就可以领取能够...
  • git filter-branch --index-filter 'git rm --cached --ignore-unmatch -fr 文件名' -- --all

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,347
精华内容 3,338
关键字:

ttf文件太大