Тестирование конвертеров шрифтов


    Всем привет.

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

    Хоть на самом деле конвертеров уже появилось великое множество, не все могут превращать otf\ttf в woff\eot\svg. Существуют специализированные сервисы, которые работают с другими форматами(.pfb, .dfont и др.).


    Мы выбрали несколько самых популярных

    Fontsquirrel
    Font2web
    Everything Fonts
    Online font converter
    FreeFontConverter
    Последний так и не удалось испытать, т.к. после сабмита формы выкидывало 500-ю ошибку.

    Чтобы тестирование было сколь-нибудь наглядным, надо что-то с чем-то сравнивать. За эталон был взята оригинальная web-версия шрифта компании Paratype PT Sans в начертаниях regular и bold.

    В тестировании также участвовали браузеры Chrome 33.0.1750, Firefox 28, и IE9 в ос Win7. Формат шрифта везде woff, как самый популярный и поддерживаемый.

    Начнем с рендеринга конвертированных шрифтов браузерами


    Кегль 16пк



    Из явных недостатков.
    В начертании bold в Fontsquirrel происходит неприятное заливание мелких деталей шрифта. Пример наглядно. Font2web сильно замыливает контуры знаков(пример).
    Два других конвертера справились с заданием практически идеально.

    Кегль 20пк



    Как видим, Fontsquirrel сильно попортил regular, но с болдом справился в целом нормально. Font2web продолжил замыливать контуры знаков. Everything Fonts и Online font converter справились с заданием довольно неплохо.

    Следующий пункт — юзабилити и возможности самих конвертеров



    Планировал создать табличку с подробным описанием, но вышло так, что кроме Fontsquirrel вообще ни один не имеет каких-либо настроек. Потому будем сравнивать по-другому.

      несколько файлов сразу css исходные форматы форматы размер файла (оригинальный 224кб) отказы
    Fontsquirrel да да ttf, otf ttf, woff, eot, svg 41кб с ограничением диапазона символов есть
    Font2web нет да ttf, otf ttf, otf, woff, eot, svg 78кб нет
    Everything Fonts нет да ttf, otf ttf, woff, eot, svg 137кб нет
    Online font converter нет нет ttf, otf(и куча других) ttf, woff, eot, svg 136кб нет


    Итого


    Исходя из результатов рендеринга и возможностей конвертеров можно сказать следующее.

    Самый популярный — Fontsquirrel — удобен, позволяет тонко настроить результат(в т.ч. оптимизировать вес файла) выдает единый архив и css, но портит шрифты. Причем испорченность непредсказуема и может проявляться как на определенном кегле, так и в определенном начертании. Кроме того, конвертер иногда отказывает в конвертировании шрифта, ссылаясь на свой blacklist или повреждение исходного файла.

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

    Everything Fonts показал себя с довольно хорошей стороны в плане рендеринга, близкого к оригиналу. Размер файла шрифта формируется, скорее всего, какой-то оптимизацией, т.к. визуально не было обнаружено отклонения с оригиналом в наличии знаков. Его 137кб, конечно, не 220 оригинальных, но подгружать лишние буквы неохота. Из явных минусов — конвертирование по одному файлу.

    Online font converter оказался крайне неудобным в плане использования. В нем для каждого формата свой архив. Например, для одного начертания будет три архива: с woff, ttf и eot. Однако компенсировал всё неплохим рендерингом.

    Что касается нас

    Мы используем и продолжим использовать пока Fontsquirrel. При этом решили разработать свой собственный инструмент, который бы не сильно портил шрифты и давал возможность настроить необходимые опции при конвертировании.

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

    Спасибо за внимание.
    WebFont 27,19
    Компания
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Похожие публикации
    Комментарии 16
    • +1
      может стоит воспользоваться (и протестировать) инструментарий от Fontello?
      github.com/fontello

      не могу найти, но была статья на хабре от них про их конвертеры
      • 0
        Ага, у них интересный функционал, уже обращали внимание на fontello.
      • +1
        Возможность выбрать конкретные символы из шрифта — это киллер фича Fontsquirrel. Скажем нужен шрифт только для цифр, легко, задаем список символов: 0123456789 и получаем очень маленькие файлы, подключаем, радуемся оптимизации. Это настолько удобно и нужно, что никакой другой сервис пока даже не рассматривается как конкурент (за редким исключением, когда шрифт находится в блэк листе у FS).
        • 0
          Есть десктопная утилита: fontprep.com/
          из минусов — мак онли
          • 0
            Похоже, у нее такая же проблема, как и Fontsquirrel, кушает бублики —
            Chrome
            Chrome
            Firefox
            Firefox
            IE
            IE

            Но статья действительно могла бы быть более полная, есть куча важных вещей помимо рендеринга — нормализация вертикальных оступов, разные способы вычесление line-height и line box, располовинивание line gap и прочее прочее.

            PS. Скринил под виртуалкой на thunderbolt, реальность может отличаться.
        • 0
          Есть такой интересный баг, когда кириллический набор в оригинальном шрифте
          не конвертируется ничем. Для примера можно попробовать так называй Luxor
          (без ссылок на фаилопомойки). И вот если не хочется сконвертироваться — до свидания.

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

          www.font2web.com/ — очень «странный»
          convertfonts.com/font-face.php — очень милый

          Описывать для статьи не буду (впадлу), но буду рад, если кто-то это сделает за меня. ))
          • +1
            font2web описан в статье. convertfonts — это то же самое, что и everythingfonts, там плашка внизу есть:
            @font-face generator is now available in the new location.
            • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Давно стараюсь не пользоваться Fontsquirrel.
              Помимо испорченных контуров букв (залипающая 'e' это классика), после него ещё базовая линия плавать может, особенно если в шрифте много всякой диакритики. Причем у них на этот счет есть специальная настройка — так вот она бесполезна; разные состяния галки дают разный, но неизменно плохой результат.
              • 0
                Если вы о таком случае говорите, то для него есть небольшой костыль.
                • 0
                  По первой ссылке проблемы не вижу, но из описания по второй ссылке догадываюсь, о чем речь. «Выпрыгиваюшие» отдельные буквы тоже встречал, и тоже после Fontsquirrel. Про костыль этот знаю, когда-то сам его обнаружил.

                  Но я говорил о другом — о базовой линии. Когда вся строка непредсказуемо уплывает вверх или вниз.
              • 0
                Я пользуюсь sfnt2woff http://people.mozilla.org/~jkew/woff/ пока никаких проблем не замечал.
                Еще github.com/ananthakumaran/webify кажется не упоминали, правда про него вообще ничего не могу сказать.
                • 0
                  Автор статьи тестировал шрифты в ие9, а мне, к сожалению, приходится смотреть ещё и на результаты в ие8. Так вот, Everything Fonts, сконвертировал замечательные ttf и woff, но вот eot отказался работать в ие7-8. Может, есть какая-то хитрость? Поделитесь, пожалуйста.
                  • 0
                    Ребята, это все очень круто, но от парней, которые держат подобный сервис я ожидал более интересной статьи.
                    Вот вы бы рассказали лучше про то, как вообще готовить шрифты для веба. Расскажите лучше, как хинтировать шрифты, как юзать старичка FontForge или ttfautohint. Да тут есть масса сложных тем, которые вообще толком никто не освещал, а вы, блин, про галочки в Fontsquirrel.

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

                      А FontForge и прочие нюансы создания и редактирования шрифтов мы не обсуждаем, т.к. это совсем не наша отрасль и за такими советами лучше ходить к ребятам, которые разрабатывают шрифты. Мы только предоставляем к ним удобный доступ. Однако если у нас появится возможность рассказать об этом на должном уровне, мы это сделаем.
                    • 0
                      Еще удобные сервисы без блек-листов:
                      http://transfonter.org/
                      https://fontie.flowyapps.com/home

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое