Как использовать браузер со шрифтами

Так что обозревайте, делая все через JavaScript во время выполнения, даже CSS. Но как я могу работать со шрифтами, такими как font-awesome с npm и browserify.

Пакет npm существует здесь: https://www.npmjs.org/package/font-awesome Но как мне связать шрифты для моего браузера без использования других инструментов, таких как grunt или gulp.

// редактировать

Если я хочу теперь использовать класс fa в своем html, есть ли другой способ, кроме указания на node_modules/font-awesome/css/font-awesome.css в моем html файле?

Я ищу автоматизированное решение, потому что, если у меня есть несколько библиотек, таких как font-awesome, и они приносят свои собственные активы, такие как шрифты, изображения и другие файлы, я не хочу вручную указывать каждый файл актива в своем html-файле.

С помощью jade я могу просто обслуживать некоторые файлы в public. И public содержит все активы, которые приходят через мои удаленные зависимости, такие как шрифты, изображения, ... Но как автоматически скопировать или создать символическую ссылку на все файлы из конкретного node_modules в public?


fonts font-awesome package-managers browserify
person timaschew    schedule 22.11.2014    source источник
comment
что значит комплект. npm install font-awesome устанавливает все потрясающие шрифты в каталог node_modules, и вы можете просто настроить свое приложение так, чтобы оно указывало на ./node_modules/fontawesome как на статический каталог для извлечения ресурсов. Ваш вопрос действительно требует более подробной информации, например, что вы используете для размещения своего приложения/сайта/чего угодно. Кроме того, почему потребность в хрюканье / глотке может быть даже отдаленно проблематичной? Вы явно уже используете node и браузер, добавление Grunt/Gulp — это просто достойная практика.   -  person Mike 'Pomax' Kamermans    schedule 29.11.2014
comment
спасибо, обновил мой вопрос   -  person timaschew    schedule 01.12.2014
comment
вы используете что-то еще, или это просто обычный файл .html и шрифт, установленный с помощью npm? (например, вы используете экспресс? вы используете jekyll и т. д.?)   -  person Mike 'Pomax' Kamermans    schedule 03.12.2014
comment
снова обновил свой вопрос :) дело в том, что я не хочу указывать все активы вручную. Допустим, я хочу использовать экспресс. Мне нужен каталог, например общедоступный, и экспресс должен обслуживать эти файлы статически. Поэтому мне нужен какой-то процесс, который копирует или символизирует только необходимые ресурсы в общедоступный каталог.   -  person timaschew    schedule 04.12.2014
comment
Если вы используете экспресс, вы говорите app.static("/fonts", express.static("node_modules/fontawesome")); и готово. Теперь вы ссылаетесь на свои шрифты в css, как будто они живут в /fonts, и импортируете как @import("/fonts/css/fontawesome.css"). Вы ничего не копируете, вы просто говорите экспресс псевдониму, а затем продолжаете свою жизнь. Важный вопрос заключается в том, что вы используете. Jade, Hapi, Express и т. д. позволяют вам сделать это, и их синтаксис немного отличается, поэтому спрашивайте о конкретном примере. Не спрашивайте просто, как мне это сделать, не говоря, что вы на самом деле собираетесь использовать.   -  person Mike 'Pomax' Kamermans    schedule 04.12.2014
comment
@timaschew Вы говорите о том, что шрифты требуются так же, как и другие модули commonjs? Если это так, то я хотел бы знать, как это сделать. Чего я сейчас не понимаю, так это того, что если браузер не может доставлять файлы шрифтов и CSS в браузер, то зачем вам вообще его использовать? Почему бы просто не использовать веб-пакет, который, кажется, делает все это.   -  person Stewart    schedule 02.11.2015
comment
да, я перешел на веб-пакет, и это действительно здорово   -  person timaschew    schedule 03.11.2015

Ответы (1)


arrow_upward
4
arrow_downward

Я знаю один простой способ сделать это. Используйте свои шрифты в формате Base64. Таким образом, данные шрифта находятся внутри самого CSS, а не во внешних файлах.

Затем просто загрузите свой CSS в Browserify обычным способом (с такими модулями, как «insert-css» или «cssy». Я использую «stylify», потому что я использую Stylus), и поскольку он передает определения CSS, он также будет нести данные шрифта сам.

Предварительное сжатие кода Base64 также является хорошей идеей. Или, может быть, пусть Uglify сделает сжатие в конце. Сравните результаты.

Перепроверьте, поддерживают ли ваши целевые браузеры шрифты Base64.

person Antonio Brandao    schedule 20.02.2015