node获取系统字体

项目需求希望用户能够自由使用字体_(:зゝ∠)_
翻了一下找到两个不错的库（都使用了c++模块的样子）

font-list https://github.com/oldj/node-font-list
system-font-families https://github.com/rBurgett/system-font-families
font-manager https://github.com/foliojs/font-manager

注意

需要在node环境下使用，也就是web下用不了

font-list

这个库比较简单粗暴，简单调用，直接返回字体名列表

const fontList = require('font-list')
fontList.getFonts().then(fonts => {console.log(fonts)
}).catch(err => {console.log(err)
})
// 直接搬过来
[ '"Adobe Arabic"','"Adobe Caslon Pro"','"Adobe Devanagari"','"Adobe Fan Heiti Std"','"Adobe Fangsong Std"','Arial',...
]

system-font-families

这个库写法像font-manager但效果是font-list(:зゝ∠)

let SystemFonts = require('system-font-families').default
let systemFonts = new SystemFonts()
// 异步
systemFonts.getFonts().then(fonts => {})
// 同步
let fonts = systemFonts.getFontsSync()

font-manager

这个库相对于font-list的功能更多，信息量更全，不过根据场景选择就好~~
由于文档非常完善，以下就照搬过来了，请见谅_(:зゝ∠)_

全查 getAvailableFonts / getAvailableFontsSync

const fontManager = require('font-manager')
// 异步
fontManager.getAvailableFonts(fonts => {})
// 同步
let fonts = fontManager.getAvailableFontsSync()// 返回值
[{ path: '/Library/Fonts/Arial.ttf',postscriptName: 'ArialMT',family: 'Arial',style: 'Regular',weight: 400,width: 5,italic: false,monospace: false },... ]

根据key值搜索字体（全查列表的那些属性）findFont / findFontSync

const fontManager = require('font-manager')
// 异步
fontManager.findFont({ family: 'Arial', weight: 700 }, font => {})
// 同步
let font = fontManager.findFontSync({ family: 'Arial', weight: 700 })// 返回值
{ path: '/Library/Fonts/Arial Bold.ttf',postscriptName: 'Arial-BoldMT',family: 'Arial',style: 'Bold',weight: 700,width: 5,italic: false,monospace: false }

替代字体（个人理解是针对某些字体库没有的字体寻找他类似的字体库，举个栗子，Arial 英文的无衬线体，他对对于中文是无效的，这个时候就可以用这个方法来寻找中文能用的类似的字体）substituteFont / substituteFontSync

const fontManager = require('font-manager')
// 异步
fontManager.substituteFont('Arial-BoldMT', '中文汉字', font => {})
// 同步
let font = fontManager.substituteFontSync('Arial-BoldMT', '中文汉字')// 返回
{ path: 'C:\\WINDOWS\\FONTS\\YUGOTHB.TTC',postscriptName: 'YuGothicUI-Bold',family: 'Yu Gothic UI',style: 'Bold',weight: 700,width: 5,italic: false,monospace: false }

因为要实现的功能希望给用户用多的选项，所以将会选择 font-manager 来实现

首先是获取family列表，其实如果只要family可能直接用 font-list 会更好
根据场景需求选择方法，例子举得同步，项目里用的异步~

const fontManager = require('font-manager')function getFontFamilyList () {// 获取所有字体let fonts = fontManager.getAvailableFontsSync()// 根据family去重let useFonts = []let hasFamily = {}fonts.map(font => {if (!hasFamily[font.family]) {hasFamily[font.family] = trueuseFonts.push(font.family)}})return useFonts
}
console.log(getFontFamilyList())
[ 'Arial','Arial Black','Bahnschrift Light','Calibri Light','Calibri','Cambria','Cambria Math','Candara Light',...]

循环渲染字体列表，根据用户选择的字体改变父级容器的样式，子级容器继承该font-family

<template><div><ul><li v-for="(item, index) in fontFamilyList" :key="index" @click="selectFont(item)">{{item}}</li></ul><div :style="{'font-family': selFont}"><p>只是</p><p>个</p><p>例子</p></div></div>
</template>

export default {data () {return {fontFamilyList: [...],selFont: ''}},methods: {selectFont (item) {this.selFont = item}}
}

项目中效果专注笔记（目前还没更新_(:зゝ∠)_）

后记打脸

font-manager 在mac和小米ruby win10系统上是没问题的，但是在4年前的Thinkpad win10 和一台用mac开的win10虚拟机上会有系统报错导致程序强制关闭，通过font-list实现（目前没出问题）

node获取系统字体相关推荐

electron获取系统字体
electron框架我用的electron-react-boilerplate 最近有个需求是获取系统字体. 在网上找了一圈找到一个font-list库, 再一看用法, 觉得好简单, so easy. ...
快速获取系统字体列表
Windows中的字体都安装在Windows\Fonts目录中,为了保证显示效果经常需要使用特殊字体,在代码中如何确认系统已经安装某种字体呢?其实利用Excel中工具条可以很容易的获取系统字体列表. ...
Android获取系统字体的大小,Android中设置字体不随系统字体大小而变化
有的时候,我们设置好的布局,在某些手机上,就会出现布局错乱,因为这个问题会流失很多用户,体验超级不好,问题图如下 image.png . 我们可以看到本来是一行可以显示的布局,竟然错乱成这个样子,蛋疼 ...
【wxPython】wxPython获取系统字体
代码: import wx from wx import FontEnumerator aaa =wx.App(False) e = wx.FontEnumerator() fontList = e. ...
adbe Air/flash swf中不能正常显示系统字体问题的解决方案
因为任务需要,需要在air桌面程序中显示所有系统字体.在air中动态创建一个文本,然后获取系统字体列表,在通过TextFormat对象的font将这个动态问本框的字体设置为某种系统字体. ...
xeLaTex调用系统字体
xeLaTex调用系统字体获取系统字体列表使用快捷win+R打开运行窗口输入cmd打开命令提示符窗口输入命令fc-list ->d:\font.txt 转换字体列表在这里我们需要使用一 ...
Android APP字体随系统字体调整造成界面布局混乱问题解决方案
一.遇到的问题当用户调整系统字体大小的时候,APP的字体一般也都会跟随改变,进而导致某些界面布局排版混乱. 下面先说一下关于sp单位的理解 sp单位除了受屏幕密度影响外,还受到用户的字体大小影响,通 ...
java 字体名字_JAVA：获取系统中可用的字体的名字
import java.awt.*; public class GetLocalFontFamily { public static void main(String[] agrs) { //获取系统 ...
获取系统所有安装的字体名称
C#中获取系统中所有已经安装的字体名称方法: List<string> arrStrNames = new List<string>();InstalledFontCollec ...

node获取系统字体

node获取系统字体相关推荐

最新文章

热门文章