精华内容
下载资源
问答
  • 压缩字体包工具

    2018-11-15 14:33:12
    对应与博客“福利来了 -- 压缩字体包工具”说明使用,功能和网上很多字体压缩工具一样,但是使用起来简单很多。资源分是我没分了,希望大家贡献一点,使用不懂的在博客下留言。
  • 使用font-spider压缩字体包(蜘蛛字体) 在项目中使用的字体文件的时候英文的还好中文字体包动不动就要超过项目大小会严重影响项目加载,对于静态的文字font-spider是一个很好的解决方案。 在全局安装 font-spider。 $...

    使用font-spider压缩字体包(蜘蛛字体)

    在项目中使用的字体文件的时候英文的还好中文字体包动不动就要超过项目大小会严重影响项目加载,对于静态的文字font-spider是一个很好的解决方案。

    在全局安装 font-spider

    $ npm install font-spider -g
    

    现在可以使用了
    在自己文件下创建一个html文件这个这个可以在任意位置我这里偷懒一下
    直接丢在了我的font下边

    font.html文件中就像我们其他的一样引入字体包命名

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style type="text/css">
            @font-face {
                font-family: CN-AlibabaPuHuiTiM;
                src: url("../fonts/AlibabaPratt/AlibabaPratt-Medium.ttf") format("truetype");
            }
    
            @font-face {
                font-family: EN-Rajdhani-Medium;
                src: url('../fonts/Rajdhani/Rajdhani-Medium.ttf') format('truetype');
            }
    
            @font-face {
                font-family: CN-AlibabaPuHuiTiR;
                src: url('../fonts/AlibabaPratt/AlibabaPratt-Regular.ttf') format('truetype');
            }
            .CN-AlibabaPuHuiTiM{
                font-family: "CN-AlibabaPuHuiTiM";
            }
            .CN-AlibabaPuHuiTiR{
                font-family: "CN-AlibabaPuHuiTiR";
            }
        </style>
    </head>
    
    <body>
        <div class="CN-AlibabaPuHuiTiM">
            我要转换的文字一
        </div>
        <div class="CN-AlibabaPuHuiTiR">
            我要转换的文字二
        </div>
    </body>
    
    </html>
    

    在fonts中执行font-spider *.html

    $ font-spider	*.html
    

    前后文件大小对比还是很明显的

    在这里插入图片描述

    之后你会发现在你的字体包文件夹中会多一个.font-spider的文件里边存放的是之前的文件,压缩后的会直接在当前文件夹中现在你直接引入压缩后的文件就可以了
    在这里插入图片描述

    展开全文
  • 福利来了 -- 压缩字体包工具

    千次阅读 2018-11-15 14:34:03
    网上关于压缩字体包的工具和教程都太麻烦了,使用gulp-font-spider还有一大堆设置,今天分享一个压缩字体包的工具,自己写的python脚本,配合sfnttool.jar包做字体压缩。很简单的。 1、先来解析一下代码,谁想拿去用...

    网上关于压缩字体包的工具和教程都太麻烦了,使用gulp-font-spider还有一大堆设置,今天分享一个压缩字体包的工具,自己写的python脚本,配合sfnttool.jar包做字体压缩。很简单的。
    1、先来解析一下代码,谁想拿去用的自己根据提示改一下代码就可以了。

    #!/usr/bin/env python3
    # -*- coding: UTF-8 -*-
    import os
    import codecs
    import argparse
    import sys
    reload(sys)
    sys.setdefaultencoding('utf8')
    # 读取文件里使用到的字体
    def readFile(path): 
        fd = open(path)
        line = fd.readline()
        string = ""
        while line:
            s = line.find(':')
            e = line.find(',')
            if s != -1: 
                if e == -1: 
                    e = len(line)
                sub = line[s + 1:e]
                chinaCode = sub.encode('utf8').decode('unicode_escape')
                for char in chinaCode: 
                    if (string.find(char) == -1 and char != '"' and char != ' '):
                        string = string + char
            line = fd.readline()
        fd.close()
        return string
    
    # 添加英文字和特殊字符
    def addChar(string): 
        string = string + "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM:,./?%"
        return string
    
    # 导出字体命令
    def exportFont(string, originFont, outFont):
        cmdStr = 'java -jar sfnttool.jar -s "%s" %s %s' % (string, originFont, outFont)
        os.system(cmdStr)
        print("export " + outFont + " font complete")
    
    # 将原路径下的所有字体全部压缩成新字体
    def run(filePaths, originPath, outPath):
        string = ""
        for filePath in filePaths:
            string = string + readFile(filePath)
        string = addChar(string)
        fonts = os.listdir(originPath)
        for font in fonts: 
            if(font.find('.ttf') != -1 or font.find('.OTF') != -1):
                # 字体
                print(font)
                oldFont = os.path.join(originPath, font)
                outFont = os.path.join(outPath, font)
                exportFont(string, oldFont, outFont)
    
    if __name__=='__main__':
        filePathCn = "../../../game/resource/assets/config/zhcnTxt.json"		#这里是你想获取的原字的文件地址,填写你自己的文件地址就可以了
        # filePathTw = "../../../game/resource/assets/config/zhtwTxt.json"
        filePaths = [filePathCn]    # 这里是可以做多个文件同时更换
        originPath = "./origin_fonts"    #这里存放的是你想压缩的原字体库文件夹
        outPath = "./output_fonts"    #这里是你想转换后的文件路径
        run(filePaths, originPath, outPath)
    

    看着上面的注释,将对应的地方改过来,就可以了。

    上面是代码,你拷过去的时候一定要注意python的格式对不对,在sublime中打开,每行前面是…这种就是对的,是——就是格式有问题,你直接在前面打空格就可以了
    在这里插入图片描述

    2、在终端中执行python exportFont.py就可以了
    使用示例和demo我已经放到资源了,自己去下就好了,使用不明白的直接问。

    展开全文
  • <div><p><img alt="image" src="https://user-images.githubusercontent.com/22813180/57762026-49fe0d80-7731-11e9-8fa9-303b3ad44f96.png" /></p>该提问来源于开源项目:purplebamboo/font-carrier</p></div...
  • vue 字体包压缩

    2020-09-09 10:20:24
    一个字体包,可以想象成一个压缩包,这个压缩包内包含6w多个文字,每个文字是一个矢量图。压缩只是把自己所要用的...字体包压缩方法参考以下链接: https://blog.csdn.net/qq_43364234/article/details/100518021 ...

    一个字体包,可以想象成一个压缩包,这个压缩包内包含6w多个文字,每个文字是一个矢量图。压缩只是把自己所要用的文字挑选出来,其余文字删除,所以压缩后体积比较小,弊端就是只适合固定页面的文字显示,一单页面的文字发生变化,字体效果就没有了,需要重新压缩。

    字体包压缩方法参考以下链接:

    https://blog.csdn.net/qq_43364234/article/details/100518021

    展开全文
  • 前端工作中,我们经常会发现,设计师为了... Iphone手机自带的字体是PingFang SC(没事,就顺带提一嘴),一般我们做的项目本身就没有多大,但是一个字体包(*ttf,*otf等等)文件却有将近10M的大小,显得过于冗余。 ...

           前端工作中,我们经常会发现,设计师为了追求设计稿的美观使用了非常炫酷的字体。一方面咱不敢给前端大佬提要求,另一方面我们也得对自己的工作负责,泪往肚子里咽,有问题想办法解决。

           Iphone手机自带的字体是PingFang SC(没事,就顺带提一嘴),一般我们做的项目本身就没有多大,但是一个字体包(*ttf,*otf等等)文件却有将近10M的大小,显得过于冗余。

           在这里我推荐一个我自己使用的图片压缩网站,我觉得非常好用。https://tinypng.com/,不仅仅压缩图片是无损的,界面也非常的萌萌哒。

     

                                                                                       (打钱)

            作为一个合格的前端,你必须在打包代码的时候,养成这样压缩图片的好习惯。

            扯远了,说回我们的字体问题,很多时候如果是需要动态生成一些不确定性的文本,需要使用特殊字体的话,我是建议直接引入你的字体包,这个目前我的能力有限,还无法避免。

           这里贴一段我的代码

     @font-face {                 font-family: "cityName";                 src: url("../font/cityName/PangMenZhengDaoCuShuTi-2.eot");                 /* IE9 */                 src: url("../font/cityName/PangMenZhengDaoCuShuTi-2.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */                 url("../font/cityName/PangMenZhengDaoCuShuTi-2.woff") format("woff"), /* chrome、firefox */                 url("../font/cityName/PangMenZhengDaoCuShuTi-2.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */                 url("../font/cityName/PangMenZhengDaoCuShuTi-2.svg#PangMenZhengDaoCuShuTi-2") format("svg");                 /* iOS 4.1- */                 font-style: normal;                 font-weight: normal;             }

           在我们的项目下面新建一个font文件夹,用于存储我们的字体包(个人习惯仅供参考)。

            而对于一些,我们已知的固定的字体,我们如果还引入字体包是非常不适宜的。这里我觉得有两种方法,一种是将字体做在图片上,我们使用图片。另一种就是我今天要说的方法,首先我们先确定那些需要用到特殊字体的文本,然后使用我的这个软件(下载地址会放置到底部)。

           打开来之后是这样的,我们将所需要使用的字体包拖入1位置(注:只支持*ttf格式的字体包),然后将我们所需要转换的文本卸载图中的2处,一切准备完成之后,我们就点击3.我们就可以获得我们所需要的文件。

    文件格式如下:

            这样就获得我们需要的字体包了,但是对于那些没有录入的文本会使用自带的字体。代码同上。

            那么有些同学就要说了,只可以使用*ttf格式的字体包,那其他的怎么办了,不急,我们有很多在线的转换格式的网站可以帮我们实现格式的转化。例如https://convertio.co/zh/otf-ttf/

     

     

                                                                       (打钱)

       这就不需要我过多的解释了。

    在这里贴一段使用时候的代码。.div{  font-family:cityName}

            我给我那个字体的命名是cityName,所以我可以这样写。你学会了吗。

     

    链接:https://pan.baidu.com/s/1s8i_jthN2EnHlQHXGswBSA

    提取码:omau

    复制这段内容后打开百度网盘手机App,操作更方便哦

     

    展开全文
  • 原本的Android体有230M,对于一款休闲解密类手游来说体积有点太大了,通过一张张仔细压图之后成功缩小到了107M。虽然已经减少一半以上的大小,但是对于强迫症患者还是想减小到100M以下。通过查看Console->...
  • 很久以前,设计师总是爱用一些奇奇怪怪的字体放在页面上,而作为前端我们很容易的就能直接使用TA们用到的字体包,但是,字体包一般都好几兆,特别占内存,特别拉慢页面的加载速度。久而久之我就不爱设计师设计的字体...
  • 在进行网页设计时,设计...英文字体包只需要26个字母和一些标点符号,就基本能完成英文文本的显示,所以字体包就比较小,一般在几十k左右,而中文字符数量庞大,字体包的文件大小能达到几M甚至十几M,这对于网页加载...
  • vue压缩字体

    千次阅读 2019-01-15 14:33:55
    由于制作H5页面,需求要设置炫一点的字体,但是字体包太大加载太慢,所以出现了特殊字体压缩与字蛛的使用 原理:把需要的字的字体保存,用不到的字的字体清除 实现: 1.下载好你需要的字体 2.在项目中新建一个...
  • 压缩之后的输出字体内容— 4、打开其中压缩生成的css文件 内容: 将里面的内容复制到你所需要使用的地方,或者放在一个文件里面并在App.vue中全局引用 (注意修改相对路径) 其中字体名称字可以自己改变, 博主...
  • 字体压缩

    千次阅读 2018-12-11 17:28:20
    字体压缩 一. 在一个项目中,一定要用到华康娃娃体做一个效果,但是这个字体下下来有2.55MB,这显然是不行的,于是上网找了一波干货,如下: 字体压缩的原理就是你要使用的字符单独拿出来,不用的就不包含,这样就...
  • 下载字体并解压缩; 2.开始中打开控制面板; 3.在控制面板中打开字体文件夹; 4.把下载的字体复制到此文件夹下; 5.文字添加完成 第二种 1.下载字体并解压缩; 2.把文件根目录下的字体压缩包解压缩; 3.把文件根目录...
  • 目前做的一个vue项目当中引入了外部的字体文件,打包之后测试发现加载过慢,需等待较长时间才能看到效果,特此记录在vue项目中压缩字体的操作. 安装字蛛 字蛛是一个中文字体压缩器,通过分析本地 CSS 与 HTML 文件...
  • 下载字体并解压缩; 2.开始中打开控制面板; 3.在控制面板中打开字体文件夹; 4.把下载的字体复制到此文件夹下; 5.文字添加完成 第二种 1.下载字体并解压缩; 2.把文件根目录下的字体压缩包解压缩; 3.把文件根目录...
  • [css] 你是如何压缩字体的? 压缩字体文件么,有研究过,平时用 font-spider。 webpack 集成没怎么实践过,还只知道 url-loader。 有三种不同的压缩处理策略的, 自己决定压缩打包哪些文字,如 FontZip,iconFont ...
  • 美工设计字体包包含的字体是美工人员常用的一些字体,已经为你打包好了,基本都包含在内,需要的用户可以下载。...2:然后选择你已下载完成想要安装的字体,首先将下载完成的字体压缩文件进行解压,然后复制解压后
  • android 开发字体包

    2017-05-22 09:04:40
    压缩包包含以下字体包,可以在安卓开发中使用: Roboto-Black,Roboto-BlackItalic,Roboto-Bold,Roboto-BoldItalic,Roboto-Italic,Roboto-Light,Roboto-LightItalic,Roboto-Medium,Roboto-MediumItalic,Roboto-...
  • 下载字体并解压缩; 2.开始中打开控制面板; 3.在控制面板中打开字体文件夹; 4.把下载的字体复制到此文件夹下; 5.文字添加完成 第二种 1.下载字体并解压缩; 2.把文件根目录下的字体压缩包解压缩; 3.把文件根目录...
  • 个性韩文字体的本体是韩文,这个字体是从韩国引申进中国,个性韩文字体咱作图方面...下载字体并解压缩; 2.开始中打开控制面板; 3.在控制面板中打开字体文件夹; 4.把下载的个性韩文字体复制到此文件夹下; 5.文字添
  • CAI978经典英文字库中包含978个英文字体,前300款为必备英文字体:120款标准字体 180...文字添加方法: 下载文件解压缩后会出现一个678en.exe的文件,这个文件千万不是要解压缩的,看到678en.exe这个文件后,双击打开
  • 如何压缩中文字体的大小

    千次阅读 2019-02-18 18:17:12
    往往需要嵌入自定义字体,但是中文字体由于字数庞大导致整个字体包就会很大;很影响页面的加载速度。 那有什么办法即能使网站展示美观的字体,又提升字体的加载速度呢? 幸运的是字蛛从没某种意义上能解决这个问题;...
  • 条形码字体合集中拥有79款实用的条形码字体,条形码字体的是商品专用的字体工具,本站提供了条形码字体的下载地址,有需要的朋友们可以前来下载使用。...下载字体并解压缩; 2.开始中打开控制面板; 3.在控制面板
  • ttc转ttf 这网站可以将ttc字体包转化为ttf ...各类型字体包互转 网站上可以的字体都可以实现互转...网页设计引入的字体包过大的压缩方法 https://blog.csdn.net/qq_36288559/article/details/110920169 ——————感谢
  • >可用作APK字体压缩 用于提取仅需要的美化文字,来压缩assets下的字体文件大小。 Download FontZip.jar FontZip32.exe FontZip64.exe 历史版本和其他下载链 Gif FontZip2 使用说明: Windows下运行run.bat,选...
  • 字体包文件过大

    2018-03-01 15:37:00
    字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。 http://font-spider.org/ 转载于:...
  • 用字蛛压缩ttf字体文件

    千次阅读 2019-02-26 13:57:07
    1. 下载字蛛,全局安装 npm install font-spider -g 2. 创建一个自己的文件夹 如 test ...2. font文件夹 (字体1.ttf,字体2.ttf) 3. index.html 3. font.css @font-face { font-family: 'sf-pro-tex...
  • 浪漫情人节英文字体合集中拥有5款情人节专用字体,情人节是表白的最佳时刻啦,使用这款配套的字体,会让她看到你...下载字体并解压缩; 2.开始中打开控制面板; 3.在控制面板中打开字体文件夹; 4.把下载的字体复制到此

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 717
精华内容 286
关键字:

压缩字体包