Создать webfont с плагином Grunt grunt-webfont на Windows

С моей работой в команде мы должны сгенерировать webfont значков из svg-файлов для нашего backoffice. Для этого с Grunt мы нашли плагин под названием «grunt-webfont».Создать webfont с плагином Grunt grunt-webfont на Windows

Вот ссылка: grunt-webfont repository

Моя проблема заключается в том, что не правильно генерировать наш WebFont на Windows. Вместо значка у меня есть маленький квадрат.

По умолчанию задача начинается с параметров enginefontforge, но это не работает в Windows. Поэтому я пытаюсь установить этот параметр с помощью node (с зависимостью ttfautohint). Но это тоже не работает.

Вот мой плагин конфигурации:

dev: { 
    src: '<%= project.app %>/images/pictos/*.svg', 
    dest: '<%= project.app %>/styles/fonts/', 
    options: { 
    font: 'my-icons', 
    stylesheet: 'scss', 
    syntax: 'bem', 
    htmlDemo: true, 
    relativeFontPath: 'fonts/my/', 
    engine: (grunt.option('engine') || 'fontforge'), 
    templateOptions: { 
     baseClass: 'my-icon', 
     classPrefix: 'my-icon-', 
     mixinPrefix: 'my-icon-' 
    }, 
    } 
}

Это, кажется, хорошо, когда я делаю:

$ grunt serve --engine="node"

Результат:

Running "webfont:dev" (webfont) task Font my-icons-738111b522f08be9663c9b5af0606fd5 with 24 glyphs created.

Но до сих пор мало квадраты ...

Я попытался установить опцию «autohint» в «ложь», и тот же результат ...

Моя работа в команде сделать это с Ubuntu, и это работа здорово! Какое решение я должен сделать в Windows?

Спасибо.

источник

2015-02-05 trugh

Это не может быть сделано с некоторыми svg на Windows.

Readme.md Grunt-webfont говорит, что их продукт не будет работать с Fontforge в Windows. Таким образом, ваш единственный вариант - Node.

Также в Readme.md: Узел не работает с некоторыми SVG-файлами. Поэтому проконсультируйтесь с командой Ubuntu, если они могут отобразить ваш svg-файл с помощью Node и не получить квадраты.

источник

2015-02-05 14:41:38 allcaps

Спасибо за ваш ответ. Мы проверили наши SVG-файлы, и проблема, похоже, в Linux с Linux-движком. У вас есть рекомендации о файлах SVG для преобразования? Я также опубликую проблему в репозитории Github. – trugh

У меня были проблемы с использованием Grunt Webfont в Windows с использованием движка узла. Большинство фигур работало, но большая часть, содержащая фигуры внутри фигур, просто дала контур значка.

Во время моего собственного поиска решения я нашел эту статью, описывающую, как добиться этого с помощью Vagrant для создания шрифтов из окон: http://mac-blog.org.ua/grunt-webfont-windows/

Fontello (как веб-сайт и Grunt плагин) имеет аналогичные проблемы. Для моих значков svg проблема, казалось, была связана с правилами заполнения, например. даже странно. У них есть хорошая документация, объясняющая больше на этот счет: https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images

Что касается моего собственного путешествия, я закончил использовать icomoon.io, который поддерживал эти более продвинутые функции svg.

источник

2015-02-11 09:22:55 xiaoma

Вы имеете в виду маленькие квадраты, такие как [], или крошечные точки, представляющие ваши значки (и похожие на них в размер шрифта увеличены)?

Если крошечные точки, это может быть проблема с слишком маленькими исходными SVG-файлами. Измените размер до высоты 512 пикселей (как холст, так и внутренний контент), обновите шрифт, и у вас появятся значки.

P.S. Я также использую grunt-webfont для Windows, оба механизма (node / fontforge) работают для меня как-то.

источник

2016-02-20 17:04:07 thybzi

И если маленькие квадраты, такие как '[]', укажите некоторую ссылку на ваш SVG, возможно, я узнаю, в чем проблема с этими «некоторыми SVG-файлами в Windows», – thybzi

Создать webfont с плагином Grunt grunt-webfont на Windows

ответ

Смежные вопросы