OwlCoder
Генерация font-face css
Все любят красивые шрифты на сайтах. Оригинальные же смотрятся весьма вяло. Дизайн однообразный и скучный. Но стоит подключить шрифт, скажем Roboto, и сайт сразу обретает стиль. Но не всегда шрифт подключить легко и просто. Конечно, если есть уже готовый css файл, где эти шрифты включены - всё просто. Но что если у нас есть только файлы шрифтов и всё? А кто будет генерировать font-face инструкции? Для этого я написал мини скрипт, который из названия шрифтов генерирует необходимый font-face. Таким образом вы легко можете подключить шрифт.
Данный скрипт берёт названия файлов шрифтов и исходя из них генерирует необходимой правила для толщины и стиля текста (наклонный текст). Всё что нужно сделать - это поменять путь до файлов, а также поменять основное название в шрифте. Скрипт написан на языке программирования javascript (запускать нужно через nodejs), поэтому, если вы немного разбираетесь в js - для вас будет всё просто и понятно.
Итак, ниже прилагаю код этого скрипта.
const fs = require('fs');
let result = fs.readdirSync('src/fonts');
function getFF(fontName) {
let out = {
fontWeight: 'normal',
fontStyle: 'normal',
}
let fwMap = {
'bold': 'bold',
'regular': 'normal',
'light': '300',
'thin': '100',
'black': '900',
}
smallFontName = fontName.toLowerCase();
Object.entries(fwMap).map(([key, value]) => {
if (smallFontName.indexOf(key) !== -1) {
out.fontWeight = value;
}
})
if (smallFontName.indexOf('italic') !== -1) {
out.fontStyle = 'italic';
}
return `@font-face {
font-family: "Roboto";
src: url("./fonts/${fontName}") format("ttf");
font-weight: ${out.fontWeight};
font-style: ${out.fontStyle};
}`
}
let ffs = [];
result.forEach(item => {
let ff = getFF(item);
ffs.push(ff);
});
fs.writeFileSync('ff.css', ffs.join("\n"))