Значки шрифтів: як вони працюють?

Я розумію, що шрифти значків - це просто шрифти, і ви можете отримати піктограми, просто викликавши їх ім’я класу, але як працюють шрифти значків?

Я спробував перевірити відповідні ресурси шрифтів значків, завантажені в Chrome, щоб побачити, як шрифти значків відображають піктограми (порівняно із загальними шрифтами), але мені не вдалося зрозуміти, як це відбувається.

Я також не мав успіху у пошуку ресурсів про те, як робиться ця "техніка шрифтового піктограми", хоча є багато доступних шрифтів значків . Також є маса ресурсів, які показують, як можна інтегрувати шрифти значків , але, здається, ніхто не ділиться та не пише про те, як це робиться!

Гліфікони - це зображення, а не шрифт. Всі піктограми знаходяться в спрайт-зображенні (також доступні як окремі зображення) і додаються до елементів у позиції backround-images:

Фактичні іконки шрифтів ( FontAwesome , наприклад) дійсно залучити завантаження конкретного шрифту і використовувати грим в contentвласності, наприклад:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Оскільки contentвластивість не підтримується у старих браузерах, вони також використовують зображення .

Ось приклад повністю необробленого FontAwesome, що використовується як шрифт, перетворюючи ( - можливо, ви цього не зможете побачити!) На швидку допомогу: http://jsfiddle.net/GWqcF/2

Якщо ваше питання полягає в тому, як клас CSS може вставити певний символ (який буде відображатися як піктограма спеціальним шрифтом), подивіться на джерело для FontAwesome :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Тож директива вмісту CSS використовується для вставки символу (який надходить із спеціальної зарезервованої області Unicode для приватного використання, яка не заплутує інші читачі).

Як працюють піктограми веб-шрифтів?

Піктограми веб-шрифтів працюють за допомогою CSS для введення певного гліфа в HTML за допомогою властивості content. Потім він використовує @font-faceдля завантаження веб-шрифта дингбату, який стилізує введений гліф. Результат полягає в тому, що введений гліф стає бажаною піктограмою.

Для початку вам знадобиться файл веб-шрифту із значками, які вам потрібні, або визначені для певних ASCIIсимволів, (A, B, C, !, @, #, etc.)або в області приватного використання шрифту Unicode - це пробіли у шрифті, які не будуть використовуватися певними символами Шрифт, кодований Unicode.

Детальніше про те, як створити піктограму веб-шрифту, знайдіть у програмі Responsive Webfont Icons .