精华内容
下载资源
问答
  • 如何压缩中文字体大小

    千次阅读 2019-02-18 18:17:12
    往往需要嵌入自定义字体,但是中文字体由于字数庞大导致整个字体包就会很大;很影响页面的加载速度。 那有什么办法即能使网站展示美观的字体,又提升字体的加载速度呢? 幸运的是字蛛从没某种意义上能解决这个问题;...

    我们在网站中为了达到更美观的效果。往往需要嵌入自定义字体,但是中文字体由于字数庞大导致整个字体包就会很大;很影响页面的加载速度。
    那有什么办法即能使网站展示美观的字体,又提升字体的加载速度呢?
    幸运的是字蛛从没某种意义上能解决这个问题;

    字蛛

    字蛛(font-spider), 一个智能 WebFont 压缩工具!它能自动分析出页面使用的 WebFont 并进行按需压缩。
    官网:http://font-spider.org/
    源码:https://github.com/aui/font-spider

    安装

    npm install font-spider -g

    运行

    font-spider ./demo/*.html
    页面依赖的字体将会自动压缩好,原 .ttf 字体会备份;

    使用

    /声明 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’;
    }

    注意事项

    字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
    如果页面是动态渲染的,无法知晓页面中会有哪些字的时候将无法提前编译好字体包;当然你也可以提前预知会有哪些字进行编译(例如可以先编译3500个中文常用字);

    展开全文
  • 如图,下方是一个GridView,其中每一个Item都是一个圆形的按钮,然而一行设置8个Item后,每个Item只有宽度被压缩了,而高度没有等比例地缩小,变成了这种长条形。。。目前已经尝试过的情况:1、在item.xml中修改...

    c06e555e359d934fddba6bce62d0d191.png

    如图,下方是一个GridView,其中每一个Item都是一个圆形的按钮,然而一行设置8个Item后,每个Item只有宽度被压缩了,而高度没有等比例地缩小,变成了这种长条形。。。

    目前已经尝试过的情况:

    1、在item.xml中修改button的width和height,不论是wrap_content还是固定值都没有任何效果

    2、为GridView添加android:layout_weight="1",没有效果

    3、为item.xml添加android:layout_weight="1",没有效果

    目前唯一奏效的方法是我自己手动用photoshop修改了背景图片的大小,缩小到一个在屏幕上刚好不会被压缩的尺寸,才能在屏幕上正常显示。。。但我觉得这个办法显然有问题吧。。

    9f21499deecb12a70c0f7c5018107773.png

    换了一个相对较小的背景依然如此。。只有item的宽由于为了放下一行8个item而被压缩了,高却保持了原图片的高度。。然后这个GridView就不得不滑动并且一部分无法显示。。

    附代码:

    这是GridView:<?xml  version="1.0" encoding="utf-8"?>

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_marginTop="10dp"

    android:orientation="vertical">

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_marginBottom="20dp"

    android:orientation="horizontal">

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:background="@drawable/game_line"/>

    android:padding="2dp"

    android:orientation="vertical"

    android:id="@+id/gridview"

    android:verticalSpacing="2dp"

    android:horizontalSpacing="2dp"

    android:numColumns="8"

    android:gravity="center"

    android:layout_marginTop="5dp"

    android:layout_weight="1"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    Item:<?xml  version="1.0" encoding="utf-8"?>

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/item_btn"

    android:text="测"

    android:textColor="#000000"

    android:textSize="20sp"

    android:background="@drawable/wordbbtn"/>

    展开全文
  • 让网页自由引入中文字体成为可能,可能有人会说直接引入字体包,在样式中设置font-...接下来给大家分享一个中文字体压缩器——字蛛首先我们先写入一段默认显示文字的代码:显示与众不同的字体.container{font-size...

    让网页自由引入中文字体成为可能,可能有人会说直接引入字体包,在样式中设置font-family:"XXX"不就好了吗?超级简单呢..

    那我们一起看看字体包的大小(该实例中使用:喜鹊招聘简体)

    a4a405e41fd67cfc284b9d3316f1058e.png

    一个字体库文件十几兆,页面加载速度超级慢,严重影响用户体验,怎样做减法呢?

    接下来给大家分享一个中文字体压缩器——字蛛

    首先我们先写入一段默认显示文字的代码:

    显示与众不同的字体

    .container{font-size: 18px;line-height: 32px}

    这一行是普通文本哦!

    复制代码

    页面显示截图如下:

    382b80a58db0a0f119182de40dc0a1d5.png

    接着我们准备引入特殊好看的字体,并且给字体库做减法咯。

    前提条件:安装好node环境

    1、安装font-spider

    npm install font-spider -g

    复制代码

    构建插件:grunt-font-spider | gulp-font-spider

    2、在 CSS 中使用 WebFont:

    /*声明 WebFont*/

    @font-face {

    font-family: 'xqzpzt';

    src: url('fonts//xqzpzt.eot');

    src: url('fonts//xqzpzt.eot?#font-spider') format('embedded-opentype'),

    url('fonts//xqzpzt.woff') format('woff'),

    url('fonts/xqzpjt.TTF') format('truetype'),

    url('fonts/xqzpzt.svg') format('svg');

    font-weight: normal;

    font-style: normal;

    }

    /*使用选择器指定字体*/

    .xqfont{font-family: 'xqzpzt';}

    复制代码

    提醒:

    a. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成

    b. 开发阶段请使用相对路径的 CSS 与 WebFont

    3、运行提取文字压缩文件包

    font-spider ./*.html

    复制代码

    提醒:

    根据您自己的需求定义路径,当前路径意思:根目录下的所有html文件

    页面依赖的字体将会自动压缩好,原 .ttf 字体会备份

    整体代码:

    显示与众不同的字体

    .container{font-size: 18px;line-height: 32px}

    @font-face {

    font-family: 'xqzpzt';

    src: url('fonts//xqzpzt.eot');

    src: url('fonts//xqzpzt.eot?#font-spider') format('embedded-opentype'),

    url('fonts//xqzpzt.woff') format('woff'),

    url('fonts/xqzpjt.TTF') format('truetype'),

    url('fonts/xqzpzt.svg') format('svg');

    font-weight: normal;

    font-style: normal;

    }

    /*使用选择器指定字体*/

    .xqfont{font-family: 'xqzpzt';}

    这一行是普通文本哦!

    这里显示喜鹊招牌简体!

    复制代码

    最后显示如下图:而且字体包大小也变小了,只有21KB

    d77ce51ec650a0178230a20ce3e869b4.png

    b5868ef5217709102e3ae94951f1e0a3.png

    友情提示:字体包变小,实际上是把文件中使用到的文字给提取了出来,所以每次文字变化的话,都需要重新生成一下字体库。

    ab9cd217a8875746bf09ff8eb91dabf6.png

    展开全文
  • 文章目录方法一:方法二:缺陷:方法:第一步、压缩字体包(字体包的css文件大小在1M以下的忽略这一步)第二步、将字体包引入小程序 方法一: 一种是将字体文件上传至服务器,微信小程序引入服务器中的字体即可,...

    方法一:

    一种是将字体文件上传至服务器,微信小程序引入服务器中的字体即可,详细参见这里

    这种方法很好,很实用,但是却满足不了强迫症的我,难道我连加载个页面都需要从服务器中获取吗??

    方法二:

    将对应的字体文件,上传到https://transfonter.org/,通过转换成base64编码,在wxss文件中使用。详细参见这里

    这种方法看起来可行,但是坑却很多

    缺陷:

    一、https://transfonter.org/这个网站不支持10M以上ttf文件的转化,这就使许多好看的字体只能通过方法一来引入微信小程序。

    二、当转化后的css文件超过1M时,我们引入小程序中是会报错的,如下:

    最初不知道这个问题的原因是什么,直到我看到了这个评论:

    这时候我们明白了,是微信小程序自己的bug,那么这就造成了我们必须压缩字体包,留下我们需要的字体,删除我们不需要的字体,才能放到我们的小程序里。这也衍生了一个问题,比如一些固定内容的地方我们可以使用自己引入的字体,但是一些内容不固定的地方,我们无法使用,只能使用第一种方法。

    方法:

    第一步、压缩字体包(字体包的css文件大小在1M以下的忽略这一步)

    我们需要使用到font-spider(字蛛)这个工具。

    安装字蛛之前需要安装NodeJS按照自己的需要安装,在cmd中输入命令npm install font-spider -g安装font-spider。

    font-spider使用方法:

    首先我需要解释一下font-spider的原理,它是通过在html页面中挑出我们需要的字体,然后在原来的字体包中寻找我们需要的字体,删除我们不需要的字体进而实现压缩(我觉得不算是压缩,算是私人定制,剔除我们不需要的字体)

    我们需要一个html文件装着我们需要的所有字体,定义CSS文件中在其中使用 WebFont映射你的字体包,CSS文件命名为stylesheet.css

    /*声明 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';
    }
    

    按照这个根据自己的需要进行修改,将html文件与CSS文件放在之后再命令行中运行font-spider html文件的相对路径,便会生成新的字体包,这个就是我们需要的精简后的字体包。

    第二步、将字体包引入小程序

    首先在小程序的目录下建立存放这个字体样式的文件夹,我暂且命名为style,将所有字体包文件放入style中,将css文件后缀改名为wxss,保留其中

    @font-face {
        font-family: '';
        src: url('') format('woff'),
            url('') format('truetype'),
            url('') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    

    这一部分。这时字体包算是引用成功。

    使用时首先在需要用import 方式引入字体库css,在需要的wxss中@import '../../style/stylesheet.wxss';,需要用的标签添加font-family字体名称:font-family: '' 就可以使用了。

    展开全文
  •  页面宽度有限的情况下显示大数据,采用font-size:8px来压缩字体大小,版本 25.0.1547.66及以下版本的chrome浏览器没有问题,后续版本的就不可以了; 问题原因:  浏览器设置了最小字体限制;配置文件在"...
  • 如何减少PDF文件的大小,为pdf瘦身?

    万次阅读 2014-04-30 10:45:42
    如何减少PDF文件的大小,为pdf瘦身? WORD转换成PDF后发现pdf挺大的,为了不改变pdf内容,且尽量不改变质量,使用Adobe ...“减少文件大小”命令可以重新取样和压缩图像、删除嵌入的 14 款基本字体和将所剩嵌入字...
  • 在Html5中引入外部字体,只需要在你的css中声明下面两段函数即可,但是由于中文数量较多,导致文件大小较大,所以导致加载比较慢。 @font-face { /** 可以把这里的jelly替换成你的文字名称*/ font-family: 'jelly'...
  • 我们都知道PPT文件中的素材、字体、形状等,都会影响PPT的大小,那如果PPT过大,该如何快速压缩呢?今天小编就给大家分享一个方法,来解决PPT压缩的问题。 具体方法如下: 一、双击打开桌面上的迅捷压缩软件,电脑...
  • 在工作中,有时会遇到需要在电脑上给图片添加上文字,上传...2、点击“图片加字”功能,将我们需要添加文字的图片上传,根据需要选择字体,调整字体的颜色、大小、间距等参数,并且可以通过拖动文字来选择文字的位置。
  • 如何引入字体 一.资源的压缩和合并 1.为什么要压缩和合并 1》减少http请求数量 2》减少请求资源大小 2.HTML压缩 1》使用在线工具进行压缩 2》使用html-minifier等npm工具(webpack就是集成的这个工具)
  • mobile.html -重新排序加载 -修改字体加载方法 -缩小style.css -添加媒体属性用于打印 css - 优化图像压缩 - 缩小图像大小以匹配显示大小 project-webperf.html - 重新排序加载 - 修改字体加载方法 - 缩小 style.css...
  • eclipse-jee-neon-3安装

    千次阅读 2018-03-13 22:22:01
    1eclipse-jee-neon-3-win32-x86_64下载解压之后执行eclipse.exe即可打开软件2汉化包解压之后,将文件拷到上面解压缩文件的dropins文件夹中3调整Eclipse字体大小4.Ecplise创建一个类的时候如何自动添加作者,时间等...
  • 做了很多艰苦的工作,比如确定最佳图像大小以及如何调整图像以校正字体宽度。 阅读他的帖子并查看 Elixir 代码。 此版本自动按配置的比例缩放图像,以便任何图像无需修改即可使用。 设置 安装 Source Code Pro 字体 ...
  • AssetBundle学习(一)

    2020-03-24 16:42:11
    AssetBundle包,简单的理解一下就是我们一种资源压缩包,把程序上使用的:预制,图集,材质,音效或者字体等资源打包起来,然后等项目运行起来之后再加载,是减少包体大小和热更新资源必不可少的神器。 不懂AB包的...
  • 前端面试高频问题

    2020-10-20 18:53:44
    前端如何性能优化 1. 减少请求数量 a. 把前端的公共库合并 b. 不同页面单独合并 c. 对于图片,使用雪碧图,base64编码图片,使用字体图标 d. 减少重定向 e. 使用缓存 f. 避免使用空的 href 和 src 2. 减小...
  • bilibili微信小程序

    2021-01-26 11:17:14
    使用base64压缩功能将小图片文件转换为base64格式并使用image标签代替i标签或view标签引入(个人使用,优点是不用多放几张图,缺点是会增加wxml的大小以及降低代码可读性) 跟黑马的老师py一下把文件要过来 如何引入到...
  • C#编程经验技巧宝典

    热门讨论 2008-06-01 08:59:33
    104 <br>0171 如何只允许输入指定图片格式 105 <br>0172 如何设置录入图片统一图片大小 105 <br>5.4 数组处理技巧 105 <br>0173 如何转换数组类型 105 <br>0174 如何复制数组中一系列元素的...
  • WX-bilibili-Demo 久 等 了 本Demo成品来自B站教程视频,如想看原视频,请移步: Readme摸了25天,反正现在才半夜12点 5月1日之后由于接口的视频资源域名...使用base64压缩功能将小图片文件转换为base64格式并使用image标签
  • 然后,点击工具栏上的“T”按钮在新窗口上输入文字,并通过文字属性窗口调整文字的大小、颜色和字体等。 小技巧:为了水印效果更出色,我们可以对文字增加一些效果,如投影、绘边等。然后在设置图层的透明度为50%。...
  • 全书体积较大,压缩打包成3部分,这是第1部分。 注:本系列图书的第I、II卷再版时均相应改名为《xxx开发实例大全》(基础卷)及(提高卷),但内容基本无变化,需要的童鞋可自由匹配查找。 内容简介  《Visual C++...
  • 全书体积较大,压缩打包成3部分,这是第2部分。 注:本系列图书的第I、II卷再版时均相应改名为《xxx开发实例大全》(基础卷)及(提高卷),但内容基本无变化,需要的童鞋可自由匹配查找。 内容简介  《Visual C++...
  • 全书体积较大,压缩打包成3部分,这是第3部分。 注:本系列图书的第I、II卷再版时均相应改名为《xxx开发实例大全》(基础卷)及(提高卷),但内容基本无变化,需要的童鞋可自由匹配查找。 内容简介  《Visual C++...
  • 主要内容有C#开发环境的使用、C#语言基础应用、字符串处理技术、数组和集合的使用、面向对象...压缩文件、C#与Word互操作、高效应用Excel、基本图形绘制、图像处理技术、常用图表应用、动画处理技术、音频与视频控制...
  • 阅读工具 开卷有益

    2012-03-31 14:07:03
    2、开卷如何使用外部字体字体? 按以下步骤: 1、将电脑上后缀名为TTF的字体文件复制到开卷Fonts目录下 2、启动开卷,选择:系统设置|主题设置|字体 ,就可以看到外挂字体了。 --------------------------------...
  • 2. 英文版的字模小,一个字母也就8x12,而汉字一般是12x12到16x16大小,为了显示汉字,你又要asm hacking。 3. 英文版的对话远比日文长,为节省空间,一般做了压缩,这大大增加了破解难度。 2. 字库与码表 好,...
  • 5.2.4 获取指定颜色值和字体样式 5.2.5 DataGridView控件的相关应用 5.3 设计过程 5.3.1 打印信息的设置 5.3.2 表格样式的设置 5.3.3 打印类的设置 5.3.4 打印数据信息 第6章 决策分析模块 6.1 设计思路 6.2 关键...
  • 5.2.4 获取指定颜色值和字体样式 5.2.5 DataGridView控件的相关应用 5.3 设计过程 5.3.1 打印信息的设置 5.3.2 表格样式的设置 5.3.3 打印类的设置 5.3.4 打印数据信息 第6章 决策分析模块 6.1 设计思路 6.2 关键...
  • 5.2.4 获取指定颜色值和字体样式 5.2.5 DataGridView控件的相关应用 5.3 设计过程 5.3.1 打印信息的设置 5.3.2 表格样式的设置 5.3.3 打印类的设置 5.3.4 打印数据信息 第6章 决策分析模块 6.1 设计思路 6.2 关键...
  • 12.2 文件的压缩与解压缩 实例306 压缩所有文本文件 实例307 压缩包解压到指定文件夹 实例308 压缩所有子文件夹 实例309 深层文件夹压缩包的释放 实例310 解决压缩包中文乱码 实例311 Apache实现文件解压缩 ...
  • 12.2 文件的压缩与解压缩 实例306 压缩所有文本文件 实例307 压缩包解压到指定文件夹 实例308 压缩所有子文件夹 实例309 深层文件夹压缩包的释放 实例310 解决压缩包中文乱码 实例311 Apache实现文件解压缩 ...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 150
精华内容 60
关键字:

如何压缩字体大小