Наличие монохромного шрифта

Одноцветные маленькие картинки повсеместно используются в интерфейсах. Эти иконки лучше сохранять в CSS в виде data URL строк в SVG формате, вместо шрифтов. Во-первых, вы ускоряете загрузку страницы, так как сокращаете количество запросов на 1. Во-вторых, CSS файл редактируется, как простой текст, а для редактирования глиф шрифта нужен специальный сервис или программа. Это экономит время программиста. Используя SVG, вы можете добавить на страницу рисунок любой сложности. Глиф шрифты обладают ограниченными возможностями в плане графики.

Конвертировать SVG в CSS можно в сервисе https://bloggerpilot.com/en/tools/svg-to-css/.

Сравните внешний вид и исходный код при использовании глиф шрифтов и data URL SVG изображений:

Демонстрация

HTML код

Открыть демонстрацию Скачать код примера

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @font-face {
                font-family: 'icomoon';
                src:  url('icomoon.ttf?nf6jl1') format('truetype');
                font-weight: normal;
                font-style: normal;
                font-display: block;
            }

            [class^="icon-"], [class*=" icon-"] {
                /* use !important to prevent issues with browser extensions that change fonts */
                font-family: 'icomoon' !important;
                speak: never;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;

                /* Better Font Rendering =========== */
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            .icon-droplet:before {
                content: "\e90b";
            }
            .icon-phone:before {
                content: "\e942";
            }
            .icon-clock:before {
                content: "\e94e";
            }
            [class^="svg-"],
            [class*=" svg-"] {
                width: 40px;
                height: 40px;
            }
            .svg-envelope {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 1H5a5.006 5.006 0 0 0-5 5v12a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5V6a5.006 5.006 0 0 0-5-5ZM5 3h14a3 3 0 0 1 2.78 1.887l-7.658 7.659a3.007 3.007 0 0 1-4.244 0L2.22 4.887A3 3 0 0 1 5 3Zm14 18H5a3 3 0 0 1-3-3V7.5l6.464 6.46a5.007 5.007 0 0 0 7.072 0L22 7.5V18a3 3 0 0 1-3 3Z'/%3E%3C/svg%3E");
            }
            .svg-user {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a6 6 0 1 0-6-6 6.006 6.006 0 0 0 6 6Zm0-10a4 4 0 1 1-4 4 4 4 0 0 1 4-4ZM12 14a9.01 9.01 0 0 0-9 9 1 1 0 0 0 2 0 7 7 0 0 1 14 0 1 1 0 0 0 2 0 9.01 9.01 0 0 0-9-9Z'/%3E%3C/svg%3E");
            }
            .svg-search {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m23.707 22.293-5.969-5.969a10.016 10.016 0 1 0-1.414 1.414l5.969 5.969a1 1 0 0 0 1.414-1.414ZM10 18a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8Z'/%3E%3C/svg%3E");
            }
        </style>
    </head>
    <body style="font-family: sans-serif;">
        <p>Кнопки глиф шрифта.</p>
        <div class="icon-droplet"></div>
        <div class="icon-phone"></div>
        <div class="icon-clock"></div>
        <p>Data URL кнопки.</p>
        <div class="svg-envelope"></div>
        <div class="svg-user"></div>
        <div class="svg-search"></div>
    </body>
</html>

ПРО подписка для работы с сервисом

ПРО подписка

Для регулярной работы над сайтом или группой сайтов.

1 580 ₽

3500 страниц в неделю. Срок подписки — 1 месяц.

Баланс пополняется ежедневно на 500 страниц. Максимум баланса - 3 500.
1 страница даёт 1 запуск инструмента Проверка страницы или 1 внутренняя HTML страница вашего сайта в инструменте Проверка сайта
До 50 страниц в одной проверке в инструментах удаление неиспользуемого CSS/JS
Неограниченные проверки в инструментах пальцеприятность и отзывчивость интерфейса