字蛛 font-spider的使用

最新推荐文章于 2024-06-20 17:19:31 发布
最新推荐文章于 2024-06-20 17:19:31 发布
阅读量301 收藏
点赞数
分类专栏： font-spider 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ton555555/article/details/105561777
版权

安装font-spider

npm install font-spider -g

生成字体文件

UI给出 字体文件 hz.ttf
通过 html 文件: 自己写个demo.html
src 路径 是自己的hz.ttf 文件

在这里插入图片描述

在终端执行font-spider ./demo.html 产生fontspider文件夹
外部的 hz.ttf 为抽离出的字体文件在这里插入图片描述
使用
将字体文件放入项目中
在样式style 中定义: 在这里插入图片描述
然后像正常写样式一样 即可

在这里插入图片描述
在这里插入图片描述
字蛛网址: http://font-spider.org/

龙拳蜗牛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
font-spider-plus:font-spider-plus（字蛛+）是一个智能 WebFont 压缩工具，它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩
04-27
字蛛+（Font-spider-Plus） font-spider-plus（字蛛+）是一个智能 WebFont 压缩工具，它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩。 特性 除了兼容font-spider（）支持的特性： 压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积 生成字体：支持 woff2、woff、eot、svg 字体格式生成 font-spider-plus（字蛛+）还具有以下特性： 支持线上动态渲染的页面 支持线上GBK编码的文件 安装 npm i font-spider-plus -g 使用范例 一、书写 CSS 出自： /*声明 WebFont*/ @font-face { font-family: 'source'; src: url('../font/source.eot'); src: url('.
中文WebFont解决方案Font-Spider(字蛛)
ab24523987的博客
06-24 261
我们在日常需求中，经常会碰到视觉设计师对某个中文字体效果非常坚持的情况，因为页面是否高大上，字体选择是很重要的一个因素，选择合适的字体可以让页面更优雅。面对这种问题，我们通常以下方式来进行设计还原： 使用图片背景还原设计，即使用photoshop将文本图层单独导出成网页背景图片。 产生的问题 1.制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐，后...
小程序中用font-spider压缩字体后，字体没效果（解决办法）
最新发布
qcg14774125的博客
06-20 428
但是小程序是有大小限制的，所以必须要压缩字体大小，这时候有些人就说了，那把字体放在服务器上，请求它就完了呀，拜托，字体大的话，请求不花时间吗，会造成页面初始化的时候，字体没请求出来，或者请求完成后由初始化字体转换成需要的字体闪烁，体验感不佳，这时候就要用font-spider，接下来我就把思路讲一下、但是要注意的是，如果你在小程序中要用这个字体包时，你要改变的文字，必须是在demo中出现的文字，不然的话，在小程序中是没有变化的，像我demo中有。然后把你压缩完的字体文件复制到你小程序中去引入就ok了。
记一个小工具——font-spider(字蛛-css压缩中文字体字体）
喋喋的前端之路
11-10 4745
font-spider链接用处安装和用法 链接 先上一个官方链接吧 字蛛 再来一个Git地址字蛛Git地址 用处 这是一个压缩中文字体的小工具，用于前端开发过程中页面需要特定的文字，这些文字要是长期没有变化可以切图????。 今天介绍的小工具就是用于有变化的文字，首先通过font-face的方法引入特定字体，通常一个字体文件过大(≥1M)，页面上使用的又不是很多，因项目需求使用自定义字体，发现页面加载很慢，所以使用font-spider压缩字体大小，提升页面加载速度。 该工具的原理就是浏览整个页面文字，仅保
字蛛 font-spider 使用
羽筠的博客
01-19 1190
在移动端的web开发中，设计师们往往为了页面显示效果好看，会使用一些特殊字体，那我们开发时就需要引入这些字体文件，但字体文件如果太大的话，下载就会特别慢，会大大影响的体验效果，所以我们需要对此进行优化处理。字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。它通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
字蛛（font-spider），中文字体压缩器
weixin_45027592的博客
05-13 397
使用说明 安装 npm install font-spider -g 使用 1.在css中使用webFont,例如: /声明 WebFont/ @font-face { font-family: ‘pinghei’; src: url(’…/font/pinghei.eot’); src: url(’…/font/pinghei.eot?#font-spider’) format(‘embedde...
详解node字体压缩插件font-spider的用法
01-01
node 安装插件方法：npm install font-spider -g 操作： 安装插件 提取项目文字： 创建一个临时html，将所有项目需要用到的文本放到html中 在htmnl中写入样式代码，举个栗子： @font-face { font-family: 'myfont'...
font-spider 字蛛模板
11-23
1. 安装字蛛：npm install font-spider -g 2. cd xx/xx/x目录/demo 3. 将压缩包解压缩到demo目录下,将字体替换成需要压缩的字体 4. cd .. 可以返回上一目录 5. 运行：font-spider ./demo/*.html
html文字标签压缩,tool 使用font-spider解决字体压缩问题
weixin_39583655的博客
06-20 149
开发页面时经常需要使用特殊字体，一个.ttf文件动则几M,字体文件需要优化http://font-spider.org/安装好node环境后1.全局安装font-spidernpm install font-spider -g2.如果字体不全是写在html中的,那么写个文件用于生成字体*.ttf文件必须有，其他格式的程序将自动生成1) getFont.html文件document@font-fac...
使用font-spider提取文字，压缩文字，减小文件大小
qq_38909255的博客
03-07 798
项目中如何使用font-spider提取文字，压缩文字，减小字体文件的大小。
字蛛的使用教程
05-18
字蛛的使用教程
使用font-spider解决ttf文件过大问题
qq_36523196的博客
07-06 841
在捣鼓个人网页时，有个模块的字体看着不是那么好看，便找了个觉得看着顺眼的字体下载了放在项目中，字体是变了，但是首次加载时，资源加载时间竟然超过了1分钟，优化势在必行。
前端性能优化之font-spider(字蛛)
qq_39441438的博客
03-28 2744
正常开发中，UI设计稿经常会出现一整张设计稿，某一个标题使用了特殊的字体。这种情况下，如果前端直接把UI给的字体文件整个引入时，文件大小可能在1-100M之间。这样子如果用户加载这个文件过久，加载成功后会导致页面因为字体文件的原因，发生抖动（重绘）。（网上很多人说字体文件会阻塞现成，博主通过F12，把网络改成低速3G后发现并没有阻塞页面的渲染，只是渲染出来的页面刚开始没有字体样式，等到把字体文件下载下来的时候，对应使用字体的节点会发生重绘现象）
字蛛（font-spider)使用
sun
04-04 2516
grunt 构建 安装 npm install grunt-font-spider --save-dev 书写css /*声明 WebFont*/ @font-face { font-family: 'pinghei'; src: url('../font/pinghei.eot'); src: url('../font/pinghei.eot?#font-spid...
自定义字体（艺术字）压缩 font-spider
weixin_42284117的博客
02-02 346
font-spider官方文档叫字蛛。 用font-spider压缩字体原理就是，将项目中用到的字体单独压缩，没有用到的字体不放入压缩文件中，使字体文件变小，所以此种方法就有一个弊端就是无法压缩动态生成的文字。 准备：node环境（可能是废话…） 具体过程如下： 一、全局下载font-spider npm install font-spider -g 二、新建一个文件夹，文件夹下新建index.html、index.css，并且将原字体文件放到文件夹下 在index.css声明该字体 @font-face
font-spider优化字体文件加载速度
唐僧洗头用飘柔
07-08 342
font-spider优化字体文件加载速度
html自定义字体,字蛛（font-spider）让你爱上 @font-face 网页自定义字体
weixin_30072693的博客
06-18 170
随着当前Web技术的日新月异，网页界面内容越来越丰富，让人眼花缭乱，其中就包括了网页中的各种自定义字体例如：一个注册页面的“注册会员”几个字CSS3引入的@font-face这一属性可以很好的解决这个问题，可以帮助我们非常灵活的使用一些特殊的字体，即使用户电脑里面没有安装这个字体，网页也可以显示。EOT字体是IE浏览器的首选格式，其他浏览器都不支持；其他浏览器更钟爱常见的TTF、SVG、WOFF基...
字蛛使用
amihui的博客
11-03 8539
先贴字蛛官网：http://font-spider.org/1、想要用到字蛛首先要安装node 或者有 git 也可以；2、安装好之后就开始字蛛的安装，git复制这句：npm install font-spider -g3、接着一大堆乱七八糟的不用看懂；打开你做好的html文件夹，字体记得建一个font文件夹放进去，和images、CSS文件夹并排，字体名称一定要换成字母的，你可以是中文缩写什么的。
spider-flow使用
09-07
Spider-Flow的使用步骤如下： 1. 安装配置：首先，用户需要安装Python和Spider-Flow框架，并进行相应的配置。 2. 创建项目：在Spider-Flow界面中，用户可以创建一个新的爬虫项目，并设置相关的参数和配置。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值