Что такое код swf_fontsize

Содержание

Linux.yaroslavl.ru

Учебник РНР
Назад Вперёд

swf_fontsize — изменяет размер шрифта.

Описание

void swf_fontsize (float size)

swf_fontsize() изменяет размер шрифта на значение size .

Flash-разработка

Предмет: Flash-технологии, программы, редакторы, классы, библиотеки. Методика: Изучение шаг за шагом, поиск новых решений, сбор ссылок, новостей и мнений, разбор примеров. Цель: Сбор, обработка и накопление тематической информации.

среда, февраля 11, 2009

Как отображать шрифт без сглаживания (bitmap text) во Flex

Flex имеет некоторые ограничения в работе с внедренными шрифтами.
Если во Flash CS, мы можем просто так взять, да и указать тип рендеринга шрифтов «Bitmap text» (без антиалиасинга) и иметь полноценное отображение текста с неполной прозрачностью, наклоном и т.п., то во Flex мы можем только управлять параметрами сглаживания шрифта, или не внедрять шрифт совсем (тогда о прозрачности не может быть и речи).

Но если мне, всё-таки, нужен именно несглаженный полупрозрачный шрифт?
Проблема решается, как и многие другие во Flex, через «одно» место.
В лайфдоках, находим такую статейку: Embedding fonts from SWF files. Здесь рассказывается вообще о внедрении шрифта с использованием Flash CS. Пользуясь таким методом, можно внедрить любой шрифт, поддерживаемый Flash CS.

Однако, здесь не сказано ни слова про внедрение шрифта Bitmap text (без антиалиасинга). И вообще, в документации Flex, про это как-то совсем ничего нет. А ведь это странно и непонятно — Flex-приложения как раз направлены на отображение данных, а всем известно, что данные отображаются лучше несглаженным шрифтом. К чему тогда все эти эффекты с фэйдом и прочими трансформациями, если невнедренный шрифт их не отображает.

Нам на помощь приходит статья всеобщего друга всех флэшеров GSkinnerа Bitmap Fonts in Flex (via Flash). Правда, в ней всё несколько усложнено, но, подозреваю, что это из-за того, что писалось это для Flex 2. Ну а мы то уже на Flex 3, поэтому всё немного проще. Идея в том, что шрифт, внедренный как Bitmap text, меняет название в некую неприглядную форму, типа «Tahoma_12pt_st».

Итак, к чему мы пришли (опишу вкратце мои действия):

1. Создаем SWF-файл fonts.swf (можно любой другой). Версия Flash 9, ActionScript 3.0. Во всех статьях создается файл версии Flash 8, но, почему-то, у меня такой файл Flex не подцеплял/ — не может оттранскодить.

2. Создаем текстовые Dynamic-поля, в каждое из которых добавляем хотя-бы один символ нужного нам начертания. Соответственно, если все начертания нам нужны, то будет 4 текстовых поля: Normal, Bold, Italic, Bold Italic.

3. Устанавливаем размер шрифта, который мы будем использовать в Flex-приложении. Дело в том, что в приложении, корректно может быть отображен только один размер внедренного шрифта — тот который мы сейчас укажем. Если указать другой размер, шрифт некрасиво размажется. Я указываю 12.

4. Указываем в Embed. диапазоны, которые нам надо внедрить.
Кстати, можно пойти другим путем и, вместо текстовых полей, создать в библиотеке 4 символа-шрифта (New font. ) и всё будет точно так же, за исключением того, что шрифт внедрится весь — без ограничений, что плохо для объема.

5. Компилируем и добавляем в папку проекта.

6. В CSS файле проекта (я отвел для этого специальный файл fonts.css) указываем следующий код:

/* CSS file */
@font-face <
src: url(«file://./assets/fonts.swf»);
fontFamily: «Tahoma_12pt_st»;
fontStyle: normal;
fontWeight: normal;
>

@font-face <
src: url(«file://./assets/fonts.swf»);
fontFamily: «Tahoma_12pt_st»;
fontStyle: normal;
fontWeight: bold;
>

@font-face <
src: url(«file://./assets/fonts.swf»);
fontFamily: «Tahoma_12pt_st»;
fontStyle: italic;
fontWeight: normal;
>

@font-face <
src: url(«file://./assets/fonts.swf»);
fontFamily: «Tahoma_12pt_st»;
fontStyle: italic;
fontWeight: bold;
>

7. Теперь, мы можем в любом стиле указать:

Важно указать параметр fontAntiAliasType:normal. Если этого не сделать, шрифт в некоторых случаях будет отображаться размыто, а если это выделяемый текст — при его выделении будет твориться что-то невообразимое.
Ну и конечно, не забыть уточнить размер шрифта — иначе всё поедет.

8. Ну и собственно, применяем этот стиль к компоненту:

Если нам понадобится шрифт другого размера — уж не поленитесь, повторите всё со второго пункта — так уж положено.

Как открыть файл SWF

SWF – это особый формат, разработанный специально для веб-приложений и использования в интернет-среде. Это формат для хранения различного рода анимации, графического контента и даже коротких видео и аудио файлов небольшого объёма.

Для примера, практически все рекламные баннеры, которые мы ежедневно видим перед собой в Интернете созданы именно в данном формате. Также с помощью данной технологии можно создавать интерактивный интерфейс невысокой сложности.

Аббревиатура «swf» изначально расшифровывалась как «ShockWave Format». Теперь, для того, чтобы не было путаницы с другими флеш-приложениями, этот формат называется «Small Web Format» (маленький веб-формат).

Как и чем открыть SWF?

К сожалению, открыть данный файл с помощью стандартных средств просмотра изображений Windows не представляется возможным. Тут ситуация очень схожа с форматом «GIF», который хоть и отображается как изображение, но запустить анимацию нельзя. Так чем же всё-таки можно просмотреть такого рода файлы?

Браузеры

Первый и самый простой способ, абсолютно не требующий дополнительной установки каких-либо средств – открыть нужный файл в любом браузере. Практически все современные средства для интернет-серфинга предусматривают поддержку технологии «Flash».

Запустить swf-файл используя браузер просто:

    Дважды кликните на необходимом swf-файле.

Готово! Браузер откроет наш файл, и впредь все swf-файлы будут ассоциироваться с данной программой.

Adobe Flash Player

Второй доступный и очевидный вариант – использовать программные продукты от «Adobe», так как именно эта компания на данный момент – основной разработчик любого ПО с технологией Flash. Самый распространённый продукт, который есть у каждого – Flash Player.

Итак, чтобы открыть данный тип файлов в этой программе необходимо:

    Открыть Adobe Flash Player, используя ярлык на рабочем столе или через меню «Пуск». В окне программы открываем функцию верхней панели «File» («Файл»), в открывшемся подменю выбираем «Open» («Открыть»).

Готово! Файл откроется и будет воспроизведён Flash Player-ом.

На заметку! Ещё один более быстрый способ – выделить необходимый файл и нажать правой клавишей мыши. В контекстном подменю выбрать подпункт «Открыть с помощью» («Open with»), и уже в нём выбрать Флеш-плеер.

С помощью медиаплеера

Для этого способа подойдёт любой проигрыватель видео для Windows – самый популярный KMPlayer, распространённый VLC media player, или чуть менее известный GOM player. Впрочем, список подходящих программ достаточно велик.

Разберём на примере KM-плеера. Последовательность действий проста:

    Запускаем КМПлеер. Важно открыть именно саму программу, а не конкретный файл. Так будет удобнее, и это поможет избежать вылетов.

На заметку! Также можно запустить файл в плеере, используя контекстное меню. Однако это сработает только в том случае, если программа присутствует в данном подменю.

Видео — Чем открыть файл SWF

Понравилась статья?
Сохраните, чтобы не потерять!

Теги HTML для работы со шрифтами: font color, font face, font size

Font color, font face, font size

Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !

В прошлых статьях, мы с вами начали изучать HTML на примере простенькой странички.

В этом посте речь пойдёт о тегах, предназначенных для шрифтов.

Начнем, пожалуй, с цвета.

Font color

Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий.

В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.

#FF0000 — red — красный.
#00FF00 — green — зелёный.
#0000FF — blue — синий.
#000000 — black — чёрный.
#ffffff — white — белый.

Можно также использовать имена цветов на английском red , green , black , yellov , indigo , orange и так далее.
Но на самом деле цвета не всегда соответствуют своим именам. Например, darkgrey (тёмно-серый) светлее, чем grey (серый) . Поэтому лучше использовать шестнадцатеричный код.

Для изменения цвета фона используется атрибут bgcolor (цвет фона) тэга body .
Например:

Как использовать иконки Font Awesome на вашем сайте WordPress

Хотите сделать ваш сайт ещё более привлекательным? Шрифтовые иконки помогут украсить ваши записи, страницы или меню. И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить Font Awesome.

Если вы хотите добавить большую коллекцию иконок Font Awesome на ваш сайт WordPress, то читайте о двух быстрых и простых способах, как добавить их на WordPress.

Что такое Font Awesome Icons и чем они полезны?

Если вы используете тему Divi, то наверняка знакомы с шрифтовыми иконками от Elegant Icon Font, которые есть в комплекте с темой.

Font Awesome работает по такому же принципу – это шрифт, созданный из иконок. Не набором картинок. Почему это уточнение важно? Потому, что любые шрифтовые иконки, как Font Awesome и Elegant Icon Font — это:

  • Векторные иконки – это значит, что они хорошо выглядят вне зависимости от размера отображения.
  • Настраиваемые шрифты – вы можете управлять ими, как любыми другими шрифтами. Меняйте цвета, добавляйте анимацию и многое другое!
  • Совместимы с любым браузером – шрифтовые иконки должны отлично работать с любым браузером.

На данный момент Font Awesome предлагает 675 различных иконок, которые вы можете добавить в любом месте на вашем сайте WordPress. Он также совместим с любой темой WordPress.

1. Как добавить Font Awesome на WordPress вручную

Добавить Font Awesome на WordPress вручную легко, но если вы не хотите разбираться с кодом, то сразу перейдите к следующей части.

Для внедрения Font Awesome вручную нужно выполнить два шага. Во-первых, вам нужно добавить таблицу стилей Font Awesome в хэдер вашей темы. А потом, нужно найти название иконки, которую вы хотите добавить, и вставить её с помощью короткого сниппета кода.

Добавление Font Awesome в хэдер темы

Первым шагом является добавление таблицы стилей Font Awesome в хэдер темы:

Этот код перенесёт таблицу стилей в Font Awesome из Bootstrap CDN. Вы также можете загрузить таблицу стилей прямо из Font Awesome . Нет никакой разницы.

Но мы не рекомендуем вставлять этот код прямиком в файл вашей темы header.php . Если ваша тема разрешает добавление кастомных скриптов в header.php из меню настроек, то лучше воспользоваться этим вариантом:

Но если ваша тема не позволяет такого сделать, то нужно добавить этот скрипт самостоятельно правильным образом (с точки зрения WordPress), а именно, использовать следующий код и вставить его в functions.php вашей темы (еще лучше, если это будет functions.php дочерней темы):

Вставляем иконки Font Awesome

Когда вы добавите код в вашу тему, вы будете готовы начать использовать иконки Font Awesome везде.

Найти полный список иконок можно на веб-сайте Font Awesome .

К примеру, если вы ищите иконку «Download», то просто вводите в поиск «download» и выбираете из доступных вариантов:

После выбора понравившейся иконки вы можете увидеть экран с разными размерами этой иконки. В центре экрана вы должны заметить небольшой блок кода:

Вам нужно скопировать весь код выбранной иконки. Потом, вы можете вставить этот код куда угодно в WordPress, неважно, какой редактор вы для этого используете. Просто убедитесь, что вы вставляете его, когда редактор переключен в режим «Текст»:

Вы можете вернуться к визуальной вкладке после окончания внедрения кода. После публикации записи вы увидите свою иконку во фронтенде:

Как увеличить размер иконки Font Awesome

Как вы видите в примере сверху, иконки довольно маленькие. Если вам нужно их увеличить, то нужно добавить несколько строк кода. К примеру, чтобы увеличить размер иконок в два раза, вам нужно добавит « fa-2x » в класс иконок.

Например, вот изначальный код иконки:

А вот код с увеличенной в 2 раза иконкой:

В реальной жизни иконка будет выглядеть теперь так:

Вот список кусочков кода, которые вам нужно добавить, чтобы изменить размер:

  • fa-lg – увеличить на 33%
  • fa-2x – увеличить в 2 раза
  • fa-3x – увеличить в 3 раза
  • fa-4x – …
  • fa-5x – … ну вы поняли!

Вы можете также делать другие крутые штуки, например, использовать иконку Font Awesome как пункт в маркированном писке, добавлять анимацию и многое другое. На официальном сайте Font Awesome вы можете найти инструкцию , как можно менять шрифтовые иконки.

2. Как добавить Font Awesome на WordPress с помощью плагина

Если вам не нравится предыдущий способ, то вы можете установить плагин. Существует множество различных плагинов, где доступна эта функция, но одним из самых популярных является Better Font Awesome :

Вы можете попробовать использовать и другие плагины, но нам кажется, что этот наилучший по нескольким причинам:

  • Он регулярно обновляется. Это важно, поскольку несколько популярных плагинов Font Awesome не обновлялись годами.
  • Автоматически импортирует новый набор иконок Font Awesome.
  • Позволяет вам добавлять иконки через шорткод или тот же код, что мы использовали.

Для начала установите и активируйте плагин.

Он добавит новый раздел меню Настройки → Better Font Awesome в вашей консоли. Вам не нужно настраивать ничего, просто следуйте инструкциям, которые предоставит плагин:

Добавление иконок

Чтобы добавить иконки к записям, вы можете использовать тот же метод, который мы показывали вам в ручной версии, или использовать шорткод. Преимущество использования шорткода состоит в том, что вам не нужно менять вкладку «Text» в вашем редакторе.

Формат шорткода, который вам нужен:

Где NAME – это название иконки на веб-сайте Font Awesome:

Вы можете добавить этот шорткод в модуль Divi или в обычный текстовый редактор WordPress. Вот пример, где мы добавили иконку через шорткод в текстовый модуль во время использования Divi Visual Builder:

Visual Builder отображает это так:

Вы можете использовать тот же шорткод в обычном редакторе WordPress.

Если вы хотите изменить размер вашей иконки с помощью шорткода, то просто добавьте тэг класса с размером иконки:

[icon name=» NAME » >fa-2x «]

Итоги

Вот и всё! Два разных способа добавить векторные иконки Font Awesome на ваш сайт WordPress. Мы предпочитаем ручной метод, поскольку он отнимает меньше времени и потом не нужно волноваться о потенциальной поломке плагина.

Но если вы не хотите трогать код темы, то лучше используйте плагин Better Font Awesome .

Теперь ваша очередь! А вы используете Font Awesome?

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 14

Какой font-display нужен Гуглу чтобы он заткнулся?

На чертовом Pagespeed показывает предупреждение

Ensure text remains visible during webfont load

С ссылкой на статью об font-display

Я попробовал все font-display , и мне все равно показывает это предупреждение. Как вы от него избавлялись?

  • Вопрос задан 02 апр.
  • 515 просмотров

Для @font-face — font-display: swap.

Для body прописывайте шрифты с «фолбеками», например, — font-family: «Custom-font», sans-serif.

Рустам Байназаров, чего? Я говорю есть swap и есть фоллбеки. Какой еще код нужен?

hckn, мда, код скриншотами :))

Вообще, такой код нужно был изначально в вопросе выкладывать.

Попробуйте убрать такое количество fallback-шрифтов. Оставьте так:

1. Если это поможет, оставьте по одному fallback-шрифту на систему.

P. S. В принципе, можно забить на это.

Набор бесполезных советов. Скриншот, потмоу что код постЦСС

Вам бы ничего не дал. Поэтому сделал скриншот билда.

Гайд бесполезен, я и так использую webfontloader

Совет забить принимаю к сведению.

Впрочем, в гайде есть интеерсный совет

Your page should be styled to use a system font initially and custom fonts once the fonts-loaded class has been applied.

Забриаю слова обратно, это может быть полезно

hckn, дорогой пользователь, я вам помогаю, чем я могу, поэтому в целом глупо так отвечать даже на то, что не помогло вам.

Можно скопировать компилированный код и вставить.

Более того, у меня была оная ошибка, она решилась удалением лишних fallback-шрифтов, коих другой разработчик оставил в количестве 9 штук.

По ссылке, что я прислал выше, — не то сообщение, удалил.

hckn, ну, в целом, так эта шняга и работает, шрифт изначально нужно поставить системный. Где-то в блоге Mozilla писали, что нужно ставить шрифт всегда в стили, чтобы быстрее рендеринг был. Мол, такой механизм обработки в современных браузерах.

P. S. Я пользовался этой хренью раньше всегда, но сейчас не вижу смысла в ней, если размер шрифтов не такой большой. Только лишний обработчик, а на скорость отображения влияет не так сильно. Но это, наверное, не применимо к highload-проектам, где нужны такие оптимизации.

Рустам Байназаров, да, спс за помощь. Насчет кода — ну сами понимаете будни современной разработки — все минифицировано, и в каком файле оно засунуто я буду выяснять дольше, чем сделаю скриншот))

Плагин мне этот нужен еще кое для чего — для эффекта SplitText, разбивается блок текста построчно, и если он отрабатывает до того как загружен шрифт, то он отрабатывает с неверными размерами (с ситемным шрифтом). Поэтому нужно сигналить ему, когда высчитывать.

Ладно, я так понял мне этот класс добавлять теперь на каждый случай когда я использую шрифт в коде. Я надеялся хватить только на боди эту дупликаю добавить. Не, ну его нахер, рыскать по всему проекту и вспоминать где я какой шрифт юзал, лол.

Итого: используя swap, webfonloader, woff2 — всего этого не достаточно чтобы исправить это замечание. Пусть это будет уроком нубам, которые надеятся добится хороших результатов в этом геморойном, тупом, бесполезном тесте (я видел сайт, который у меня загружался до полного взаимодействия около минуты, а эта тварь ему дает 98 — и накой тогда заморачиватся, спрашивается).

hckn, я на эти отдельные пункты этих тестоа забил по полной. Страницы проектов Google их не проходят нормально, что уж говорить.

Согласен. Главное, чтобы страница имела там адекватный рейтинг (помогает в рекламе, если Google AdWords), работала и загружалась быстро — и всем будет счастье.

Вспомнил что я использую утилити-классы! Вот она выгода утилитарного ЦСС.

Впрочем, замечание по прежнему висит, НО, теперь дает 99, ха-ха

Что такое код swf_fontsize

Код HTML для вставки флеш мы можем создать сами.

Для этого ссылка должна быть « прямой » (заканчиваться на типичное расширение флеш-файлов * .swf )
Просто копируем адрес файла и ставим в код вместо » ссылка-на-файл «:

Теперь ещё раз по порядку.

1) Копируем вот этот код:

2) Открывем окно создания темы и нажимаем на значок HTML .

Это тот же значок, который вы нажимаете при вставке видео.

3) В открывшиеся окно вставляем скопированный код.

4) Заменяем слова « ссылка на файл » 2 раза на ссылку на флеш.

Моя флешка находится по адресу http://www.pineapple.ru/farb/bufa_boo.swf

Я его взяла из адресной строки браузера, но могут быть и ещё варианты.

5) Обращаю ваше внимание, что в коде HTML присутствуют цифры.

В данном коде это 450 и 300 . Их тоже можно заменить, для того, чтобы увеличить или уменьшить размеры флешки.

Внимание: Умножайте или делите на один коэффициент, а то нарушите пропорции.

6) Далее, нажимаем кнопку « Обновить «.

Получаем жёлтый прямоугольник. Вот это и есть наша флешка.

7) Если ничего больше вставить не нужно (текст или картинку), то нажимаем « Опубликовать «.

Примечание для пользователей браузера Мазила : Для изменения размеров изображения можно цифры в коде HTML не заменять. А просто после нажатия кнопки » Обновить «, когда появится жёлтый прямоугольник, кликнуть по нему и растянуть или сжать, потянув курсором мыши от центра или к центру жёлтого прямоугольника.

И ещё: Скопируйте себе этот код HTML в Word или » Блокнот » и сохраните, чтобы потом долго не искать.

Или можете скачать этот код, сохранённый с расширением txt ЗДЕСЬ.

Вот что получилось.

Для запуска флешки нажмите GO.

HelperLife

Формат файла SWF: что это такое, с помощью каких программ можно открыть и конвертировать. Расскажем о широких возможностях формата.

Рядовые пользователи компьютера и сети Интернет редко сталкиваются с форматом SWF, разве что в виде рекламных флеш-баннеров на сайтах. Этот стандарт имеет большие возможности и множество способов использования. Самое стандартное представление – анимация различного вида, для открытия которой браузер требует установку флэш-плеера. В современных версиях популярных браузеров такой плагин есть по умолчанию и пользователю остается только включить его в момент необходимости.

SWF – что это за формат

В 1995 году компанией FutureWave Software был разработан стандарт SWF – что это за формат и какие возможности он предлагает, компьютерные специалисты узнали позже.
SWF – это патентованный формат корпорации Adobe Systems, предназначенный для отображения на веб-страницах флеш-анимаций, видео и аудио контента, а также других графических файлов. Сфера применения очень разнообразна: от простых презентаций до полноценных сайтов с внедрением технологий XML и PHP. Положительные отличия: видеофайлы грузятся и воспроизводятся быстрее, картинки при масштабировании не имеют значительных искажений.
Первоначально, владельцем спецификации (на тот период он имел название SPL) была не компания Adobe Systems. После разработки стандарта, в 1996 году, компания Macromedia купила FutureWave Software. В 2005 году Macromedia была приобретена Adobe Systems.

Чем можно открыть SWF-файл: перечень программ

Как открыть файл формата SWF

Важно. Практически для всех веб-браузеров требуется установка Adobe Flash Player. У Google Chrome инсталляция и обновление происходят автоматически.

Как открыть SWF-файл на компьютере

Совет. Если у вашего компьютера операционная система Mac OS, то следует выбрать аналогичную программу для просмотра SWF из списка пункта 2.

Как открыть файл SWF в онлайне – без сторонних программ

Как открыть SWF-файл на андроиде

Файлы на Андроид можно открыть только для просмотра, а для создания и редактирования требуются ресурсы компьютера. В Google Play Market есть отличное приложение для просмотра флеш-файлов под названием SWF Player. Приложение отличается минимальными требованиями памяти и удобством эксплуатации.

Онлайн-сервисы для конвертирования SWF-файлов

Не открываются swf файлы: видео

Часто приходится сталкиваться с ситуацией, когда файлы не открываются. Возможно, это связано с проигрывателем или браузером – тогда необходимо их переустановить. Если причина кроется не в этом, тогда предлагаю посмотреть видео о возможной другом факторе неисправности:

Декомпиляция SWF и шрифтов

Я работаю над средним шрифтом для веб-сайта розничного продавца шрифтов. Я читал на декомпиляторах SWF, и мне было интересно, могут ли декомпиляторы захватывать шрифты, встроенные в SWF, и выводить их в каком-то многоразовом формате?

Я также мог бы встраивать шрифты во внешние SWF файлы, возможно, размещенные на сервере HTTPS. Будет ли это возможным способом защиты шрифтов от декомпиляции?

(У меня есть копия декомпилятора Sothink, лежащего вокруг, и я хотел сказать все это, но, к сожалению, пробный период закончился.)

Спасибо за вашу помощь!

Вы не можете защитить какую-либо информацию или данные, которые необходимы для присутствия на клиенте. Если браузер может использовать его, его можно извлечь. Шифрование может предоставить дополнительный уровень, который должен быть удален злоумышленником, но в конце браузер должен иметь возможность расшифровать информацию, и поэтому злоумышленник может эмулировать то, что делает браузер, и получать данные таким образом.

Решение этой проблемы будет отображать шрифт на сервере и получать результат (например, файл-образ) с помощью Flash. Таким образом, вы можете оставить данные шрифта на сервере и по-прежнему отображать вывод. Я не знаю, возможно ли это в вашей архитектуре, но это похоже на безопасный способ сделать это.

Теоретически они могут, все файлы, включенные в ресурсы внутри swf, могут быть экспортированы с помощью этого инструмента (и много других). Возможно, вы можете найти программное обеспечение для шифрования swf для защиты SWF, но это тоже не бесплатно.

Украшаем дизайн сайта с помощью иконок Font Awesome

Сегодня новая статья из рубрики «Дизайн».

Кто следит за моим блогом знают, что пару дней назад я обновил дизайн блога. Так вот, все иконки, которые вы видите напротив пунктов меню и рубрик, а также в некоторых заголовках, например, во вкладках между переключением популярных и обсуждаемых записей, возле заголовка похожих статей в конце текста и возле заголовка количества комментариев, это все не картинки, а специальный шрифт Font Awesome, с помощью которого можно без проблем делать хорошие качественные иконки.

Тоже самое касается и маленьких иконок возле количества комментариев, даты, количества просмотров.

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

В общем, штука очень крутая. Я когда делал свои первые заказы, столкнулся с этими иконками и мне они доставили очень много неудобств. Я просто не знал, как ими пользоваться, и в некоторых случаях просто заменял эти иконки на изображения. Сейчас же я не вижу в их использовании абсолютно никаких проблем. Достаточно подключить шрифт Font Awesome к сайту, а затем в нужное место добавить код вывода иконки. Очень просто, давайте рассмотрим на практике.

Как подключить иконки Font Awesome к сайту

Существует 2 способа подключения:

  1. Подключить библиотеку иконок с самого сервиса, т.е. прописать путь к файлу иконок на стороне облачного хранилища, где сервис его хранит. В этом случае каждый раз при загрузке страницы будет грузиться и данный файл. Изначально у меня стоял такой вариант, но потом я заметил, что он достаточно сильно замедляет загрузку страниц. Именно поэтому я перешел на второй вариант.
  2. Скачать файл иконок Font Awesome с официального сайта и подключить его в шаблон, как и обычный файл стилей. Работа сайта становится заметно быстрее.

Рассмотрим оба варианта более подробно.

Вариант 1

Заходим на официальный сайт Font Awesome и берем строку кода подключения загрузки файла с облачного хранилища. Строка будет в первом пункте страницы, также ее я продублировал ниже.

Илон Маск рекомендует:  border-top в CSS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL