svg转css font

于 2023-04-16 21:00:00 发布
阅读量639 收藏 1
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44217954/article/details/130188083
版权

通过svg，转化为font字体，通过font-size去改变大小，color去改变颜色，然后通过class来引入图标。

原理是：我们css可以识别系统内的各种字体的，通过font-family来引入，所以我们也可以自定义一套字体用 @font-face，所以就有一种设想，我们把一整套icon当成字体库，每个字都有对应编码，也就是说每个图标都有对应的编码。

要转为font的css，这个网站可以自定义font https://icomoon.io/app/#/select,

6409cf1dc1c7313685b5c9ff2b6ed8f0.png

 

可以导入多选图片，也可以拖进去几张图片，一起上传

导进去之后可以看到出现了设计师做的图标，这时候要选中你要做出字体的svg图标

选中多少个下面的selection就有多少个，比如上面那张图的15个，点击右边的cenerate Font就可以跳到下面这个界面

3b337783856a9ae1371a6ee447538a7b.png

在这个界面可以修改每个图片的名字，以后就是class的名了，改完之后就点击download 

水色可可
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如何制作图标字体（如何将svg转换为css可用的图标字体）
RotatingBlock的博客
12-30 1万+
在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢
svg2font：将SVG转换为字体格式
02-05
svg2Font 将SVG转换为TTF / EOT / WOFF / WOFF2 / SVG格式。 注意：svg-> svgfont-> ttf ttf-> EOT ttf-> WOFF ttf-> WOFF2 ttf-> svg， ， Unicode字符平面映射 平面 始末字符值 中文名称 英文名称 0号平面 U + 0000-U + FFFF 基本多文种平面 基本多语言平面，简称BMP 1号平面 U + 10000-U + 1FFFF 多文种补充平面 补充多语言平面，简称SMP 2号平面 U + 20000-U + 2FFFF 表意文字补充平面 表意补充平面，简称SIP 3号
将svg编译成字体图标
u013992330的博客
05-27 3664
有时将svg图标编译成字体图标，可以更方便的来使用，下面就介绍如何将svg编译成字体图标 1. 使用npm安装svgtofont npm i svgtofont 2. 编译字体图标 const svgtofont = require("svgtofont"); svgtofont({ src: path.resolve(process.cwd(), "icon"), // svg 图标目录路径 dist: path.resolve(process.cwd(), "fonts"), /
svg转css font,svg转font字体方案
weixin_39623411的博客
08-03 1214
在我们做项目的时候，通常会有一些icon图标，如下图：这些图标，如果不跟设计师说，设计师会给png图。但是视觉规范里面，一般都会对这些图标加一些hover，active态，还会改变大小。如下图：所以一般来说这些图标有以下需求：可以修改大小，不要有锯齿修改颜色所以给png的话很难办到一张图可以做到以上的需求，一般会叫视觉出svg。通过svg，一般会有三种使用的方案：转化为font字体，通过font-...
如何将SVG图标转换为字体文件
djz917的博客
11-22 8534
1.打开网站https://icomoon.io/，进入的时候会有点卡，建议直接进下面的网站。 点击右上角的IcoMoon App图标，也可以直接进入https://icomoon.io/app/#/select 2.点击import Icoms上传SVG文件，或者直接选择网站内的图标 3.点击右下角的Generate Font生成字体文件 4.继续点击Download下载文件 下载后的...
icomoon图标的使用
热门推荐
宇宙的博客
07-05 2万+
早上听同事介绍icomoon的图标，自己上网查找用例，发现确实挺好用，只需在网址： https://icomoon.io/app/    上选择相应图标点击font设置，然后点击下载。将下载文件解压，然后将font文件夹和style.css拷贝到项目中，引用css即可，作为以后参考 转载了相关介绍：转载自：http://blog.csdn.net/u013938465/article/detai
svg-font:将svg文件转换为字体，将svg文件转换为字体。 FontForge脚本
03-13
svg2font ./src/build.sh svg图标转换为字体。 使用python脚本调用FontForge 请先安装FontForge。 也许您可以使用带有gulp插件gulp-iconfont / gulp-iconfont-css的yarn build构建。将字体添加到svg文件（2021/13/03...
CSS3 SVG文字填充动画特效特效代码
03-20
**CSS3 SVG文字填充动画特效详解** 在网页设计中，动态效果往往能为用户体验增色不少，CSS3 SVG文字填充动画特效就是其中一种创新且吸引眼球的技术。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形语言，...
基于 CSS 动画的 SVG 按钮实例代码
09-22
CSS 动画与 SVG 结合使用，能为按钮等界面元素带来丰富的视觉效果。本文将深入探讨如何利用 CSS 动画技术来实现 SVG 按钮的动态效果。 首先，SVG（可缩放矢量图形）是一种用于描述二维图形的标记语言，它支持动态...
@face-font 嵌入中文字体实例和ttf转换eot, woff, svg转换工具
05-09
找了一天终于找到了@face-font 嵌入中文字体用法和工具，网上转换要不是要钱就是转到了中文。终于找到了分开转换的工具，ttf转换eot, woff, svg转换工具，里面还有实例分享给大家。
svg代码与css代码互相转换，并压缩
06-29
svg代码与css代码互相转换，并压缩
encodeSVG:一个很棒的工具，用于将SVG图片编码为CSS背景图像代码
05-24
encodeSVG 通过将SVG图形编码，在css:background-image: url("data:image/svg+xml,encodeddSVG")或者border-image中使用SVG背景图片 此工具是学生时代写前端时候，将SVG图片encode为css background-image的小工具，后面域名已经莫得了，现在估计也没人在用这个工具了，留待以后整理 @todo 迁移到gitee 线上工具地址【传送门】: 用的方便还请给个star <template> <div> <h1>SVG图形编码工具</h1> 作者：ulooper@aliyun.com <p>通过将SVG图形编码，在css:background-image: url("data:image/svg+xml,encode")或者border-image中使用SVG背景图片</p> <div
svgs2fonts：npm-svgs2fonts。svg图标转字体图标库（svgs-> svg，ttf，eot，woff，woff2），nodejs
02-05
svgs2fonts svg图标转字体图标库（svgs-> svg，ttf，eot，woff，woff2）。 版本 1.0.4 安装 npm i -g svgs2fonts 验证 svgs2fonts -v 使用 svgs2fonts {{srcpath}} {{distpath}} --options 其中参数： srcpath：svg源文件路径（相对当前窗口环境），传“”时为当前窗口路径; distpath：导出路径，替换在源文件路径下； 例 svgs2fonts svg dist 节点js const svgs2fonts = require ( 'svgs2fonts'
icon font VS svg font
08-10
5. `svg-symbols.css`：这个文件可能是用于引用和展示SVG Font样式的CSS。 在实际开发中，选择Icon Font还是SVG Font，通常取决于项目需求。如果需要轻量级、快速加载和广泛的浏览器兼容性，Icon Font可能是更好的...
SVG转字体图标
11-26 461
SVG转字体图标 一. 问题？ SVG和字体图标的区别是什么？为什么要转换使用？ SVG如何转换字体图标？ 转换过程中遇到的问题有哪些？ 二. 解答 SVG和字体图标的区别以及转换字体图标的好处 SVG和字体图标都是矢量化图形 SVG（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是...
将svg图片转为字体图标
weixin_44771007的博客
05-14 1614
icomoon链接 通过icomoon将svg图片转为字体图标的步骤如下： 点击icomoon app按钮 点击import icons按钮，导入svg图 选中导入的svg图，点击右下角的generate font 在这个页面中，点击preferences可以修改字体图标名，前缀等等，点击get code可以查看字体图标的使用方法 点击download下载字体图标 下载并解压缩后根据demo.html查看使用方法，最后将文件拷贝到项目中使用 ...
svg转css font,css – 如何将.svg文件转换为字体？
weixin_30651345的博客
08-03 632
我在Stack Overflow上找到了两个相关的答案：不幸的是,这两者都不是真正的编码答案,这是我真正希望的(脚本转换的命令行实用程序,或者也许是某人可以编写这样的东西的API).尽管如此,通过结合这两个答案,我得到了我想要的东西.清理SVG(此步骤可能是可选的.)在自由软件程序InkScape中打开SVG.复制现有SVG并从FontForge Glyph模板创建一个新项目.粘贴到该模板中,标准...
svg转字体图标 并引入使用
weixin_41411644的博客
06-28 1144
记录svg图片转字体图标并引入到项目中使用
iconfont转成svg
最新发布
07-29
你可以使用在线转换工具或者借助一些库来将Iconfont转换成SVG格式。以下是一种常见的方法： 1. 在线转换工具： - 打开一个在线转换工具网站，例如icomoon.io或iconfont.cn。 - 选择你要转换的Iconfont文件，通常是一个包含字体和CSS的压缩文件（例如.zip或.ttf格式）。 - 上传文件到转换工具，并等待转换完成。 - 下载转换后的SVG文件。 2. 使用库进行转换： - 如果你是开发者，可以使用一些库来进行转换，例如fontmin、svgicons2svgfont等。 - 安装所选库，并按照其文档中的说明进行操作。 - 使用库提供的命令行工具或API来将Iconfont转换成SVG格式。 无论你选择哪种方法，确保在使用Iconfont之前了解其使用许可和版权信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值