Поиск сообщества
Показаны результаты для тегов 'шрифт'.
Найдено: 2 результата
-
Подключение собственных шрифтов в Invision Community Для этого понадобится загрузить шрифт в корень вашего сообщества, например в папку fonts. После чего переходим в файл custom.css и подключаем шрифт таким образом: @font-face { font-family: 'Название'; src: url('webfont.woff2') format('woff2'), url('webfont.ttf') format('truetype'), url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; } После подключения шрифта, его можно указывать к различным заголовкам или всему сайта: body {font-famuly: 'Название';} Мы добавили несколько интересных шрифтов для примера: Шрифты #1 - Oxygen Подключение Oxygen: @font-face { font-family: Oxygen; src: url('OxygenRegular.eot'); src: url('OxygenRegular.ttf') format('truetype'), url('OxygenRegular.woff') format('woff'); font-weight: normal; font-style: normal; } Сам шрифт: OxygenRegular.zip #2 - LeksaSansPro Подключение LeksaSansPro: @font-face { font-family: leksasanspro; src: url(leksasanspro.ttf); font-weight:400; } @font-face { font-family: leksasanspro; src: url(leksasanspro-lightitalic.ttf); font-weight:300; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-light.ttf); font-weight:300; } @font-face { font-family: leksasanspro; src: url(leksasanspro-italic.ttf); font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-extralightitalic.ttf); font-weight:200; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-extralight.ttf); font-weight:200; } @font-face { font-family: leksasanspro; src: url(leksasanspro-extrabolditalic.ttf); font-weight:800; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-extrabold.ttf); font-weight:800; } @font-face { font-family: leksasanspro; src: url(leksasanspro-demibolditalic.ttf); font-weight:600; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-demibold.ttf); font-weight:600; } @font-face { font-family: leksasanspro; src: url(leksasanspro-bolditalic.ttf); font-weight:700; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-bold.ttf); font-weight:700; } @font-face { font-family: leksasanspro; src: url(leksasanspro-blackitalic.ttf); font-weight:900; font-style: italic; } @font-face { font-family: leksasanspro; src: url(leksasanspro-black.ttf); font-weight:900; } Сам шрифт - leksasanspro.zip
-
Модуль типографии предлагает широкий спектр классов для стилизации текста в рамках всего сайта. Заголовки Предусмотрен ряд стилей для заголовков, цель которых структурирование информации на странице. Вы можете использовать стили для любых тегов <h*> (или любых других тегов) - выберите наиболее семантический элемент в каждом конкретном использовании. ipsType_pageTitle Наиболее применим в качестве основного заголовка на странице. Более крупная версия доступна с добавлением дополнительно класса ipsType_largeTitle. Основной заголовок страницы ipsType_sectionTitle Заглавие раздела на странице. Заглавие раздела ipsType_sectionHead Заголовок раздела. Заголовок раздела ipsType_minorHeading Небольшой, менее важный заголовок. Небольшой заголовок Выравнивание ipsType_left Выравнивание текста по левому краю. ipsType_right Выравнивание текста по правому краю. ipsType_center Центрированный текст. Цвета ipsType_light Светлый текст ipsType_warning или psType_negative Текст предупреждения ipsType_success Текст успешного статуса ipsType_issue Текст ошибочного статуса ipsType_neutral Нейтральный текст Размеры ipsType_small Небольшой текст ipsType_medium Средний текст ipsType_normal Нормальный размер текста ipsType_large Крупный текст ipsType_veryLarge Очень крупный текст ipsType_huge (Используется для иконок) Созданный пользователь текст/контент из редактора CKEditor Когда речь заходит о работе с контентом, который был создан пользователем (как правило из редактора CKEditor), существует три класса, которые должны быть использованы для корректного отображения этого контента. Как правило, необходимо использовать все три класса, но бывают ситуации, когда необходимо использовать другую обработку. Вы также можете применить классы к различным элементам - например, если у вас есть повторяющиеся блоки контента пользователя, класс ipsContained может быть применим к обёртке всего контента, вместо применения к каждому отдельному блоку. При работе с пользовательским контентом, не исключайте нестандартных ситуаций. ipsType_richText Это основной класс для пользовательского контента, и активирует стили как, например, адаптивные изображения и корректные поля. ipsType_break Обеспечивает корректный перенос слов в пользовательском контенте. ipsType_contained Это защитный тего, обеспечивающий то, что контент не будет выходить за пределы из своего существующего контейнера. Укороченный текст Текст может быть укорочен в одну строку с помощью добавления к элементу двух классов: ipsTruncate ipsTruncate_line. В браузерах, которые это поддерживают, это приводит к скрытию излишней части текста, вместо которой отображается знак троеточия. Этот метод предназначен для работы на небольших одностроковых фрагментах текста, например тексте на кнопке. Он не будет корректно работать с многостроковыми данными; для этих случаев, вы должны использовать основанный на Яваскрипте виджет ips.ui.truncate. Он также устанавливает элементу ширину в 100% для корректной работы; вам нужно будет вручную установить ширину, чтобы перезаписать это значение. Это длинная строка, которая не совсем подходит к этой кнопке Другие стили типографики ipsType_noBreak Предотвращает обёртывание текста. ipsType_reset Удаляет отступ от края (margin) (наиболее полезен для использования на элементах <h*> и <p>). ipsType_unbold Удаляет стиль жирности (bold) у текста. ipsType_uppercase Переводит текст в верхний регистр. ipsType_blendLinks При применении к элементу, содержащему ссылки или элементу, ссылающемуся на самого себя, ссылки будут наследовать стили окружающего их текста.
-
- шрифт
- типография
-
(и ещё 1 )
C тегом: