Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
font-carrier
Advanced tools
Readme
font-carrier 是一个功能强大的字体操作库,使用它你可以随心所欲地操作字体。
一个字体 font,包含若干字形 glyph。比如我们浏览器里渲染我
,浏览器就会去当前设置的font里面找到 我
对应的字形 glyph,使用它的形状来渲染。不同的字体的我
的字形形状不一,所以才有差别。
font-carrier 封装了简单的 API,让你可以将某个 SVG,设置成一个字对应的字形。也可以通过解析已有字体,拿到某个字在这个字体下面对应的 SVG。让你通过 SVG 的维度随意修改字体展现样式。
我们不生产字体,我们只是字体的搬运工
如果对 iconfont 还不是很了解的,请先参考这篇文章
npm install font-carrier --save
var fontCarrier = require('font-carrier')
//创建空白字体对象
var font = fontCarrier.create()
//从其他字体解析
var transFont = fontCarrier.transfer('./test/test.ttf')
//可以设置某个字对应的形状,当然 unicode 也是支持的
font.setSvg('我', fs.readFileSync('./test/svgs/circle.svg').toString())
//也可以使用setGlyph可以设置更多信息
font.setGlyph('我', {
glyphName: '我',
horizAdvX: '1024',//设置这个字形的画布大小为1024
svg:fs.readFileSync('./test/svgs/circle.svg').toString()
})
//可以针对字直接拿到对应的svg
var svg = font.getSvg('我')
//也可以先拿到对应的字形对象,再导出对应的svg
var glyph = transFont.getGlyph('我')
glyph.toSvg()
// 默认会导出 svg,ttf,eot,woff,woff2 5种字体,
// 可以不传 path,这样会默认返回一个包含四个字体 buffer 的对象
font.output({
path: './iconfont'
})
<style type="text/css">
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9 */
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff2'),
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont";
font-size: 16px;
font-style: normal;
}
</style>
<span class="iconfont">我</span>
//此时渲染出来的图形就是你设置的 SVG的样子
使用 SVG 设置一些 icon
var fontCarrier = require('font-carrier')
// 创建空白字体,使用 SVG 生成字体
var font = fontCarrier.create()
var love = fs.readFileSync('./test/svgs/love.svg').toString()
var mail = fs.readFileSync('./test/svgs/mail.svg').toString()
//使用汉字
font.setGlyph('爱', {
svg: love,
glyphName: '爱'
})
//使用unicode
font.setSvg('', mail)
font.output({
path: './test'
})
从其他字体导出一些图标到自己的库里
var fontCarrier = require('font-carrier')
var transFont = fontCarrier.transfer('./test/test.ttf')//改成存在的字体文件地址
// 生成空白字体
var font = fontCarrier.create()
var gs = transFont.getGlyph('我是方正')
// 设置到空白字体里面
font.setGlyph(gs)
/ /这样 font 导出的字体里面就有了「我是方正」对应的 SVG 形状了
font.output({
path: './test'
})
对中文字体精简
var fontCarrier = require('font-carrier')
var transFont = fontCarrier.transfer('./test/test.ttf')
// 会自动根据当前的输入的文字过滤精简字体
transFont.min('我是精简后的字体,我可以重复')
transFont.output({
path: './min'
})
更多文档请看这里
先确保安装依赖包 npm install
再运行npm test
之后访问 ./test/index.html
MIT
FAQs
字体搬运工,中文字体解决方案,iconfont
The npm package font-carrier receives a total of 253 weekly downloads. As such, font-carrier popularity was classified as not popular.
We found that font-carrier demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.