1.準備一個字體庫,本案例使用的字體庫本墨悠圓的連接:http://www.zhaozi.cn/html/fonts/china/benmo/2019-02-01/25085.html,爲輸入方便重命名成:bmyy.ttfhtml
2.從字體庫提取字符須要用到fonttoolsgit
pip install fonttools
pyftsubset <字體文件> --text=<須要的字形> --output-file=<輸出>
還有些其餘工具,見資料:https://github.com/fonttools/fonttoolsgithub
pyftsubset D:\font\bmyy.ttf --text=「1234567890」
注意命令在CMD執行的,會在字體相同文件夾生成一個提取出來的字體bmyy.subset.ttf 瀏覽器
網站只能上傳svg格式,須要把ttf轉成svg,連接:https://cloudconvert.com/ttf-to-svgsvg
用http://fontello.com/建立字體,將svg直接拖入網頁工具
選擇0~9字符測試
選customize codes對字符從新編碼字體
unicode能夠隨便改,但須要記住unicode和數字的對應關係網站
預覽見數字上面一欄,修改完成後下載新字體,字體在font文件夾裏。編碼
fontello其餘用法見:https://github.com/fontello/fontello/wiki/How-to-create-my-own-font
自定義的新字體,數字用unicode替代了
用@font-face要定義字體的名稱如new_font,而後定義字體文件的url。
<style>
@font-face { font-family:'new_font';
src: url('D:/font/new_font.woff') ,url('D:/font/new_font.eot'); /* IE9 */ }
.new_font
{
font-family:myFirstFont;
}
</style>
寫一個html事例
<html> <head> <title>new font</title> <meta charset="utf-8" lang="zh"> <style> @font-face { font-family: 'new_font'; src: url('D:/font/new_font.woff') } .new_font { font-family: "new_font"; } </style> </head> <body> <div> <span class="new_font">啦啦啦</span> </div> </body> </html>
在瀏覽器上顯示正常
右鍵檢查,數字部分變成方塊