Мое решение: листы спрайтов SVG с резервным PNG

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

• SVG могут содержать цвета, градиенты и другие эффекты.
• Работает с imgтегами.
• Работает как CSS background-images.
• SVG идеальны до пикселя.
• Как и шрифты значков, SVG можно масштабировать до любого размера, поэтому вы получаете бесплатную поддержку Retina.
• SVG обычно представляют собой файлы меньшего размера, чем иконочные шрифты.
• Если вы хотите, чтобы все было в одном файле, вы можете использовать листы спрайтов SVG.
• SVG легче создавать, и их можно редактировать в Illustrator.
• Рендеринг гораздо более согласован в разных браузерах (во всяком случае, для простых вещей).

Большое предостережение для использования SVG? Нет поддержки Internet Explorer до версии 9. Это может стать для вас решающим фактором. WebKit (Safari и Chrome) и Firefox отлично поддерживают SVG. Для более старых версий Internet Explorer вы можете заменить свой лист спрайтов SVG на PNG (очень просто, обычно всего несколько строк CSS).

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

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

Вы сами это упоминаете: «Фундаментальная проблема здесь — соблюдение баланса между визуальным и техническим». Вот мое мнение, и я уверен, что не все согласятся, но это то, что я наблюдал в последние годы работы в Интернете.

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

Текст HTML против графики: я не думаю, что для этого есть формула. Когда веб-шрифты стали чрезвычайно популярными, все прыгнули в поезд шрифт-начертание, независимо от того, насколько ужасно некоторые шрифты выглядели в определенных ОС/браузерах. Немного напоминает мне, как люди поворачивались спиной к столам, и вдруг любой, кто ими пользовался, становился кощунственным. Таблицы по-прежнему являются лучшим вариантом для табличных данных. Пиксельная идеальная графика, на мой взгляд, по-прежнему лучший выбор для эстетического дизайна.

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

В прошлый раз, когда я хотел «пойти на заказ», я попробовал большинство шрифтов без засечек в font squirrel в 3 разных ОС и во всех основных браузерах. Я поставил каждому из них от 1 до 5 баллов в зависимости от того, насколько хорошо они отрисованы. Большинство из них получили 3, некоторые получили 4. Для личного веб-сайта я выбрал половину графики, половину шрифтов. Как отмечает DA01, «все зависит от потребностей клиента, потребностей пользователей клиента и конкретного разрабатываемого решения» (DA01 sic).

Прошли годы с «запуска» @font-face, и как бы я ни хотел использовать красивые шрифты в своих проектах, я до сих пор не вижу смысла использовать шрифты, которые по-разному отображаются в разных сценариях. Но это всего лишь мое скромное мнение, и я склонен придерживаться того, «что работает для меня». Ответ SVG звучит великолепно и может изменить мое мнение :)

Хорошо, я взвешу, где я нахожусь, поскольку, похоже, не появляются какие-либо фиксированные подходы.

Рендеринг

Во-первых, дни схематичного рендеринга веб-шрифтов скоро полностью останутся позади, по крайней мере, с хорошо сделанными шрифтами. Основные нарушители (версии IE до 9) быстро уходят в прошлое. IE 8 все еще игрок, но я убежден, что аудитория все равно не эстетически мотивирована ;)

Причудливые эффекты

Системный/HTML-текст может легко обрабатывать изменения
цвета,
непрозрачности,
масштаба,
горизонтального и вертикального положения
и теней текста.

Когда мои эффекты начинают усложняться, я считаю это очевидным моментом графического типа. Помимо простых элементов управления стилем (кто-нибудь хочет добавить в мой список?), вам придется полагаться на
библиотеки javascript,
функции OpenType с неполной поддержкой,
чрезмерно большие загрузки веб-шрифтов на стороне пользователя
и, возможно, функции HTML5/CSS3 с ограниченной поддержкой.

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

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

Большие вещи

В чем я не решаюсь доверять веб-шрифтам, так это в очень крупном шрифте. Просто чтобы выбросить число, скажем, 60px и выше. Почему это? Я не совсем уверен, но я могу думать о паре вещей, которые меня не касаются.

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

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

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

Окончательный вердикт

Ну, может быть, не окончательно. Окончательный.

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

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

В полном раскрытии

Было бы упущением не упомянуть такие замечательные упражнения, как « Ярмарки затерянных миров» . Это прекрасное доказательство того, что почти все возможно, если есть время и правильная пользовательская база.