Иконки веб-шрифтов: альтернатива изображениям

Запись от PeterLS размещена 16.01.2013 в 08:36

Показов 195 Комментарии 0

Метки шрифты

Оригинал: sitepoint.com/webfont-icons
Перевод: Влад Мержевич
Давайте будем честными, делать мелкие значки дюжинами в графическом пакете не весело. Даже если вы собрали подходящий набор, вам придётся управлять дюжиной мелких файлов или создавать спрайты изображений и нарезать их затем в CSS.
К счастью, HTML5 предоставляет нам еще один вариант: веб-шрифты. Набор шрифтов может содержать графические иконки и наборы символов. Wingdings — это один из наиболее известных, но свободные шрифты вроде Iconic могут быть более полезными и обеспечат пример кода на HTML и CSS.
Просмотр демонстрационной страницы
Как только вы нашли или создали подходящий шрифт, вам нужно конвертировать его в различные форматы, чтобы обеспечить хорошую кроссбраузерную совместимость. @Font-Face Generator на fontsquirrel.com делает тяжёлую работу за вас и предоставляет zip-файл, содержащий все шрифты и код CSS. Шрифт затем импортируется вверху вашего CSS-файла, например.

CSS
1
2
3
4
5
6
7
8
@font-face {
  font-family: "IconicStroke";
  src: url("iconic_stroke.eot");
  src: url("iconic_stroke.woff") format("woff"),
  url("iconic_stroke.ttf") format("truetype"),
  url("iconic_stroke.otf") format("opentype"),
  url("iconic_stroke.svg#iconic") format("svg");
}

Возможно добавить иконку символов в ваш HTML-файл, например, с помощью «r» для иконки RSS. Однако, это может запутать людей, использующих программы чтения с экрана, так что более безопасный вариант — применить псевдоэлементы.
Ваш HTML:

HTML5
1
<a href="rss.xml" class="rss">RSS Feed</a>

Ваш CSS:

CSS
1
2
3
4
.rss:before {
  font-family: "IconicStroke";
  content: "r";
}

Преимущества иконок веб-шрифтов
Веб-шрифты могут быть идеальной альтернативой графике:

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

Недостатки иконок веб-шрифтов
Веб-шрифты не всегда подходят:

символы могут быть только однотонными (хотя могут помочь эффекты CSS3);
создание шрифтов не проще чем PNG или SVG;
размер файла с изображением может быть меньше, если требуется всего несколько иконок.

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

Метки шрифты

Размещено в Без категории

Главная страница

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 0

Комментарии

PeterLS

Регистрация 24.11.2012
Адрес Россия, г. Томск
Сообщений 502
Записей в блоге 1

Новые блоги и статьи Все статьи Все блоги /
Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .	Часы электронные Uhbif79 12.08.2026 Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .	Часы с будильником на основе класса QLCDNumber Uhbif79 12.08.2026 Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .	Установка MinGW GCC 16.2 и CMake 8Observer8 10.08.2026 VK Видео: https:/ / vkvideo. ru/ video-240781534_456239017 YouTube: eY5-5PyI9NM Текстовая версия
Неделя из жизни имитационной модели склада: мои кривые руки растут, откуда надо anaschu 10.08.2026 Неделя из жизни имитационной модели склада: как я почти написал неправильную логику и что с этим делать Работаю сейчас над учебно-рабочим проектом: строю в AnyLogic имитационную модель процессов. . .	Калькулятор для расчета родства russiannick 07.08.2026 1. Задача: Создать калькулятор для расчета родства. Родственных связей существует 8 ступеней, такие как: p - отец P - мать q - муж Q - жена b - брат B - сестра s - сын S - дочь	Мир по моей воле kumehtar 07.08.2026 Когда-то кажется, что всё просто. Ты весь такой светлый. Причиняешь добро. Борешься за справедливость в этом тёмном мире. Потом начинаешь замечать одну неприятную вещь. Почти каждый хороший. . .	Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .

Наверх

Сообщение форума

Отменить изменения