icon-font-generator 的使用

最新推荐文章于 2024-04-22 10:05:33 发布
最新推荐文章于 2024-04-22 10:05:33 发布
阅读量529 收藏 1
点赞数
原文链接：https://juejin.im/post/5cecfe08f265da1b763881be
版权

像素完美（Pixel Perfection）、分辨率无关（Resolution Independent）和多平台体验一致性是设计师们的追求。 可访问性（Accessability）、加载性能和重构灵活性是前端工程师们关心的主题。

由于在互联网上没有找到该命令的博文，所以在此记录一下使用过程和踩坑记录。

准备工作

  1. 首先，进入npm官方网站，找到icon-font-generator的使用介绍 www.npmjs.com/package/ico…

接着往下翻，找到该命令的实例和使用命令。

打开git命令下载icon-font-generator

准备工作大致已经完成，我们现在去阿里巴巴矢量图标图下载几张svg图片存放到文件夹下，然后执行脚本，

我们在icon_dist就可以看到生成的文件

打开icon.html，我们就可以预览可以使用的图标

使用

最简单的使用流程是：

  1. 将icon.css引入到index.html中
  2. css中输入 "icon icon-文件名"
<!DOCTYPE html>
<html>
<head>
	<title>测试内容</title>
	<link rel="stylesheet" type="text/css" href="./icon_dist/icons.css">
</head>
<body>
	<i class="icon icon-send"></i>
</body>
</html>
复制代码

在浏览器中打开index.html：

踩坑记录：

  • svg图片必须是1024*1024的,有两种方式可以实现

    1>要么是下载的时候直接更改大小

2> 代码层面更改 就是直接更改svg的代码为1024

  • 如果执行package.json中的脚本时,提示命令找不到。那么此时跟操作系统有关系。因为在不同的操作系统中指定的是物理路径。
  • 每次添加一个svg时，都必须重新执行一遍命令
  • 如果svg图片不是1024，那么编译后的css会错乱
Linux????? Mr.Liyz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Bitmap font generator工具生成fnt文件
Bubble157的博客
09-18 2507
我们平常开发中，为了能动态显示好看的字体，经常需要使用艺术字，一般是一个png,一个fnt后缀文件。 那么我们怎么通过Bitmap font generator这个工具生成我们需要的fnt文件呢? (1)针对真彩色的图形，我们要做一些设定，点击"Options"->“Export options” 在弹出的窗口中，选择位深度设置为32位，导出的纹理材质为PNG（红框中的选项） (2)然后，点击"Edit"->"(Un)Select all chars"，取消选择所有字符。因为我们将在后边导入需
icon_font_generator:FluFlutter图标字体生成器
05-06
Flutter Icon字体生成器 将所有* .svg图标从dir转换为icon-font（.ttf），并生成与flutter兼容的dart类。 NodeJs包的抽象层icon-font-generator 要求 Node.JS v11 + 安装： $ pub global activate icon_font_generator 参数： * - 必需的 --from *-输入svg的目录 --out-font *-输出图标的字体路径（至文件，例如：lib / font.ttf） --out-flutter *-输出颤动图标类（到文件，例如：lib / icons.dart） --class-name *-类名也是pubspec.yaml中使用的字体名称（作为字体名称） --height固定的字体高度值，默认值：512 --ascent偏移量应用于基线，默认值：240 -
iconfont-generator：用于网络和小型程序的绅士iconfont
02-04
绅士iconfont用于Web和小程序 从assets/icons目录添加，编辑或删除svg，建筑物将自动启动并生成字体文件。 特征 自动生成.eot，.svg，.ttf，.woff文件 自动生成.css文件，包括字体base64 css文件 自动将svg符号生成到js文件中 自动生成图标预览文件并启动服务器进行预览 如何使用 $ git colne git@github.com:semdy/iconfont-generator.git $ cd iconfont-generator $ npm install $ npm start or npm run build 现场演示
Iconfonter: 自定义图标字体生成器的利器
gitblog_00062的博客
04-22 401
Iconfonter: 自定义图标字体生成器的利器 项目地址:https://gitcode.com/fjc0k/Iconfonter Iconfonter 是一个开源的在线工具，它允许开发者和设计师轻松地创建自己的图标字体库。通过将SVG图标转换为Webfont格式，Iconfonter提供了高度定制化和优化的解决方案，以满足各种前端开发需求。 技术分析 Iconfonter 使用了HTML、C...
fontcreator制作iconfont
jesscia_p的专栏
04-13 3205
详细版如何使用fontcreator制作iconfont
font-generator:生成ttf字体和Icons.js以供React Native使用
04-30
字体生成器 生成要在React或React Native项目上使用的TTF字体 它还会生成带有命名代码点JavaScript文件。 安装 npm i -g @entria/font-generator 用法 font-generator --fontName MyFont --dest outpath --iconsGlob ./icons/ ** / * .svg 像这样使用 import React , { PureComponent } from 'react' ; import { Text , StyleSheet } from 'react-native' ; import MyFontIcons from './MyFont' ; class MyFontIcon extends PureComponent { setNativeProps ( nativeProps )
font-icon-generator:从字体生成puml，png和svg的代码
05-01
字体图标生成器介绍...安装视窗npm install --global --production windows-build-toolsLinux apt install librsvg2-bin openjdk-11-jre graphviz建造mkdir .tmp -pcd .tmpgit clone git@github....
bundler-icon-server:从诸如Font Awesome之类的图标字体生成PNG图标
05-13
） 它使用Python和Flask构建，旨在在适当的Web服务器后面作为WSGI应用程序运行。安装克隆存储库，然后在根目录中运行setup.sh 。 这将创建virtualenv并使用pip安装必要的依赖项（来自requirements.txt ）。 注意： ...
vue-icon-component-generator:根据ttf文件生成vue3组件
03-27
在使用`vue-icon-component-generator`之前，你需要确保已安装了Vue CLI（命令行接口），这是Vue.js官方提供的一个快速、便捷地创建和管理项目的工作流工具。此外，你也需要安装Python环境，并通过pip（Python的包...
nuxt-fontagon:尝试将svg轻松转换为字体，以自动制作图标字体。 Nuxt模块上提供了Icon-Font生成器Fontagon
05-28
Icon-Font生成器在Nuxt模块上可用。信息 :bell: 该软件包已从nuxt-iconfont-generator重命名为nuxt-fontagon 特征√在构建时自动将svg转换为字体文件√根据svg文件名，根据需要创建CSS和Stylus ， SASS和LESS文件 :...
点阵字库生成工具font-generator&ts3;
11-20
两款点阵字库生成小工具ts3、fontgenerator打包，不知道有没有人像我一样找可用转换工具找了好久，注意是点阵非矢量字库(常用于单片机)，可转换GBK/GB2312/UNICODE/BIG5等常用编码格式，分享给需要的人。ts3压缩包里有破解器，如果有的系统报告病毒或自动杀掉请关闭防火墙，否则生成的字库不完整。
instagram-fonts-generator-script-download:instagram字体生成器源代码，instagram字体生成器html代码，instagram字体生成器javascript代码，instagram字体生成器代码，instagram字体生成器，时尚的文本生成器源，时尚的文本生成器javascript代码请参见此处的演示clcik >>>>>>>>> >>>>>>-html source download
03-24
instagram的字体生成器脚本下载 instagram字体生成器源代码，instagram字体生成器html代码，instagram字体生成器javascript代码，instagram字体生成器代码，instagram字体生成器，时尚的文本生成器源，时尚的文本生成器javascript代码请参见此处的演示clcik >>>>>>>>> >>>>>>
针对图片字体，为Bitmap Font Generator自动生成配置文件
10-14
功能：针对图片字体，为Bitmap Font Generator自动生成配置文件 用法：1、制作图片，单个文字图片的命名必须以图片名字命名。如：图片内容为“1”命名为“1.png”，图片内容为“万”命名为“万.png” 2、将该软件放在图片所在文件夹下。 3、运行该软件。①提示“请输入字体大小（如24）”，输入字体的大小，然后回车；②提示“请输入画布大小（要求2的指数次方，如256）”，输入画布的大小，然后回车。 4、打开Bitmap Font Generator软件，打开Options->Load configuration，找到当前路径下的peizhi.bmfc文件。 5、打开Options->Save bitmap font as ... ，输入需要保存的文件名。 提示：在第三步的时候，会生成一个peizhi.bmfc文件。 第四步和第五步是通过本软件生成的配置文件，通过Bitmap Font Generator导出自定义字体。
iconfont.woff
07-03
H5 html +css移动电商图标，不是很全面，用于仿京东、淘宝、苏宁
Font-Generator:从少量样本创建字体集
04-06
字体生成器 安装 $ git clone git@github.com:tomoino/Font-Generator.git 用法 设置 $ cd Font-Generator $ sh docker/build.sh $ sh docker/run.sh $ sh docker/exec.sh 数据集 通过使用以下存储库制作数据集。 $ git clone git@github.com:tomoino/Font-Image-Dataset.git 训练 $ python train_gan.py project=glyph_gan 检查结果 您可以使用MLflow来检查实验结果。 从浏览器访问 。 如有必要，您可以编辑env.sh来更改端口。 结构 $ tree -I " datasets|mlruns|__pycache__|outputs|multirun " . ├── READ
前端工程师如何制作icon-font
如是我闻的博客
03-24 1137
制作背景：公司项目需要最大限度减少前端图片占用内存量（PC端+手机端图片占用总大小 Icon-font的优点： Ø  纯色图片改成icon-font图标字体可以像操作文字那样操作图片； Ø  基于SVG图片，放大后图片不失真； Ø  占用空间小，制作成font-face字体后一个图标平均占用内存仅有2kb左右（若无需兼容ios4.1-则一张图片占用的空间 Icon-font的缺点： Ø
fontello：超级好用的icon fonts图标在线制作网站
06-02 963
fontello：超级好用的icon fonts图标在线制作网站 window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(docume...
font-awesome-polymer-icons-generator:生成 Polymercore-icons 兼容的 Font Awesome 图标集
07-05
git clone https://github.com/philya/font-awesome-polymer-icons-generator.git pfa cd pfa mkvirtualenv pfa pip install -r requirements.pip 用法 ./makefaicons.py <iconset> [icon_id1] [icon_id2] ... ...
使用 typeorm-model-generator
最新发布
05-20
typeorm-model-generator 是一个自动生成 TypeScript 类和 TypeORM 模型的命令行工具，它能够自动解析数据库的结构，并生成对应的 TypeScript 代码。使用 typeorm-model-generator，你可以在几秒钟内生成 TypeORM 实体类，这些实体类可以直接用于与数据库进行交互。 要使用 typeorm-model-generator，你需要安装它并配置相关选项，比如数据库类型、数据库连接信息、生成文件路径等等。你可以在命令行中输入 "typeorm-model-generator --help" 来查看所有可用的选项。在完成配置后，你可以通过以下命令来生成 TypeScript 类和 TypeORM 模型： typeorm-model-generator -h <hostname> -d <database> -u <username> -x <password> -e <engine> -o <outputDir> 其中，<hostname> 表示数据库的主机名，<database> 表示要连接的数据库名称，<username> 和 <password> 表示登录数据库的用户名和密码，<engine> 表示数据库引擎的类型（例如 mysql、postgres 等），<outputDir> 表示生成文件的输出路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值