Comments (6)
@font-face/core
is not meant to be consumed programmatically. Instead it is a CLI tool to generate your font-face css file.
Steps:
- Install
npm install @font-face/node --save-dev
- Configure options via config file. Look https://github.com/ppiyush13/font-face-node#options for list of all options and https://github.com/ppiyush13/font-face-node#cli-usage for all possible ways to define config file.
- Execute
npx font-face
from bash
Upon execution you will find font-face.css
getting generated.
So this answers your question ?
from font-face-node.
I am trying to write a script that would take fonts from a folder and based on the name, collect the configuration and generate a css file.
fs.readdir(env.PATH_SRC+'fonts/FontsUse', (err, files) => {
var fonts = [];
files.forEach(file => {
fonts.push(getFontsProperties(file));
});
console.log(fonts);
// fontFaceNode({
// input: {
// dir: './src/fonts',
// },
// output: {
// dir: './dist',
// resourceDir: './dist/fontResources',
// cssFileName: 'font-face.css',
// },
// fonts: [
// {
// name: 'Roboto',
// weight: 200,
// style: 'normal',
// file: 'Roboto-Light',
// },
// {
// name: 'Roboto',
// weight: 400,
// style: 'normal',
// file: 'Roboto-Regular',
// },
// {
// name: 'Roboto',
// weight: 600,
// style: 'bold',
// file: 'Roboto-Medium',
// },
// ],
// });
});
function getFontsProperties(fontFullName){
var out = {
'name' : fontFullName.match(/^(.*)-/)[1]
}
var weightConvert = {
'Thin' : 100,
'ExtraLight' : 200,
'Light' : 300,
'Regular' : 400,
'Medium' : 500,
'SemiBold' : 600,
'Bold' : 700,
'ExtraBold' : 800,
'Black' : 900
};
// .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
var CamelCase = fontFullName.match(/.*-(.*)\./);
var isItalic = CamelCase[1].match('Italic') !== null;
if(isItalic){
out['weight'] = weightConvert[CamelCase[1].replace('Italic','')];
out['style'] = 'italic';
}else{
out['weight'] = weightConvert[CamelCase[1]];
if(out['weight'] >= 600){ out['style'] = 'bold';}
else{ out['style'] = 'normal'; }
}
return out;
}
It's a shame the module can't do this. But thanks for the answer.
from font-face-node.
Although ... you can first save the configuration, and then read)) and run npx font-face. Thank you)
from font-face-node.
You made a valid point. I have released version @font-face/[email protected]
Now you shall be able to execute below code:
const fontFaceNode = require('@font-face/node');
fontFaceNode({
input: {
dir: './src/fonts',
},
output: {
dir: './dist',
resourceDir: './dist/fontResources',
cssFileName: 'font-face.css',
},
fonts: [
{
name: 'Roboto',
weight: 200,
style: 'normal',
file: 'Roboto-Light',
},
{
name: 'Roboto',
weight: 400,
style: 'normal',
file: 'Roboto-Regular',
},
{
name: 'Roboto',
weight: 600,
style: 'bold',
file: 'Roboto-Medium',
},
],
});
Please upgrade and report if any issues.
from font-face-node.
Many thanks! now I managed to do everything I wanted)
import fs from 'fs';
import dotenv from 'dotenv';
dotenv.config();
const env = process.env;
import fontFaceNode from '@font-face/node';
fs.readdir(env.PATH_SRC+'fonts/FontsUse', (err, files) => {
var fonts = [];
files.forEach(file => {
fonts.push(getFontsProperties(file));
});
fontFaceNode({
input: {
dir: env.PATH_SRC+'fonts/FontsUse',
},
output: {
dir: env.PATH_DIST+'/fonts/dist/FontsUse',
resourceDir: env.PATH_DIST+'/fonts/dist/FontsUse',
cssFileName: 'fonts.css',
},
fonts: fonts,
});
});
function getFontsProperties(fontFullName){
var out = {
'name' : fontFullName.match(/^(.*)-/)[1],
'file' : fontFullName.match(/^(.*)\./)[1]
}
var weightConvert = {
'Thin' : 100,
'ExtraLight' : 200,
'Light' : 300,
'Regular' : 400,
'Medium' : 500,
'SemiBold' : 600,
'Bold' : 700,
'ExtraBold' : 800,
'Black' : 900
};
var CamelCase = fontFullName.match(/.*-(.*)\./);
var isItalic = CamelCase[1].match('Italic') !== null;
if(isItalic){
out['weight'] = weightConvert[CamelCase[1].replace('Italic','')];
out['style'] = 'italic';
}else{
out['weight'] = weightConvert[CamelCase[1]];
if(out['weight'] >= 600){ out['style'] = 'bold';}
else{ out['style'] = 'normal'; }
}
return out;
}
from font-face-node.
Thanks for reporting the issue.
from font-face-node.
Related Issues (2)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from font-face-node.