下载FontForge

软件下载(支持win/mac):https://github.com/fontforge/fontforge

制作字体

使用完整Unicode字符

菜单File - Preferences 选项卡New Font - NewCharset:ISO 10646-1 (Unicode, Full)

配置字体信息

菜单Element>Font info 选项卡PS Names 里面前5个编辑下就好了

关于Family Name

Family Name对应网页调用的font-family

获取汉子Unicode编码

https://tool.chinaz.com/tools/unicode.aspx 在线转换,只读第一串,u后面增加“+”号 如:乐>\u4e50\u000d\u000a>u+4e50

通过js直接转换

function encodeUnicode(str) {
    var data = {};
    for (var i=0;i<str.length;i++) {
        data[str[i]] = 'u+' + ('00' + str.charCodeAt(i).toString(16)).slice(-4);
    }
    console.table(data);
}

encodeUnicode('乐于助人')

打开浏览器【审查元素】或【检查】或【开发者工具】,输入到Console后回车

搜索文字

快捷键:ctrl+shift+>,然后输入需要编辑字母或者Unicode码 双击文字下面的大框(默认空白)可以进行编辑,在编辑页面可以直接使用搜索功能编辑其他文字

保存工程源文件

菜单File-Save as…

生成字体(不保存工程文件生成的字体可以再次编辑)

菜单File-Generate Font,默认会创建ttf,创建ttc可以选菜单下面选项

网页引用

@font-face {
font-family: shscn-el;
src:url('static/font/shscn-el.ttf')
/*,url('font/tonjay-web.woff')*/
/*,url('font/tonjay-web.eot');*/
}
body{font-family: shscn-el;}

shscn-el替换你的字体名称,这里只试过ttf格式

相关链接

字体设计教程

图文教程:https://imjad.cn/archives/lab/make-a-custom-font-for-the-title-of-the-website

一个视频教程:如何制作一款属于自己的字体?(FontForge字体制作教程)](https://www.bilibili.com/video/av22009352/?p=2)


回到顶部

Copyright © 2017-2024 1px.run (像素教程) Distributed by an MIT license.

Site updated at 2024-04-23 12:45