svg转css font,css – 如何将.svg文件转换为字体？

我在Stack Overflow上找到了两个相关的答案：

不幸的是,这两者都不是真正的编码答案,这是我真正希望的(脚本转换的命令行实用程序,或者也许是某人可以编写这样的东西的API).

尽管如此,通过结合这两个答案,我得到了我想要的东西.

清理SVG

(此步骤可能是可选的.)在自由软件程序InkScape中打开SVG.复制现有SVG并从FontForge Glyph模板创建一个新项目.粘贴到该模板中,标准化外观,大小和位置,并保存为PLAIN SVG,每个字符一个文件(“字形”).

将SVG转换为字体

使用IcoMoon

IcoMoon是一个相当简单的工具.单击页面顶部的紫色“导入图标”按钮以导入每个自定义SVG字形.然后在设置的首选项上单击“获取信息”,这样您就可以为该组命名并为其提供一些元数据.使用“编辑”工具(铅笔图标)并单击每个字形以获得尺寸和间距恰到好处.

完成后,选择字体中所需的所有字形,然后按页面底部的“生成字体”按钮.在结果屏幕上,您可以将每个字形映射到unicode字符.在右侧,您可以键入或粘贴一个字符,或者在左侧,您可以输入其十六进制代码.像GNOME Character Map(适用于Linux)或Windows Character Map或Mac OS Character Palette这样的程序可以帮助您找到适合您的字形的代码.

现在按屏幕顶部的“首选项”按钮(或右下角的齿轮)并最终确定新字体的名称和元数据,然后按右下角的“下载”.您将获得一个Fontname.zip文件,其中包含一堆使用建议以及字体文件本身.

迭代

我发现尺寸和间距很难正确(我正在写信).我一直在迭代IcoMoon,安装字体,并将我的字母与字母相似(使用文字处理器).尺寸调整很容易,但间距不是那么容易(我甚至没有弄乱ligatures或kerning！).不要忘记某些系统在安装新字体后需要刷新字体缓存(在Linux上,这是Fontconfig的fc-cache)

验证字体

您可能还想验证您的字体. Font Squirrel是一项在线服务,可让您这样做,提供更正和使用技巧.我认为IcoMoon已经这样做了,所以也许这只是用于FontForge创作.

svg转css font,css – 如何将.svg文件转换为字体？相关推荐

svg转css font,svg转font字体方案
在我们做项目的时候,通常会有一些icon图标,如下图: 这些图标,如果不跟设计师说,设计师会给png图.但是视觉规范里面,一般都会对这些图标加一些hover,active态,还会改变大小.如下图: 所 ...
插入网络CSS矢量图标、网络SVG矢量图标
 <link rel="stylesheet" href="https://use.fontawesome.com/re ...
php生成svg图片不显示,css svg不显示不出来怎么办
css svg不显示不出来的解决办法:1.使用标签引入svg文件:2.使用标签引入svg文件:3.使用标签引入svg文件. 本教程操作环境:Dell G3电脑.Windows7系统.HTML5& ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
css svg使用_使用CSS使SVG响应
css svg使用 An SVG can be embedded on a web page in many ways; one of which is embedding it inline in ...
html svg无法显示,HTML/CSS svg 怎么显示不出来?
HTML/CSS svg 怎么显示不出来? html/CSS svg 怎么显示不出来? 在 HTML 中引入 svg 文件为何不显示? 下面给大家介绍一下原因和解决方案. 有一定的参考价值, 有需要的 ...
html svg 背景图片,在CSS背景图片中使用svg的用法介绍（附示例）
本篇文章给大家带来的内容是关于在CSS背景图片中使用svg的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在CSS背景图片中使用SVG,可以使用css backg ...
Css Font 详细研究
2019独角兽企业重金招聘Python工程师标准>>> 在设计自己博客主页的时候想修改下字体,结果发现自己对字体(css font)的了解只是一知半解,属于翻书医生的水平,呵呵.就细 ...
【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
文章目录一. CSS 2.0手册使用 1. 按照文档层次查找 2. 搜索关键字查找文档二. font-weight 字体粗细设置 1. 语法简介 2. 代码示例三. font-style 字体斜 ...

svg转css font,css – 如何将.svg文件转换为字体？

svg转css font,css – 如何将.svg文件转换为字体？相关推荐

最新文章

热门文章