Проблемы с каталогами шрифтов

Question

У меня возникают проблемы с попыткой заставить все мои шрифты работать после того, как я ворчусь в сборку. Когда я «grunt serve», мои шрифты приложения работают нормально.

Проблема заключается в том, что некоторые из моих cower-файлов для bower используют другой каталог для шрифтов, чем ожидаемый для grunt.

Grunt хочет шрифты app/styles/fonts/, если они должны быть скопированы во время сборки

У меня есть специальный шрифт помещен в app/font (я могу изменить это в моей основной CSS так не большая проблема)

@font-face { 
font-family: 'iec_unicoderegular'; 
src: url('../font/Unicode_IEC_symbol/Unicode_IEC_symbol.eot'); 
src: url('../font/Unicode_IEC_symbol/Unicode_IEC_symbol.eot?#iefix') 

materialize.css хочет шрифты в ../font/roboto/ и ../font/material-design-icons

@font-face { 
font-family: "Roboto"; 
src: url("../font/roboto/Roboto-Thin.woff2") format("woff2"), 

@font-face { 
font-family: "Material-Design-Icons"; 
src: url("../font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), 

materialdesignicons.css хотят ые шрифты в ../fonts/

@font-face { 
font-family: 'MaterialDesignIcons'; 
src: url("../fonts/materialdesignicons-webfont.eot?v=1.0.62"); 

Я не хочу, чтобы изменить CSS в компонентах Бауэра, а есть изменение в моем gruntfile.js, которые могли бы взять все источники шрифтов и объединить их затем в один файл шрифт и изменить css во время сборки, чтобы отразить изменения? Если это не лучший способ справиться с этой проблемой? Мой gruntfile.js не изменен. Спасибо

Answer 1

Я отнюдь не специалист. Я нашел ваш вопрос, столкнувшись с той же проблемой. Здесь я расскажу о всех шагах для полноты.

Я установил roboto-fontface пакет с дачей:

bower install roboto-local --save 

Тогда я побежал

grunt build 

Это обеспечивает файл CSS Roboto-fontface впрыскивается в мой файл index.html:

<link rel="stylesheet" href="bower_components/roboto-fontface/roboto-fontface.css" />

, а также обновляет dist, поэтому я могу видеть шрифт roboto в действии.

К сожалению, шрифты не были скопированы в мой каталог dist. Заметьте, у меня был каталог шрифтов, но это было для бутстрапов шрифтов. Мой расстояние каталог выглядит следующим образом:

|-fonts 
    |-images 
    |-scripts 
    |-styles 

Файл roboto-fontface CSS искал в dist/styles/fonts/ для шрифтов:

@font-face { 
    font-family: 'Roboto'; 
    src: url('fonts/Roboto-Thin.eot'); 
    src: url('fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'), 
     url('fonts/Roboto-Thin.woff2') format('woff2'), 
     url('fonts/Roboto-Thin.woff') format('woff'), 
     url('fonts/Roboto-Thin.ttf') format('truetype'), 
     url('fonts/Roboto-Thin.svg#Roboto') format('svg'); 
    font-weight: 100; 
    font-style: normal; 
} 

Я решил, что лучше всего было просто поставить шрифты там и не изменять любые CSS файлы. Я изменил copy dist правило в Gruntfile.js добавления:

{ 
expand: true, 
cwd: 'bower_components/roboto-fontface/', 
src: 'fonts/*', 
dest: '<%= yeoman.dist %>/styles/' 
} 

Это копирует все внутри директории Roboto-fontface bower_components/roboto-fontface/fonts на шрифт подкаталоге стилей.

Моего новый, и работа, каталог расстояния выглядит как (обратите внимание на font подкаталог styles)

|-fonts 
    |-images 
    |-scripts 
    |-styles 
    |---fonts 

Я не был уверен, где именно, чтобы изменить копию-распред правила, поэтому для полноты картины, вот мое новое правило в целом:

// Copies remaining files to places other tasks can use 
copy: { 
    dist: { 
    files: [{ 
     expand: true, 
     dot: true, 
     cwd: '<%= yeoman.app %>', 
     dest: '<%= yeoman.dist %>', 
     src: [ 
     '*.{ico,png,txt}', 
     '.htaccess', 
     '*.html', 
     'images/{,*/}*.{webp}', 
     'styles/fonts/{,*/}*.*' 
     ] 
    }, { 
     expand: true, 
     cwd: '.tmp/images', 
     dest: '<%= yeoman.dist %>/images', 
     src: ['generated/*'] 
    }, { 
     expand: true, 
     cwd: 'bower_components/bootstrap/dist', 
     src: 'fonts/*', 
     dest: '<%= yeoman.dist %>' 
    }, 
    **{ 
     expand: true, 
     cwd: 'bower_components/roboto-fontface/', 
     src: 'fonts/*', 
     dest: '<%= yeoman.dist %>/styles/' 
    }**] 
    }, 
    styles: { 
    expand: true, 
    cwd: '<%= yeoman.app %>/styles', 
    dest: '.tmp/styles/', 
    src: '{,*/}*.css' 
    } 
},