dhat: тогда непонятно, почему у вас такие же файлы лежат в корне проекта.
По идее (правильно) - весь билд у вас должен лежать в папке public. Т.е. там должны быть все собранные и оптимизированные хтмлки, стили, скрипты, картинки, шрифты.
Из этой же папки открывается верстка в браузере. У вас так и есть. Барузер-синк запускается в этой папке. Всего остального для него нет. А в этой папке у вас только сама страница и стили для нее. Понимаете? Сюда же нужно складывать картинки (отдельным таском с оптимизациями), сюда же следует складывать шрифты (их обычно просто копируют из исходников в билд, опять же отдельным таском) Например таким
var fontsTask = function () {
return gulp.src([paths.src])
.pipe(gulp.dest(paths.build)) // просто копируем
.pipe(browserSync.stream())
};
gulp.task('fonts', fontsTask);
Вот. Если вы будете их копировать в public/fonts, то в css должно быть в вашем случае url(fonts/font-name.otf)
dhat: если проблема не путях, то в консоли браузера на вкладке "сеть" ("network") не должно быть ответов 404.
Удостоверьтесь в этом. и проверьте какие реально данные получает браузер при запросе файла шрифта.
dhat: сорь. сверился с caniuse. действительно, этот формат хорошо поддерживается.
Значит у вас, вероятно, проблема в пути подключения шрифта.
Посмотрите результирующий css файл и его относительное расположение со шрифтами.
При такой записи src: url("Proxima Nova Regular.otf") format("opentype"); файл шрифта должен располагаться в той же папке, что и стили.
dhat: Для основной разметки как раз и не стоит, имхо. Нужно внимательно следить за распределением пространства, иногда это гемморно. Для основной раскладки ждем гриды =)
А вот для мелочей - флексы самое то. Отцентрировать, распределить иконки равномерно, пересортировать блоки для мобильных устройств, и т.п. К тому в таких случаях, как правило без проблем прописываются фоллбеки на инлайн-блоках или таблицах для стареньких осликов до 9 версии.
Tutucu: я же не ругаюсь )
почему calc не используют - не знаю. Возможно это связано с производительностью. Но вероятнее всего, о нем просто мало знают, или думают, что он не везде работает. Хотя на данный момент у калк хорошая поддержка, использовать можно.
Я в принципе стараюсь не использовать его где-попало, но если это упрощает решение какой-то задачи - почему бы нет.
По идее (правильно) - весь билд у вас должен лежать в папке public. Т.е. там должны быть все собранные и оптимизированные хтмлки, стили, скрипты, картинки, шрифты.
Из этой же папки открывается верстка в браузере. У вас так и есть. Барузер-синк запускается в этой папке. Всего остального для него нет. А в этой папке у вас только сама страница и стили для нее. Понимаете? Сюда же нужно складывать картинки (отдельным таском с оптимизациями), сюда же следует складывать шрифты (их обычно просто копируют из исходников в билд, опять же отдельным таском) Например таким
Вот. Если вы будете их копировать в public/fonts, то в css должно быть в вашем случае
url(fonts/font-name.otf)