svgtofont.js 自動生成圖標字體和彩色圖標文件

objc94 發布于2019-08-23 12:04 / 2547人閱讀

摘要：使用說明圖標字體只能被渲染成單色，不能生成彩色圖標。自動生成預覽網站，預覽字體文件。創建最大輸入圖標寬度的等寬字體。輸出的字體高度默認為最高輸入圖標的高度。自動生成樣式和。

一般情況我通過 iconfont 或者 icomoon 來實現圖標管理生成字體，導入到項目中使用。

┌────────┐                                  ┌────────────┐
│iconfont│──┐                               │  Project   │
└────────┘  │  ┌────────────┐  ┌────────┐   │ ┌────────┐ │
            ├─?│created font│─?│download│──?│ │use font│ │
┌────────┐  │  └────────────┘  └────────┘   │ └────────┘ │
│icomoon │──┘                               └────────────┘
└────────┘

使用說明

圖標字體只能被渲染成單色，不能生成 彩色圖標。

圖標將放到平臺中維護，下載字體文件到項目中使用，這樣團隊維護生成字體成本將非常高。

通過圖標平臺網站下載 svg 圖標，將圖標放到項目中管理，通過 svgtofont.js 工具來生成它，這將是新的字體圖標使用方式：

                                ┌────────────────────┐
                                │      Project       │
                                │                    │
┌────────┐                      │   ┌───────────┐    │
│iconfont│──┐                   │   │    svg    │──┐ │
└────────┘  │  ┌────────────┐   │   └───────────┘  │ │
            ├─?│download svg│──?│   ┌───────────┐  │ │
┌────────┐  │  └────────────┘   │┌──│create font│?─┘ │
│icomoon │──┘                   ││  └───────────┘    │
└────────┘                      ││  ┌───────────┐    │
                                │└─?│ use font  │    │
                                │   └───────────┘    │
                                └────────────────────┘

新的方式維護方式好處：

不需要知道第三方平臺賬號維護，將圖標下載到項目中維護圖標，不再維護字體文件

生成彩色圖標文件 SVG Symbol 在項目中使用

svgtofont

讀取一組 SVG圖標并從SVG圖標輸出 TTF/EOT/WOFF/WOFF2/SVG 字體，字體生成器。

特性

支持的字體格式：WOFF2，WOFF，EOT，TTF和SVG。

支持 SVG Symbol 文件。

自動生成模板（例如css，less等），可以直接使用。

自動生成預覽網站，預覽字體文件。

實例

https://github.com/uiwjs/icons

https://github.com/uiwjs/file...

安裝

npm i svgtofont

使用

簡單的使用方式

const svgtofont = require("svgtofont");
 
svgtofont({
  src: path.resolve(process.cwd(), "icon"), // svg 圖標目錄路徑
  dist: path.resolve(process.cwd(), "fonts"), // 輸出到指定目錄中
  fontName: "svgtofont", // 設置字體名稱
  css: true, // 生成字體文件
}).then(() => {
  console.log("done!");
});

高級用法

const svgtofont = require("svgtofont");
const path = require("path");

svgtofont({
  src: path.resolve(process.cwd(), "icon"), // svg 圖標目錄路徑
  dist: path.resolve(process.cwd(), "fonts"), // 輸出到指定目錄中
  fontName: "svgtofont", // 設置字體名稱
  css: true, // 生成字體文件
  startNumber: 20000, // unicode起始編號
  svgicons2svgfont: {
    fontHeight: 1000,
    normalize: true
  },
  // website = null, 沒有演示html文件
  website: {
    title: "svgtofont",
    // Must be a .svg format image.
    logo: path.resolve(process.cwd(), "svg", "git.svg"),
    version: pkg.version,
    meta: {
      description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
      keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG"
    },
    description: ``,
    links: [
      {
        title: "GitHub",
        url: "https://github.com/jaywcjlove/svgtofont"
      },
      {
        title: "Feedback",
        url: "https://github.com/jaywcjlove/svgtofont/issues"
      },
      {
        title: "Font Class",
        url: "index.html"
      },
      {
        title: "Unicode",
        url: "unicode.html"
      }
    ],
    footerInfo: `Licensed under MIT. (Yes it"s free and open-sourced`
  }
}).then(() => {
  console.log("done!");
});;

API

svgtofont 提供 API，可以一個一個的自己生成，也可以自動通過上面方法自動生成

const {
    createSVG,
    createTTF,
    createEOT,
    createWOFF,
    createWOFF2
} = require("svgtofont/src/utils");

const options = { ... };

createSVG(options) // SVG => SVG Font
  .then(UnicodeObjChar => createTTF(options)) // SVG Font => TTF
  .then(() => createEOT(options)) // TTF => EOT
  .then(() => createWOFF(options)) // TTF => WOFF
  .then(() => createWOFF2(options)) // TTF => WOFF2
  .then(() => createSvgSymbol(options)) // SVG Files => SVG Symbol

options

svgtofont(options)

dist

Type: String  
Default value: dist

svg 圖標路徑

src

Type: String  
Default value: svg

輸出到指定目錄

fontName

Type: String  
Default value: iconfont

您想要的字體名稱。

unicodeStart

Type: Number  
Default value: 10000

unicode起始編號

clssaNamePrefix

Type: String  
Default value: font name

創建字體類名稱前綴，默認值字體名稱。

css

Type: Boolean  
Default value: false

創建CSS / LESS文件，默認為“true”。

svgicons2svgfont

這是 svgicons2svgfont 的設置

svgicons2svgfont.fontName

Type: String  
Default value: "iconfont"

您想要的字體名稱，與前面 fontName 一樣。

svgicons2svgfont.fontId

Type: String  
Default value: the options.fontName value

你想要的字體ID。

svgicons2svgfont.fontStyle

Type: String  
Default value: ""

你想要的字體樣式。

svgicons2svgfont.fontWeight

Type: String  
Default value: ""

你想要的字體粗細。

svgicons2svgfont.fixedWidth

Type: Boolean  
Default value: false

創建最大輸入圖標寬度的等寬字體。

svgicons2svgfont.centerHorizontally

Type: Boolean  
Default value: false

計算字形的邊界并使其水平居中。

svgicons2svgfont.normalize

Type: Boolean  
Default value: false

通過將圖標縮放到最高圖標的高度來標準化圖標。

svgicons2svgfont.fontHeight

Type: Number  
Default value: MAX(icons.height)

輸出的字體高度（默認為最高輸入圖標的高度）。

svgicons2svgfont.round

Type: Number  
Default value: 10e12

設置SVG路徑舍入。

svgicons2svgfont.descent

Type: Number  
Default value: 0

字體下降。自己修復字體基線很有用。

警告： 下降是一個正值！

svgicons2svgfont.ascent

Type: Number  
Default value: fontHeight - descent

字體上升。僅當您知道自己在做什么時才使用此選項。為您計算一個合適的值。

svgicons2svgfont.metadata

Type: String  
Default value: undefined

字體 metadata。你可以設置任何
字符數據，但它是適合提及版權的地方。

svgicons2svgfont.log

Type: Function  
Default value: console.log

允許您提供自己的日志記錄功能。設置為 function（）{} 禁用日志記錄

svg2ttf

這是 svg2ttf 的設置

svg2ttf.copyright

Type: String

版權字符串

svg2ttf.ts

Type: String

用于覆蓋創建時間的Unix時間戳（以秒為單位）

svg2ttf.version

Type: Number

font version string, can be Version x.y or x.y.

website

定義預覽Web內容。例：

{
  ...
  // website = null, no demo html files
  website: {
    title: "svgtofont",
    logo: path.resolve(process.cwd(), "svg", "git.svg"),
    version: pkg.version,
    meta: {
      description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
      keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG",
      favicon: "./favicon.png"
    },
    footerLinks: [
      {
        title: "GitHub",
        url: "https://github.com/jaywcjlove/svgtofont"
      },
      {
        title: "Feedback",
        url: "https://github.com/jaywcjlove/svgtofont/issues"
      },
      {
        title: "Font Class",
        url: "index.html"
      },
      {
        title: "Unicode",
        url: "unicode.html"
      }
    ]
  }
}

website.template

Type: String  
Default value: index.ejs

自定義模板可自定義參數。您可以根據默認模板定義自己的模板。

{
  website: {
    template: path.join(process.cwd(), "my-template.ejs")
  }
}

website.index

Type: String  
Default value: font-class, Enum{font-class, unicode, symbol}

設置默認主頁。

字體使用

假設字體名稱定義為 svgtofont，默認主頁為unicode，將生成：

font-class.html
index.html
symbol.html
svgtofont.css
svgtofont.eot
svgtofont.less
svgtofont.svg
svgtofont.symbol.svg
svgtofont.ttf
svgtofont.woff
svgtofont.woff2

預覽demo font-class.html, symbol.html 和 index.html。自動生成樣式svgtofont.css 和 svgtofont.less 。

symbol svg

Unicode



Class Name

支持.less和.css樣式引用。

License

Licensed under the MIT License.

云服務器 GPU云服務器字體圖標圖標字體圖標字體庫 ico圖標在線生成

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97922.html

svgtofont.js 自動生成圖標字體和彩色圖標文件

摘要：使用說明圖標字體只能被渲染成單色，不能生成彩色圖標。自動生成預覽網站，預覽字體文件。創建最大輸入圖標寬度的等寬字體。輸出的字體高度默認為最高輸入圖標的高度。自動生成樣式和。一般情況我通過 iconfont 或者 icomoon 來實現圖標管理生成字體，導入到項目中使用。 ┌────────┐ ┌────────────...

ranwu 2019-08-30 15:54 評論0 收藏0
CSS進階篇--fontAwesome代替網頁icon小圖標

摘要：網頁小圖標到處可見，如果一個網頁都是干巴巴的文字和圖片，而沒有小圖標，會顯得非常簡陋。直接看代碼鏈接鏈接鏈接鏈接得出的結果就是其他應用還有其他更加復雜一點的應用，包括固定寬度浮動反轉旋轉疊加圖標等。引言奧森圖標（Font Awesome）提供豐富的矢量字體圖標—通過CSS可以任意控制所有圖標的大小，顏色，陰影。網頁小圖標到處可見，如果一個網頁都是干巴巴的文字和圖片，而沒有小圖標...

paney129 2019-08-28 18:18 評論0 收藏0
TOB主題2.7版本更新：重做文章主列表、新增菜單圖標支持、面包屑、彩色標簽、縮略圖圓角

摘要：主題版本更新重做文章主列表新增菜單圖標支持面包屑彩色標簽縮略圖圓角支持中文和英文，支持百度收錄，適用于各種圖片展示網站新聞站電影站美圖站資源站等等，扁平化設計公眾號展示打賞功能列表無限加載全屏相冊展示。TOB主題2.7版本更新：重做文章主列表、新增菜單圖標支持、面包屑、彩色標簽、縮略圖圓角！支持中文和英文，支持百度收錄，適用于各種圖片展示網站、新聞站、電影站、美圖站、資源站等等，扁平化設計、...

rose 2021-09-07 10:12 評論0 收藏0
iconfont的使用方法(更新了一些內容）

摘要：方式和方式是極其相似的，只不過他們一個用的是圖標的字體編碼，一個用的是圖標的引用而已是使用了引用的類名，可在下載的中查看，或者可以在阿里矢量圖標庫的網站上，進入我的項目查看。字體圖標iconfont阿里官網傳送門： http://www.iconfont.cn/打開首頁的小圖標好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...

tianlai 2019-08-23 11:39 評論0 收藏0
使用CSS生成圖標

摘要：理解這一點讓上邊和下邊也變成三角形就簡單了，將元素的屬性設為現在上下左右個邊框都是三角形了。實例二制作快進按鈕效果為了減少頁面的元素，我們可以只提供一個元素實現第個三角形，然后借助的偽類實現第個三角形。有一次筆者在參加前端面試的過程中被面試官問到這樣一個問題： BootStrapt里面的圖標是怎么樣的？用過Bootstrapt的開發者都知道，在Bootstrapt里面有一個圖標組件，...

helloworldcoding 2019-08-29 11:18 評論0 收藏0