Skip to content

convertSvg/svg2font

Repository files navigation

svg2Font

Converts SVG to TTF/EOT/WOFF/WOFF2/SVG format.

Note: svg -> svgfont -> ttf ttf -> EOT ttf -> WOFF ttf -> WOFF2 ttf -> svg,DominantBaselineProperty, FontElementAscentAttribute

Unicode字符平面映射

平面 始末字符值 中文名称 英文名称
0号平面 U+0000 - U+FFFF 基本多文种平面 Basic Multilingual Plane,简称BMP
1号平面 U+10000 - U+1FFFF 多文种补充平面 Supplementary Multilingual Plane,简称SMP
2号平面 U+20000 - U+2FFFF 表意文字补充平面 Supplementary Ideographic Plane,简称SIP
3号平面 U+30000 - U+3FFFF 表意文字第三平面(未正式使用[1] Tertiary Ideographic Plane,简称TIP
4号平面 至 13号平面 U+40000 - U+DFFFF (尚未使用)
14号平面 U+E0000 - U+EFFFF 特别用途补充平面 Supplementary Special-purpose Plane,简称SSP
15号平面 U+F0000 - U+FFFFF 保留作为私人使用区(A区)[2] Private Use Area-A,简称PUA-A
16号平面 U+100000 - U+10FFFF 保留作为私人使用区(B区)[2] Private Use Area-B,简称PUA-B

Unicode 字符三个私人使用区(Private Use Areas):一个在基本多语言平面(U+E000-U+F8FF)中,另外两个几乎包含了整个第15和第16平面(分别为U+F0000-U+FFFFD,U+100000-U+10FFFD)

ie下面渲染不出unicode,使用16进制unicode的时候 加上;号,否则ie无法将它解析。10进制的没这个问题,现在大部分字体都是使用16进制标志的,主要是为了方便移动端,还有css3的那种写法。

Install

npm install svg-to-fonts

Usage

const { svg2Font, Font, writeToFile } = require('svg-to-fonts')
const path = require('path')
const fs = require('fs')

svg2Font({
  src: './test/svgicon/*.svg', // svg path  support patterns
  dist: './test/',
  fontFamily: 'svg2font',  // fontFamily name
  fontName: 'svg2font',  // font name
  startCodePoint: 57344, // unicode start code point
  ascent: 924,
  descent: -100,
  css: true,
  symbol: true,
  html: true,
}).then(() => {
  console.log('svg2Font done !')
})

const icon = fs.readFileSync(path.join( './test/svgicon', `icon_7days.svg`), 'utf8')

const font = new Font({
  fontFamily: 'svg2font',  // fontFamily name
  fontName: 'svgfont',
  glyphSvgs: icon,  //  support string array object
  ascent: 896,
  descent: -128,
  startCodePoint: 57344,
  css: true,
  symbol: true,
  html: true,
})

font.convertFonts({
  dist: './test/',
  fontTypes: ['eot', 'ttf', 'svg'],
  css: true,
})

API

svg2Font(options)

  • options
    • src- SVG file
    • dist - out file
    • fontFamily - font family name
    • fontName - font name
    • startCodePoint - Unicode Private Use Areas start Code Point
    • customUnicodeList
    • ascent
    • descent
    • fontCdnUrl
    • css
    • symbol
    • html

new Font(options)

  • options

    • fontFamily - font family name
    • fontName - font name
    • glyphSvgs - svg datas support string array object
    • startCodePoint - Unicode Private Use Areas start Code Point
    • customUnicodeList
    • ascent
    • descent
  • method

    • getGlyph
    • getTTF
    • getWOFF
    • getWOFF2
    • convertFonts(options)
      • options
        • dist
        • fontTypes
        • fontCdnUrl
        • css
        • symbol
        • html

Features

  • 支持解析 SVG 基本路径转换
  • 支持导出四种浏览器主流字体(ttf,eot,woff,woff2, svg)
  • 支持设置各种字体相关内容

License

MIT