SVG как альтернатива шрифта значка

Ответ 1

Не имеет смысла говорить о "поддержке старых браузеров" без:

• зная, на что будет работать большинство ваших пользователей (что, конечно, будет несколько браузеров) и
• какая поддержка функции вы хотите использовать для тех браузеров, для которых мы можем использовать удобную http://caniuse.com

С учетом сказанного это не будет ответом так, как объяснение того, как все те моменты, которые вы представляете "против" шрифтов, необоснованны. Ответы велики, но в этом случае нам нужно установить отчет прямо, чтобы вы могли принимать реальные решения на основе фактов, а не (либо "никогда", либо "больше не допустимы" ) предубеждения. Я потратил слишком много лет своей жизни, работая со шрифтами с технической точки зрения, чтобы вы могли поддерживать эти утверждения =)

"Значки шрифтов размыты независимо от того, насколько идеально его кривые выровнены по сетке пикселей. Не говоря уже о ужасной рендеринге Windows".

Это простой старый неправда. В качестве векторной графики, если они плохо отображаются, SVG также будет отображаться плохо в одном размере, хотя SVG, как правило, ухудшается: шрифты фактически позволяют оптимизировать микроконтур для работы с небольшими размерами точек (.otf лучше в этом случае. ttf, но создатель шрифтов должен был потратить время, чтобы вставить их. Практически все профессиональные шрифты приходят с этой работой), а SVG этого не делает, потому что для этого нет инструкций на языке векторной графики. Таким образом, шрифты визуализируются либо наравне с (если у них нет инструкций по оптимизации), либо лучше, чем (если они это делают) SVG.

Например, Font-Awesome поставляется с оптимизацией контуров, которая позволяет отображать пиксель до полного размера шрифта 14px, который уже меньше, чем браузеры используют в качестве размера по умолчанию для текста на странице (практически все браузеры согласны использовать по умолчанию 16px serif). Если вы установили свой набор значков и преобразовали его в SVG, тогда попытались использовать уменьшенные размеры, чтобы соответствовать размеру 14px, они выглядели бы абсолютно размытым беспорядком.

Или вы можете использовать уже установленный набор значков, например Symbol Set, который явно предназначен для выравнивания сетки, что означает, что даже при размерах ниже, чем предполагалось, он по-прежнему выглядит замечательно.

SVG проигрывает здесь.

Что касается рендеринга Windows, это может выглядеть плохо, но это не ошибка Windows. Оба Uniscribe и DirectWrite действительно хороши в рендеринг шрифтов. Как, действительно, хорошо (что не может быть сюрпризом, поскольку Desktop Publishing традиционно является основным бизнесом Microsoft с тех пор, как его начало, хотя и переносится). Браузеры, которые подключаются к ним, очень хорошо отображают шрифты: IE даже поддерживает веб-шрифты с IE4... Это 1997 год. Что до того, как HTML4 был даже чем-то, мы все еще были на HTML3.2 в то время.

Проблема заключается не столько в "Windows", сколько в "более старом браузере, который не является IE, в Windows". Браузеры не очень интересовались веб-шрифтами в течение очень долгого времени. Это только последние несколько лет, когда основные усилия внезапно пошли на то, чтобы убедиться, что они приходят с хорошими механизмами формирования шрифтов (например, Harfbuzz, что сейчас используемые Firefox и Chrome), и вы не получите хороших результатов для шрифтов, если вы не используете современную версию "не-IE" на компьютере под управлением Windows.

И наконец, проблема, определенная для "font vs SVG" в Windows и IE: хотя IE поддерживает веб-шрифты, так как навсегда, поддержка SVG только приземлилась в IE9, поэтому, если вам нужно поддерживать IE8, вы даже не можете использовать SVG. В случае с этой конкретной целевой аудиторией "шрифты против SVG" даже не вопрос, вы должны пойти с шрифтом.

"Его трудно добавить новые значки в шрифт, особенно когда шрифт исходного источника источника недоступен и даже потерян".

Нет, это не так, вы все еще используете HTML с CSS, поэтому делайте то, что мы всегда делаем, когда нам нужны "буквы не в этом шрифте": используйте font-fallback: font-family: iconfont1, iconfont2, iconetc.

"Для поддержки кросс-браузера требуется куча разных версий шрифтов (woff, eot, ttf).

Не через несколько лет. В наши дни нам не нужны несколько источников: caniuse показывает нам, что все поддерживает WOFF и сделал это для нескольких версий.

Даже IE, хотя, если вам нужно поддерживать IE8, вам также придется найти .eot (который буквально является только файлом ttf с дополнительным битом метаданных, поэтому IE примет его... просто как WOFF!), а затем жить с тем фактом, что если для этого требуется преобразование из otf в eot, вы получите в конечном итоге дерьмовый шрифт, потому что это конверсия с потерями (например, преобразование .png в jpg). достойный результат, нормальное программное обеспечение создаст посредственный результат).

И поскольку все поддерживает WOFF, нам (к счастью) больше не нужны смешные всеохватывающие наборы ttf + otf + eot + woff + svg с "пуленепробиваемым" правилом шрифта @, который пытается оптимизировать порядок загрузки поэтому не слишком много файлов бесполезно загружается - просто используйте WOFF. Готово. И в рассоле добавьте .eot в качестве первого источника (с индикатором формата), и все, кроме IE, пропустит его.

Также стоит посмотреть Поддержка SVG-шрифтов: практически ничего не поддерживает, а те, кто это делает, в настоящее время устарели. Шрифты SVG как вещь были прекращены, потому что результаты использования шрифтов SVG оказались невероятно намного хуже, чем использование реальных шрифтов, подчеркивая объяснение в пункте 1.

"В конце шрифты не предназначены для графики вообще (особенно не  монохромный), кажется, что это неправильный способ использования пустого пустого и  не-семантический <span class="icon"></span> для этой цели.

Оба эти утверждения неверны.

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

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

С учетом всего сказанного, как насчет растровых изображений?

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

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

Этот процесс по своей сути является ручным, ни один utiltiy не сделает это за вас, и не будет достаточно ошибочным, если вам все еще нужно вручную исправлять ситуацию, но если вы поедете по этому маршруту, и вы создадите свои собственные значки на основе известный шрифт, размер точки, который делает иконки лучше, чем рендеринг шрифтов: вернуть мир и отправить эти растровые изображения обратно создателям шрифтов, чтобы они могли использовать их для создания шрифта таблицы EBLC, EBDT и EBSC ​​, и все остальные получают возможность использовать растровые изображения внутри шрифта, поэтому нам не нужно делать безумный рендеринг CSS-спрайтов.