#html #css #fonts #font-face #atom-editor
#HTML #css #шрифты #шрифт-лицо #atom-редактор
Вопрос:
Как мне добавить octicons в качестве шрифта, аналогичного тому, как это сделал atom?
При проверке кодовой базы atom я обнаружил, что они используют набор значков octicon в качестве шрифта ( font-family: 'Octicons Regular' amp; content: "f0a4" ). Как бы я мог реализовать набор таким образом в своем собственном проекте? Есть ли публичный релиз?
На следующем рисунке показан скриншот atom src, показывающий стили. (Ctrl Shift I)
Комментарии:
1. вы реализуете с помощью html и css или есть такая структура, как Node.js ?
2. @AbhinavKinagi Я не понимаю, почему это было бы актуально. Однако у меня есть серверная часть nodejs и я создаю свой интерфейс с помощью webpack. Интерфейс написан в пользовательской среде (аналогично angular)
3. Если у вас есть npm, я подумал о пакетных шрифтах как о решении. Но опять же доступность
Octiconsвызывает сомнения.
Ответ №1:
Для обычных Octicons нет доступных CDN, поэтому вам нужно создать свой собственный WebFontkit. Затем вам нужно добавить шрифты, используя @font-face параметр.
Выполните следующие действия, чтобы добавить пользовательские шрифты в ваш HTML:-
1. Загрузите шрифт Octicons: — Обычные шрифты Octicons доступны по этой ссылке.Загрузите файл формата шрифта TrueType (.ttf).
2. Создайте WebFont Kit: — Загрузите загруженный файл (.ttf) в генератор WebFontkit .. Затем загрузите оптимальный WebFontkit.
3. Извлеките и загрузите файлы шрифтов на ваш размещенный сайт: — Отредактируйте файл stylesheet.css, чтобы обновить URL. Например, если у вас есть URL, подобный www.example.com . Итак, ваш файл .css после обновления будет выглядеть так:-
@font-face {
font-family: "Octicons";
src: url("https://example.com/css/fonts/Octicons.woff") format("woff"),
url("https://example.com/css/fonts/Octicons.woff2") format("woff2")
}
4. Используйте шрифт Octicons в своих объявлениях CSS: — Поскольку вы добавили шрифты css на свой сайт, вы можете использовать это в своих объявлениях CSS. Например,,
p {
font-family: Octicons;
font-weight:normal;
font-style:normal;
}