字蛛 自定义字体

可能 网站中会用到一些漂亮的文字,又不想用图片,

这样可以用自定义字体,

用的工具是 字蛛http://font-spider.org/

字蛛工具 依赖 nodeJs,

先安装好 NodeJS,然后执行安装字蛛:

npm install font-spider -g

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

以下都是必须的,字蛛生成的字体是文件中有的文字,第一步 声明@font-face

第二步要使用指定的字体

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

第三步 在根目录打开命令 shift+右键  选 在此处打开命令行

font-spider D:\Front\...\...\...html

完成!
时间: 2024-08-26 17:01:14

字蛛 自定义字体的相关文章

精简TTF字体、汉字字体瘦身 FontPruner(非字蛛)

网上比应用比较多的 字蛛 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虚拟机 step1:安装 pyt

中文字体【字蛛】的使用

官网:http://font-spider.org/ 安装字蛛需要先安装node. 先安装好 NodeJS,然后执行: npm install font-spider -g 构建插件:grunt-font-spider | gulp-font-spider 在 CSS 中使用 WebFont: /*声明 WebFont*/ @font-face { font-family: 'pinghei'; src: url('../font/pinghei.eot'); src: url('../font

字体压缩 - 字蛛 font-spider

个人博客:柚子青年. 原文链接:字体压缩 - 字蛛 font-spider 安装 font-spider npm install font-spider index.html <div class="content">0123456789</div> index.css @font-face { font-family: 'DINAlternateBold'; src: url('./font/DIN-Alternate-Bold.ttf') } .conten

使用自定义字体相关问题

1.自定义字体生成: 自定义字体一般只有ttf格式的,所以需要根据ttf文件转换成我们需要的eot.woff.svg文件,以适用各个浏览器,如图参考: 转换工具: FontsQuirrel.onlinefontconverter ttf2eot:https://github.com/fontello/ttf2eot ttf2woff:https://github.com/fontello/ttf2woff ttf2svg:https://github.com/qdsang/ttf2svg 字体下

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

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

字蛛的使用及说明

web字体体积大导致加载过慢,对于前端来说是一大需要解决的问题,作为一个前端小白,看不懂文档也是个通病,不过还是花了一些时间和朋友一起研究了这个问题,并找到了解决方案就是"字蛛". 字蛛网站:http://font-spider.orgGitHub源码:https://github.com/aui/font-s... 字蛛简介: 官方的说法 "字蛛是一款中文字体压缩器".字蛛通过分析本地 CSS 与 HTML 文件 获取 WebFont 中没有使用的字符,并将这些字

自定义字体之BMFont的使用

***************************************转载请注明出处:http://blog.csdn.net/lttree******************************************* 之前cocos2d-x文章用到了自定义字体的BMFont软件,不会用,看网上东东也没怎么看懂,自己摸索了半天,终于差不多啦,现在就来分享一下,如有错误之处,欢迎指正,Thank U~ 这个软件下载地址:http://download.csdn.net/detail

Android实现自定义字体

介绍 最近在看开源项目的时候,发现里面涉及到了自定义字体,虽然自己目前还用不到,但是动手demo笔记记录一下还是有必要的,没准哪天需要到这个功能. 原理 1.其实实现起来非常简单,主要是用到了Typeface这个类,通过加载assets里的ttf字体,调用View.setTypeface实现原生字体替换. 默认自带样式 public static final int NORMAL = 0; public static final int BOLD = 1; public static final

iOS使用自定义字体的方法(内置和任意下载ttf\otf\ttc字体文件)

最近做了个有关阅读的应用,使用了自定义字体,学习了一下这方面的知识. 1.首先是最简单也普遍的做法,打包内置字符库文件: 把字体库文件添加到工程,如font1.ttf添加到工程,然后在工程plist添加一项Fonts provided by application,这是个数组,然后添加key item1,value就是刚才说的font1.ttf,如图: 那么在工程里就可以直接使用这个字体,直接用 + (UIFont *)fontWithName:(NSString *)fontName size