在线制作自定义字体

StevenZhao StevenZhao     2022-08-08     1118

关键词:

 

本文介绍如何使用现有的免费工具制作自定义的字体。

 

我们将会用到下面几个免费的在线工具

 

1) IconMoon ( https://icomoon.io/app/#/select/font )

IconMoon是一个优秀的免费创建自定网页图标字体的工具。提供一个在线的字体制作APP,也提供离线版的Chrome插件, 同时还提供免费开源的图标供大家选用。支持上传SVG格式的图标或者单个字符。

2)EverythingFonts ( https://everythingfonts.com/ttf-to-svg )

EverythingFonts提供了丰富的字体转换工具,可以把ttf,otf,wotf等字体转换为SVG格式。

Fontfacegen(http://fontfacegen.com/ttf-to-svg-converter)也提供了类似的转换功能。

使用上面两个工具我们就能够把自己喜欢的开源字符“搬”到我们的自定义字体中去。

 

第一步:使用字体转换工具把TTF转成SVG格式。

有一些开源的字体已经提供了SVG格式(例如:fontawesome-webfont.svg)可以下后面的步骤中直接上传,就不需要字体转换这一步了。当我们找不到SVG格式的字体的时候就比较适合用到这个工具。

 

EverythingFonts 的字体转换器使用比较简单,

a) 打开网页,确认没有版权问题,勾选“The EULAs of the font allow this conversion: ”

b) 后点蓝色的“Pickup Font File”按钮从本地上传TTF字体文件。

c) 然后点绿色的“Convert”按钮就可以下载转换后的SVG文件了。

image

转换后的SVG文件是包含字符编码的,在后面我们导入之后别的字体的A也就会是我们自定义字体的A。

 

第二步:开始制作我们自己的字体

【1】直接在浏览器打开Iconmoon App( https://icomoon.io/app/#/select/font )

打开之后免费的iconmoon图标已经显示在你面前了,可以直接选用也可以点击最后面的“Add Icons From Library…”链接去图标库里面去选。

image

【2】新建一个空的图标集,这样便于我们分类选用。

image

【4】使用图标集旁边的“import to set”菜单项,导入我们之前制作(或者开源)的.svg文件。
也可以在这里上传你自己自作的SVG单个字符。

image

image

【5】编辑字符

如果是从别的字体导入过来的,有时候会发现实际排版会出现字符宽度不一的问题,
这样的话我们就需要通过iconmoon的编辑功能进行修改。对于每个导入的每个字符,最好能在这里检查一下。

a) 按下工具栏上的编辑按钮。然后点击需要修改的字符。

image

b)   在弹出的编辑界面我们可以对字符进行编辑和检查

image

 

建议先勾选右上角“Gride”并且点击旁边数字选择16x16的网格。

这样编辑器会显示一个网格,非常便于我们调整字体的位置和宽度。

 

字符编辑功能按钮在字符的左下角位置。image

image 旋转,翻转字符

image  位置调整

image  缩放

image  宽度和对齐

 

我们最常用到的几个功能是位置调整功能和宽度调节功能, 因为导入的字体通常会出现两个问题,

 

一是和其他字符基线高度不同,放在一起会出现自定义字符偏高或者偏低的现象。

我们在这里使用位置调整工具,借助网格就能够修复这个问题。

 

二是字符宽度不一,造成个别字符过宽,文字排版显得很乱影响阅读。

在这里我们可以使用宽度调节按钮,增加或者减少字符宽度来修正这个问题。

image

 

如果你需要更加复杂以及精确的修改,建议使用最下面的“Download(SVG)”按钮下载这个对应字符的SVG文件,然后使用矢量绘图软件(例如AI)进行修改完成之后,再用“Replace”按钮单独上传修改好的SVG字符进行替换。

image

 

【6】生成自定义字体

在页面顶部按下选择按钮,切换的选择状态。然后选中你要导出的字符。

image

也可以使用每个自定义字符集右边的“Select All  / Deselect ”快速进行选择。

点击页面最下端的“Generate Font ”按钮就可以生成自定义的字体了。

image

 

在这个界面中你可以看到每个字体的字符编码

image

把鼠标放到字符编码上就会出现“<> Get Code” 链接。你就可以看到我们在HTML页面上是可以怎么使用这个字符的。

image

一共有三种使用方式:

  • 直接使用引入的class(需要在页面上引用下载的CSS文件)
    <span class="icon-exclam"></span> 
  • 在CSS使用
    .icon-exclam:before {
      content: "\21";
    }
  • 直接使用HTML实体编码
    &#x21;

【7】 下载字体。

直接点击右下角的“download”按钮就可以下载自定义的字体了。

下载的是个ZIP包,里面包含下面的文件。

image

  • fonts文件夹 下面是生成的字体文件,是在网页中使用自定义字体必需要用到的。
  • style.css      是示例CSS,包含了定义字体的CSS代码,你可以复制到自己的CSS文件中也可以直接使用。
  • demo.html   页面是每个字符的编码和示例。查查这个文件可以方便你在HTML页面中使用这些自定义字符。
  • select.json   这个文件比较重要,它包含了这个自定义字体的所有信息。

【8】再次修改

select.json 文件包含了这个字符集里面所有字符的全部信息。

当我们发现有个别字符需要修改的时候,我们可以直接在 IconMoon APP中导入这个JSON文件(import to set)。然后再对个别字符进行修改。

image

 

编辑select.json 文件,我们还可以对字符编码进行修改,例如我们想要在E600这个区间放导航图标,在E900这个区间放统计图标。把不同类别的图标区分开来。我们就可以通过编辑这个文件来实现。

在select.json文件中,每一个字符都是一个JSON对象。拥有完全相同的结构。
icon\paths  属性及时SVG的路径值。
properties\code 属性就是十进制的Unicode字符编码。
我们只需要把对应的16进制Unicode编码(E900, E800之类)转换为十进制填写到这里。
然后再导入 –>生成 —>下载就可以使用新的Unicode编码了。

image

 

以上是我在实际应用中的一点经验,希望能对大家有所帮助。

RuntimeException:无法制作本机字体或自定义 TextView 加载字体的内存泄漏

】RuntimeException:无法制作本机字体或自定义TextView加载字体的内存泄漏【英文标题】:RuntimeException:nativetypefacecannotbemadeormemoryleakforcustomTextViewloadingfont【发布时间】:2014-01-2310:13:50【问题描述】:我的代码中存在一个巨大的问题... 查看详情

如何制作自定义 TextView?

】如何制作自定义TextView?【英文标题】:HowtomakeacustomTextView?【发布时间】:2012-03-1715:40:21【问题描述】:我正在尝试创建一个自定义文本视图,该视图具有从给定路径设置的字体。请提供任何示例以及如何使用更少的代码来实... 查看详情

unity使用bmfont制作位图字体

介绍在游戏中制作中,我们往往会遇到自定义字体的情况,但是unity自带的字体Arial,无法满足我们对字体的需求。虽然我们可以导入字体,但是并不一定符合我们的需要,这个时候就需要使用自定义字体来显示某些东西以达到... 查看详情

WPF UserControl vb.net 不会显示自定义字体系列

...描述】:我不熟悉VB.net窗口窗体中的WPF互操作性。我正在制作一个Windows窗体应用程序,我正在尝试使用使用自定义字体系列的ElementHost添加自定义用户控件。我创建了一个内部带有标签的自定义按 查看详情

在 iOS 中使用 Phonegap Canvas 自定义字体

...13-03-2202:38:46【问题描述】:我正在尝试在iOS下的Phonegap中制作自定义字体。我遵循了几个教程并阅读了有关StackOverflow的所有相关问题,但即使我仔细检查了所有内容,我仍然无法正确回答。这是字体:http://www.dafont.com/m04fat 查看详情

批处理文件中的自定义字体[关闭]

...布时间】:2022-01-0705:24:41【问题描述】:我目前正在批量制作文本用户界面/TUI。我希望命令提示符(控制台)中的字体与默认的Windows字体完全相同,并且我希望在不更改注册表的情况下这样做。这可能吗?(我现在无法提供调... 查看详情

图标字体制作

...网后,点击icoMoonApp按钮,然后点击ImportIcons按钮,将需要制作的icon文件导出。生成图片后鼠标选中所有小图标,然后点击右下角的GenerateFont来生成字体。 然后可以通过GetCode来查询如何使用这些图标。点击Preferences可以自定... 查看详情

senchtouch自定义小图标(转)

...义图标的方法:首先需要生成图标字体。有许多网站提供在线生成图标字体的功能,比如IcoMoon,通过这个网站,你可以选择自己需要的图标,然后打包下载下来。 1、进入IcoMoon,看到如下图的页面,点击"CustomBuiltandCrispIconFon... 查看详情

用于设置自定义字体的自定义字体的内存泄漏

】用于设置自定义字体的自定义字体的内存泄漏【英文标题】:Memoryleakswithcustomfontforsetcustomfont【发布时间】:2013-05-2921:50:51【问题描述】:以下用于设置自定义字体的代码会降低我的整个应用程序的速度。如何修改它以避免内... 查看详情

如何为没有自定义字体的用户下载自定义字体? [复制]

】如何为没有自定义字体的用户下载自定义字体?[复制]【英文标题】:Howtodownloadcustomfontforuserswhodon\'thaveit?[duplicate]【发布时间】:2012-12-2917:23:09【问题描述】:可能重复:Howtoaddsomenon-standardfonttoawebsite?一位客户向我发送了一个... 查看详情

lvgl显示中文和自定义图标(代码片段)

lvgl显示中文和自定义图标显示中文制作字库lvgl字库在线制作网址https://lvgl.io/tools/fontconverter下面以制作“按钮”这两个汉字字库为例首先选择一个字体文件可以在网上找,也可以去电脑C:\\Windows\\Fonts里挑一个顺眼的确定要转... 查看详情

博客园自定义地址栏logo

...选自己喜欢的图片就可以。二、然后制作成icon图标 在线制作icon图标网站:http://www.bitbug.net/ 三、上传至博客园文件中四、将以下代码复制到页脚Html中<scripttype="text/javascript"language="javascript" 查看详情

设置自定义字体

】设置自定义字体【英文标题】:Settingcustomfont【发布时间】:2012-11-2222:32:41【问题描述】:我正在尝试在我的程序中将自定义字体(bilboregular.ttf)设置为2个jLabels但是字体没有被成功加载。这里是主要的方法调用://thisshouldworkifth... 查看详情

iOS自定义字体[重复]

】iOS自定义字体[重复]【英文标题】:iOSCustomFonts[duplicate]【发布时间】:2011-11-0604:16:33【问题描述】:可能重复:CanIembedacustomfontinaniPhoneapplication?我正在创建一个标签,我需要它来使用自定义字体或Tahoma。我在我的Mac和IB中安装... 查看详情

未使用 tcpdf 自定义字体

】未使用tcpdf自定义字体【英文标题】:tcpdfcustomfontisnotbeingused【发布时间】:2013-07-2706:12:04【问题描述】:我正在使用TCPDF库通过PHP生成PDF文件。我想使用自定义字体,所以我使用addTTFfontmethod添加我的自定义TrueType字体文件。我... 查看详情

自定义字体的字体大小

】自定义字体的字体大小【英文标题】:Fontsizewithcustomfont【发布时间】:2014-03-0922:06:42【问题描述】:所以我得到了我的图像,甚至还有一些文字。我尝试加载字体并且它有效,但我该如何选择字体大小?我的文本代码如下。im... 查看详情

css在线字体库,外部字体的引用方法@font-face

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我... 查看详情

如何为uilabel使用自定义字体[重复]

】如何为uilabel使用自定义字体[重复]【英文标题】:howtousecustomfontforuilabel[duplicate]【发布时间】:2014-01-0500:17:45【问题描述】:嗨,我正在使用自定义字体xcode5。它的字体系列名称是“AlegreSans”我在网上遵循了许多在xcode中使用... 查看详情