Шрифты svg: SVG шрифты - SVG

Содержание

Иконочные шрифты или SVG — что выбрать в 2018? – База знаний Timeweb Community

Графические иконки — ключевой элемент практически любого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. Если не брать в расчет стандартные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Что лучше? Разберемся ниже.

Эволюция иконок

Перед тем, как появился язык стилей CSS, все иконки на сайтах представляли собой изображения. Но так как файлы изображений много весят, разработчики стремились найти один или несколько альтернативных способов отображения маленьких иконок. Например, CSS-спрайты позволили разработчикам хранить все иконки на одном изображении, но из-за проблем с доступностью этот способ не стал популярным способом отображения иконок — и в 2012 на смену им пришли иконочные шрифты. А сейчас многие разработчики отдают предпочтение масштабируемой векторной графике — SVG (Scalable Vector Graphics).

Что такое иконочные шрифты

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

Но, как и у CSS-спрайтов, иконочные шрифты имеют свои недостатки — например, для того, чтобы корректно их отобразить, браузеру приходится делать дополнительные запросы на сервер, что может привести к FOIT (Flash of Invisible Text) — ситуации, когда шрифт не отображается вообще. По этой и другим причинам многие разработчики делают выбор в пользу SVG.

Что такое SVG

SVG (Scalable Vector Graphics) позволяет отображать в браузере векторную графику. Формат SVG быстро стал новым стандартом для иконок и анимации. Они быстрее загружаются, прекрасно масштабируются и более надежные в использовании, чем иконочные шрифты. Векторная графика полностью стоит из кода и весит гораздо меньше, чем изображения в форматах JPG или PNG и большинство библиотек иконочных шрифтов.

Сравнение

Настало время сравнить SVG и иконочные шрифты по нескольким параметрам.

1. Размер

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

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

2. Производительность

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

Встроенные SVG иконки не требуют дополнительного запроса, но и кэшироваться браузером они тоже не могут.

Можно собрать SVG файлы в отдельный внешний файл — и тогда его можно будет кэшировать.

Опять же, производительность во многом зависит от того, сколько весят ваши иконочные шрифты/SVG.

3. Гибкость

Оба формата можно настраивать с использованием CSS, но SVG дает гораздо больше возможностей, например, сделать иконки разноцветными.

Иконочным шрифтам можно прописывать CSS-стили (тень, цвет и т.д.), их можно массово изменять при помощи одного правила в CSS, их можно анимировать.

4. Поддержка браузеров

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

С другой стороны, сейчас подавляющее большинство пользователей использует современные браузеры, так что на этот пункт сильного внимания обращать не стоит. Единственный нюанс, о котором стоит помнить — IE и Edge не всегда правильно масштабируют SVG файлы.

5. Масштабируемость

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

Вывод

До сих пор в среде разработчиков нет единого мнения о том, что лучше использовать — иконочные шрифты или SVG. Суть в том, что зачастую многое зависит от поставленных задач и проекта в целом.

Но все же сейчас чаще всего используют SVG — у этого языка разметки лучше масштабируемость, UX (пользовательский опыт), и он поддерживается всеми основными браузерами. Существует мнение, что один из трендов 2018 года — это уход от иконочных шрифтов к иконкам в формате SVG.

В то же время иконочные шрифты станут хорошим решением для проекта с большим количеством иконок в одном стиле.

А что вы используете в разработке, SVG или иконочные шрифты?

Десять причин нашего перехода с иконочного шрифта на SVG

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

1. Разделение функций

До недавнего времени на lonelyplanet.com использовался подключённый шрифт, в котором все иконки были упакованы в один файл вместе с ним, причём глифы хранились в области частного использования Unicode. Такое решение нас полностью устраивало, поскольку для загрузки всех иконок требовался всего один HTTP-запрос, но, в то же время, данное решение ограничивало возможность управления приоритетом загрузки ресурсов.

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

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

Контраргумент

Объединять подключённый шрифт и иконочный шрифт вовсе необязательно, их можно хранить отдельно. Наверное, мы бы так и сделали, если бы решили остановиться на использовании иконочного шрифта.

2. Некоторые устройства не поддерживают области частного использования Unicode

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

Смайлики с момента своего появления хранились в области частного использования Unicode, хоть и в разных плоскостях, так что возникновение конфликтов вполне закономерно.

Я уже и не помню, на каком устройстве проводил тестирование, когда обнаружил, что одна из наших иконок с «птичкой» была заменена иконкой цветной печати. Страница казалась мне дилетантской и «сломанной», что, без сомнения, послужило дополнительным стимулом для перехода на SVG.

3. Чёрные квадратики и крестики в Opera Mini

Добиться правильной поддержки и распознавания начертания шрифта никогда не было просто. Уверен, что вы все видели эту иллюстрацию отрисовки шрифта Awesome в Opera Mini:

Я не буду вдаваться в подробности, так как проблемы поддержки Opera Mini и многих других платформ уже хорошо описаны в этой статье от @kaelig.

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

На данный момент, мы получаем не очень большую долю трафика с Opera Mini. Однако, важно помнить, что мы — компания, связанная с сферой туризма, и мы обязаны предоставляет свои услуги в любых условиях, при любом качестве подключения к сети. Так что нам всегда следует стремится делать наш сервис более доступным. Наибольшую уверенность в том, что пользователь увидит адекватное отображение страницы, нам предоставляют форматы SVG и PNG.

4. В последнее время поддержка иконочных шрифтов в Chrome отвратительна

В Chrome Canary и Beta недавно появилась отвратительная ошибка при отображении шрифтов. Если вы её пока не встречали, вкратце — после определённого периода неактивности страницы шрифт сбрасывается и заменяется на системный.

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

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

Контраргумент

Эта ошибка так и не добралась до официальной сборки Chrome.

5. Чётче иконки в Firefox

Мы обнаружили, что в Firefox наш шрифт отображается чуть жирнее, чем в других браузерах. Когда дело касается текста, в этом нет ничего страшного (хотя, и хорошего тоже мало), а вот из-за жирных иконок вся страница выглядит неухоженной и аляповатой. Используя SVG нам удалось добиться нормального отображения иконок во всех браузерах.

6. Не всегда есть возможность использовать генерируемый контент

Если вы хотите использовать шрифтовые иконки в CSS, вам придётся прописывать их, используя свойство content для генерируемого контента. Иногда это может быть затруднительным, потому что вы уже используете псевдоэлементы :before и :after, да и не все элементы поддерживают генерируемое содержимое.

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

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

7. Проще позиционирование

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

Используя SVG, нам стало гораздо легче их позиционировать. А для единого кроссбраузерного отображения мы используем background-size: cover, и просто делаем размеры элемента резиновыми.

8. Многоцветные иконки

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

Нам всегда была необходима поддержка многоцветных иконок для карт. Ранее, кроме иконочного шрифта мы использовали для этой цели дополнительный спрайт в формате PNG. В результате перехода на SVG мы смогли избавиться от лишнего спрайта, который для пользователя являлся дополнительным запросом, а для нас — дополнительным объектом, нуждающимся в поддержке.

Контраргумент

Многоцветный иконочный шрифт можно получить посредством наложения иконок.

Тем не менее, сделать это качественно та еще задачка: если правильное кросс-браузерное позиционирование одного глифа — это довольно непростой фокус, то с двумя всё становится ещё сложнее.

9. SVG позволяет использовать иконки с анимацией

Мы пока не воспользовались этим свойством, но, вполне возможно, что мы ещё рассмотрим такую возможность, раз уж она у нас теперь есть.

10. Нам не давала покоя мысль, что мы используем хак

Применение шрифта для отображения иконок нам всегда казалось хаком. Бесспорно, он великолепен, однако суть всё же состоит в маскировании объекта одного типа под какой-то другой.

Как насчёт преимуществ использования шрифта?

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

Стоит признать что нам было бы намного сложнее справиться с этими проблемами без огромной работы, проделанной командой Filament Group на Grunticon.

Вариативность цвета

Огромным преимуществом иконочного шрифта является его гибкость. У него нет ограничений в количестве вариаций цвета, его можно легко менять в зависимости от текущего состояния (:hover, :focus, .is-active и др.). Это редкая роскошь, которая очень способствует ускорению разработки. И это одна из причин того, почему мы так долго откладывали переход на SVG.

Наше решение

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

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

Так как мы всего лишь несколько раз дублировали одну и ту же иконку в одном и том же файле, его размер сжался до размера одной иконки (плюс около 50 байтов на GZIP-указатели). Это значит, что мы можем создать практически любое количество вариаций цвета почти без дополнительных затрат со стороны ресурсов. Вот пример работы этого приёма на jsFiddle.

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

С помощью этого приёма можно также без усилий применять к иконкам изменения, привязанные к состоянию, изменяя позиционирование фона.

Нужно отметить, что в будущем мы, возможно, сможем полностью отказаться от спрайтов и использовать идентификаторы фрагментов в SVG для изменения цвета.

Поддержка браузеров

Иконочный шрифт работает во всех браузерах вплоть до IE8, в отличие от SVG. Для нашего варианта реализации нам также нужна поддержка background-size, которая является почти такой же, как и для SVG.

Наше решение

У Grunticon реализован креативный подход к старым версиям браузеров. Он создаёт PNG-версии SVG-файлов, и передаёт их старым браузерам в зависимости от того, поддерживают они SVG, или нет.

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

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

Стоило ли оно того?

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

Мы используем SVG на Lonely Planet с ноября 2013 года, и пока никаких проблем по разработке в этой части не возникало.

img → SVG → Fonts — Дизайн на vc.ru

Приём не новый, но актуальный.

{«id»:89674,»url»:»https:\/\/vc.ru\/design\/89674-optimizaciya-i-zashchita-img-svg-fonts»,»title»:»\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0437\u0430\u0449\u0438\u0442\u0430: img \u2192 SVG \u2192 Fonts»,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc. ru\/design\/89674-optimizaciya-i-zashchita-img-svg-fonts»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/89674-optimizaciya-i-zashchita-img-svg-fonts&title=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0437\u0430\u0449\u0438\u0442\u0430: img \u2192 SVG \u2192 Fonts»,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/89674-optimizaciya-i-zashchita-img-svg-fonts&text=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0437\u0430\u0449\u0438\u0442\u0430: img \u2192 SVG \u2192 Fonts»,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/89674-optimizaciya-i-zashchita-img-svg-fonts&text=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0437\u0430\u0449\u0438\u0442\u0430: img \u2192 SVG \u2192 Fonts»,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect. ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/89674-optimizaciya-i-zashchita-img-svg-fonts»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0437\u0430\u0449\u0438\u0442\u0430: img \u2192 SVG \u2192 Fonts&body=https:\/\/vc.ru\/design\/89674-optimizaciya-i-zashchita-img-svg-fonts»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

2759 просмотров

Поисковые системы остро рассматривают производительность сайта (экран загрузки, время перехода в интерактив и другие метрики) при разных условиях: скорости соединения, устройства просмотра и так далее.

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

Брейкпоинты и медиазапросы в CSS (загрузка заранее подготовленного контента в зависимости от разрешения устройства).
JavaScript по оптимизации изображений (дополнительная нагрузка на сайт в виде исполнения скрипта).
«Ленивая» загрузка (с Chrome 76) при использовании в HTML атрибута loading=»lazy».
«Дедовское» сжатие и размещение на хостинге других изображений.

Также стоит отметить, что сейчас развита тенденция использовать SVG (векторные изображения) вместо тех же PNG, JPG.

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

Все преимущества можно почитать в других статьях.

Перенос всего, что можно, в вектор — довольно востребовано на рынке «фриланса». Другое дело, когда векторная графика не берется из открытых источников, а рисуется на заказ. Существуют способы защиты таких изображений от копирования. Самый надежный — это использование шрифтов, то есть конвертирование ваших SVG в файл шрифтов и стилей.

Рассмотрим на примере:

Есть исходная картинка в формате PNG и SVG.

Домик no name

Создадим из нее файл шрифтов. Сервисов для этого существует множество, они бесплатные. Опишу на примере одного из них (не реклама). Загружаем наше SVG на сервис:

1. Импортируем. 2. Выбираем. 3. Генерируем

Далее дополнительная кастомизация (информация об авторстве, метод подключения и так далее). Скачиваем готовый архив. В нем для работы нужны только папка Fonts и файл стилей:

По умолчанию генерируется файл style.css. В данном случая я его переименовал.

Верстаем три блока. Подключаем файлы скаченных шрифтов.

Верстка первой странички

В первом блоке загружен обычный PNG, во втором — SVG, в третьем символ через тег <i>. Размеры изображения для первых двух блоков идет через img, для третьего — через font-size (размер шрифта).

Кстати, классы генерируются на моменте создания шрифта. Сгенерированный вами класс можно посмотреть в файле demo.html через инструмент разработчика:

Размеры нашего домика в этих форматах:

Размер PNG

Размер SVG

Размер в шрифте

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

Домик в .png и .svg сохраняется в своем формате

При клике на домик в виде символа →

Сохранение возможно только в формате всего HTML

Через инспектор видим, что это класс

Если даже попытаться полностью скопировать весь файл шрифтов, то обратной генерации в графический элемент будет невозможно. Таким образом, ваше изображение легким «копипастом» забрать нельзя.

Напоследок — аудит на реальном хостинге. Указывается лишь только формат PNG, оказывающий какую-никакую нагрузку:

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

Заранее благодарен за прочтение и ваше время!

Icon Fonts или SVG?

Графические иконки — главный элемент буквально всякого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. В случае если не брать в расчет нормальные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Собственно что из них лучше? Разберемся ниже.

Эволюция иконок

Перед тем, как появился язык стилей CSS, все иконки на веб сайтах представляли собой изображения. Но так как файлы изображений больше весят физически, разработчики стремились отыскать один или несколько других способов отображения маленьких иконок. Например, CSS-спрайты дозволили разработчикам хранить все иконки на одном изображении, но из-за проблем с доступностью данный метод не стал популярным способом отображения иконок — и в 2012 на замену им пришли иконочные шрифты. А сейчас многие разработчики отдают предпочтение масштабируемой векторной графике — SVG (Scalable Vector Graphics).

Что такое иконочные шрифты?

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

Но, как и у CSS-спрайтов, иконочные шрифты имеют собственные недостатки — например, для того, чтобы корректно их отобразить, браузеру приходится делать дополнительные запросы на сервер, что может привести к FOIT (Flash of Invisible Text) — ситуации, когда шрифт не отображается вообще. По этой и другим причинам многие разработчики делают выбор в пользу SVG.

Что такое SVG?

Сравнение Icon Fonts и SWG

Настало время сопоставить SVG и иконочные шрифты по нескольким характеристикам.

Размер

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

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

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

Встроенные SVG иконки не требуют дополнительного запроса, но и кэшироваться браузером они тоже не могут.

Можно собрать SVG файлы в отдельный внешний файл — и тогда его можно будет кэшировать.

Опять же, производительность во многом зависит от того, сколько весят ваши иконочные шрифты/SVG.
Гибкость

Оба формата можно настраивать с использованием CSS, но SVG дает гораздо больше возможностей, например, сделать иконки разноцветными.

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

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

С другой стороны, сейчас подавляющее большинство пользователей использует современные браузеры, так что на этот пункт сильного внимания обращать не стоит. Единственный нюанс, о котором стоит помнить — IE и Edge не всегда правильно масштабируют SVG файлы.
Масштабируемость

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

Вывод

Но все же сейчас чаще всего используют SVG — у этого формата — разметки лучше масштабируемость, UX (пользовательский опыт), и он поддерживается всеми основными браузерами.

Голосов: 461 | Просмотров: 1937

Вложение шрифтов в PDF и SVG файлы

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

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

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

Экспортируемые из Dorico файлы SVG соответствуют спецификации SVG Tiny 1. 1, которая определяет подмножество функций в полной спецификации SVG.

Для получения информации об использовании веб-шрифтов с файлами SVG обратитесь к Steinberg Knowledge Base: https://www.steinberg.net/en/support/knowledgebase_new.html

Проблемы со шрифтом в SVG формате – Logaster

Достаточно часто случаются ситуации, когда логотип на сайте выглядит как положено, при скачивании его в JPEG и PNG тоже все отлично, но стоит открыть SVG-файл в специальной программе (например, Inkscape или Adobe Illustrator) для внесения изменений — и шрифт отображается некорректно.

К примеру, на картинке слева изображен логотип, созданный в Logaster, а справа — его отображение в программе Inkscape после скачивания изображения на компьютер. Каковы причины возникновения этой проблемы и как ее решить? Далее вы найдете ответы на эти вопросы.

Почему шрифт отображается некорректно?

Причина проста — шрифт неправильно отображается потому, что попросту не установлен в библиотеке вашей операционной системы. Следовательно, программа просто заменяет его любым другим имеющимся в наличии.

Как решить эту проблему?

Предлагаем вашему вниманию 2 варианта решения проблемы, при этом ваш выбор будет зависеть от того, нужно ли вам менять текст логотипа.

Если вы не собираетесь этого делать, то вам подойдет первый вариант: 1. Скачайте с сайта логотип в формате PDF 2. Импортируйте его в вашу программу, например, Inkscape.

В итоге вы получите рисунок («в кривых»). Редактировать вы его не сможете, но изображение будет именно таким, какое вам необходимо.

Второй вариант решения проблемы пригодится вам, если в логотипе необходимо отредактировать текст:

1. Узнайте, какой тип шрифта используется в вашем логотипе. О том, как это сделать мы писали в статье «Какой шрифт используется в моем логотипе?». Вам просто нужно зайти в раздел редактирования сайта logaster, кликнуть по тексту и, в инструментах редактирования (поле «Шрифт») вы увидите, какой шрифт используется.

2. Найдите нужный вам шрифт в интернете и скачайте его. Это легко сделать — достаточно воспользоваться поиском, и вы быстро найдете бесплатные или коммерческие версии шрифта, после чего сможете скачать или купить его. Также существуют специализированные сайты для поиска шрифтов: google.com/fonts, 1001freefonts.com, dafont.com и другие.

3. Установите шрифт на свой компьютер, после чего скачивайте логотип.

4. Откройте логотип в нужной вам графической программе. Теперь шрифт должен корректно отображаться, благодаря чему вы сможете свободно редактировать ваш логотип.

Как видите, решить эту проблему можно достаточно просто и быстро.

Как собрать пакет иконок из фигмы — 3

Я уже писал как собрать пакет иконок в виде шрифты из скетча. На этот раз из фигмы, в виде svg-спрайта и многоцвете. Сначала будет вступление-рассказ о чем все это, если вы хотите нового, прокрутите до заголовка «Новое в этой версии».

Что вообще происходит

У дизайнера есть несколько разных способов передать иконки разработчику:

отдельными файлами или спрайтом в png,
отдельными файлами или спрайтом в svg,
иконочным шрифтом.

На формат распространения накладываются и другие ограничения:

платформа: веб, десктоп, мобильные
цветность: монохромные, двухцветные, полноцветные
dpi экранов
и прочее

Если вам нужен скетч, смотри прошлую серию

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

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

Зачем это делать, есть же фонтелло

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

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

Хорошее решение — простое, в нем минимум ручных действий.

Нескольким дизайнерам работать непросто. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы svg и файлы шрифта, кто собирает и кому передает, как не забыть иконку.

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

Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.

Хорошее решение встраивается в процесс разработки.

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

Хорошее решение работает внутри компании.

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

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

Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.

Новое в этой версии &nbsp

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

Сегодня — вариант для фигмы. Еще в нем появились svg-файлы и svg-спрайт. Иконки svg-спрайта поддерживают двухцветность и перекрашивание средствами css.

Куда смотреть

Я сделал:

Чтобы сборка завелась, нужно подготовить токен доступа к фигме, ищите в профиле вот такое:

После этого действуйте по инструкции в Readme.md

Сборщик обращается к фигме, через веб-апи экспортирует svg-файлы, запускает сборку шрифта и svg-спрайта.

Я не очень пойму, что ещё комментировать, мне кажется, там все понятно и очевидно, поэтому вставляю только результат:

КДПВ

Было:

Стало:

Разные особенности

Как работает двухцветность спрайтовых иконок

Для двухцветности иконок в svg-спрайте и возможности перекрашивания их через css используется своеобразных хак.

<svg fill="#000" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8.62155 1.21658C8.45088 1.08099 8.2349 1 8 1C7.44771 1 7 1.44772 7 2C7 2.55228 7.44771 3 8 3C4.1554 3 3.80482 5.42796 3.08886 10.3863C3.05992 10.5868 3.03039 10.7913 3 11C2.51458 11 2.02917 11.3534 1.54375 12.0603C1.4751 12.1603 1.43835 12.2787 1.43835 12.4C1.43835 12.7314 1.707 13 2.0384 13L6.58534 13C6.53007 13.1564 6.5 13.3247 6.5 13.5C6.5 14.3284 7.17157 15 8 15C8.82843 15 9.5 14.3284 9.5 13.5C9.5 13.3247 9.46992 13.1564 9.41465 13L13.9616 13C14.0829 13 14.2013 12.9633 14.3013 12.8946C14.5745 12.707 14.6439 12.3335 14.4562 12.0603C13.9708 11.3534 13.4854 11 13 11C12.9668 10.775 12.9346 10.5547 12.9031 10.3391C12.7783 9.48499 12.6644 8.70518 12.5409 7.99982C12.5273 7.99994 12.5137 8 12.5 8C11.9617 8 11.4454 7.90547 10.9669 7.7321C11.0539 8.18151 11.1391 8.69127 11.2279 9.26906C11.2687 9.53513 11.3106 9.81613 11.3674 10.204C11.3589 10.146 11.4807 10.9794 11.5161 11.219L11.5575 11. 5h5.44301L4.48435 11.2161C4.50903 11.0466 4.57528 10.5882 4.6098 10.3494L4.63087 10.2036C4.68629 9.8214 4.72807 9.5381 4.7686 9.27157C5.39203 5.17234 5.83807 4.5 8 4.5C8.03774 4.5 8.07495 4.50021 8.11166 4.50065C8.03858 4.17884 8 3.84392 8 3.5C8 3.33101 8.00932 3.1642 8.02746 3.00004C8.09885 2.35473 8.30674 1.75013 8.62155 1.21658Z"/>
<circle cx="12.5" cy="3.5" r="2.5" fill="currentColor"/>
</svg>

Это — код двухцветной иконки. Обратите внимание, что fill у svg стоит #000, а у части иконки, которую нужно красить отдельно, стоит fill=«currentColor».
Для перекрашивания применяется правило:

svg {
    fill: #8F99AA; /* Цвет основной части*/
    color: #E80E0E; /* Цвет дополнительной части*/ 
}

В результате этого правила у svg появляются два свойства: fill и color. Fill перекрашивает всю иконку, а color ни на что не влияет. У вложенной фигуры срабатывает свой fill, но он берет цвет из специальной переменной currentColor, которая залинкована на атрибут color у svg. В итоге атрибут color у svg не влияет на базовую контур, а используется только чтобы прокинуть внутрь дополнительный цвет.

Такая особенность нужна только для спрайта. Если вставить иконку прямо в DOM, то можно будет использовать любые нормальные способы (например, css-классы).

Зачем нужны CODEPOINTS

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

Как лучше версионировать

У нас (вообще это не обязательно) пакеты версионируются по семверу (semver.org). Версии нумеруются в формате Major.Minor.Patch (например, 3.2.1: 3 — major, 2 — minor, 1 — patch).

Major-версия обновляется при ломающих изменениях
Ломающие изменения говорят о том, что нельзя просто обновить иконку, нужно скорее всего будет менять код в продукте. Ломающие изменения описаны в changelog. Самый частый случай: переименования иконок, при обновлении пакета нужно заменить в продукте старое имя на новое.
Minor-версия обновляется при новых фичах: появление новой иконки, нового формата css и прочее.
Обновляться на новую версию можно безопасно, ничего сломаться не должно.
Patch-версия инкрементируется при багфиксах, исправлениях иконок и прочих мелких изменениях.
Обновляться на новую версию можно безопасно, ничего сломаться не должно.

Если есть вопросы, пишите в комментарии или на почту [email protected]

10 лучших шрифтов SVG для дизайнеров (бесплатно и премиум)

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

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

SVG-шрифты и традиционные шрифты

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

Шрифты

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

Что за руб?

Как и все остальное, всегда есть обратная сторона, и шрифты SVG не являются исключением из правил.SVG — это аббревиатура от Scalable Vector Graphics, но шрифты, созданные с использованием технологии SVG, вовсе не являются векторной графикой, они представляют собой встроенные растровые изображения. Это означает, что тип с начинает выглядеть пиксельным, если ваш шрифт масштабируется больше, чем его исходный размер растрового изображения.

Лучшие шрифты SVG создаются на основе отсканированных изображений с высоким разрешением, о чем следует помнить, если вы работаете над проектом с крупным полиграфическим дизайном. Как и в традиционных шрифтах, вы можете редактировать размер, трекинг и функции OpenType, но не можете изменять цвет самого шрифта.Для этого вам нужно применить настройку Color Overlay, Hue / Saturation или маску, чтобы изменить внешний вид.

10 лучших бесплатных и премиальных шрифтов SVG для дизайнеров

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

НЕОГРАНИЧЕННЫХ ЗАГРУЗОК : Загрузите более 50 миллионов шрифтов, бесплатных подарков и дизайна. Ресурсы

Другие подборки лучших шрифтов

Лучшие шрифты SVG для дизайнеров

Ручные шрифты Brixton SVG — 28 долларов

Brixton, созданный Эллен Лафф, отмечает оригинальность стилей высокой печати с помощью смелого семейства шрифтов, напечатанных вручную, со всеми недостатками, присущими его вдохновению.Благодаря узким формам, которые могут подойти к вашим строгим дизайнам, его аутентичные текстуры придают ему свой голос. Шрифт поставляется с двумя стилями высокой печати SVG: Wood и Lead. Оба они предлагают полностью прозрачные текстуры и невероятную детализацию. В набор также входят их векторные аналоги, что делает его еще более универсальным.

Учить больше

Chin Up Buttercup! Font Duo & Extras — 25

долларов

Chin Up Buttercup от Nicky Laatz — это забавная пара шрифтов, которая также поставляется с дополнительным набором иллюстраций. Независимо от того, используются ли они вместе или по отдельности в творческом или повседневном дизайне, Chin Up Buttercup дает вам все необходимое для создания множества типографских рисунков, которые могут потрясающе выглядеть на всем, на чем вы решите его использовать. Дуэт шрифтов идеально подходит для любого количества проектов, от поздравительных открыток, плакатов и веб-сайтов до окон, вывесок и скрапбукинга. Возможности безграничны!

Учить больше

Onyx — Hand-Painted.SVG 6 Font Pack — 13 долларов США

Созданный SilverStag, Onyx был создан как нечто отличное от того, что они обычно разрабатывают.Пакет Onyx поставляется с шестью необычными вариантами, которые могут предоставить вам все необходимое, если вы ищете что-то уникальное и отличное от того, что вы обычно используете. Пакет из шести включает 2 нарисованных вручную шрифта SVG в высоком разрешении, 2 обведенных шрифта, а если программное обеспечение, которое вы используете, не поддерживает SVG, 2 стандартных шрифта, так что вы также можете использовать их. Если вы готовы сделать что-то новое и выйти за пределы своей зоны комфорта, попробуйте Onyx — Hand-Painted.SVG 6 Font Pack.

Учить больше

НАБОР шрифтов дизайнера — $ 19

Набор шрифтов Designer’s Font BUNDLE, состоящий из 200 элементов и 95 шрифтов, действительно является мечтой дизайнера, как описал его создатель, KA Designs.Со шрифтами, которых нет даже в магазине KA Designs, этот набор — это как пропуск за кулисы на ваш любимый концерт. Несмотря на то, что некоторые шрифты в этом списке могут быть вам знакомы или даже использоваться в настоящее время, огромное количество шрифтов, которые вы можете использовать, является более чем достаточной причиной, чтобы выбрать этот набор.

Учить больше

Handie Fonts — более 1800 символов — 14 долларов США

Иногда лучший выбор, который вы можете сделать, — это простой и легко читаемый шрифт.Коллекция Handie Fonts от Trailhead Design Co. представлена в различных вариантах толщины и ширины, которые легко читать при любом размере, и представлены как с засечками, так и без засечек. Вы обязательно найдете отличный выбор среди 18 различных вариантов, которые отлично подходят как для проектов печати, так и для веб-дизайна. Доступен во всех форматах веб-шрифтов, что означает, что даже если ваша программа не работает с файлами SVG, вы все равно можете использовать этот шрифт для создания потрясающих работ.

Учить больше

Tangerine — Ретро шрифт — 14 долларов США

Шрифты с ретро-дизайном могут доставить массу удовольствия и добавить новую жизнь старому логотипу.Шрифт Tangerine — Retro от New Tropical Design призван передать приятную атмосферу 70-х годов, не создавая клона того, что создавалось тогда. В результате получился уникальный дизайн, который до сих пор сохраняет ощущение 1970-х годов, отдавая дань золотой эре брюк-клеш и диско-музыки. Шрифт идеально подходит для создания винтажных логотипов, он имеет заглавные и строчные буквы, а также цифры, знаки препинания и многоязычные буквы.

Учить больше

Microbrew Soft — 49 долларов

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

Учить больше

Hackney SVG — Жирный шрифт, раскрашенный вручную — 24 $

Шрифт Hackey, созданный Эллен Лафф, представляет собой шрифт без засечек, полностью раскрашенный вручную.Это придает шрифту грубый, смелый вид, сочетающийся с недостатками и приземленным реализмом. Сохраняя четкость, присущую настоящим нарисованным мазкам, в виде прозрачной текстуры, вы можете получить надлежащий эффект ручной росписи, даже не касаясь банки с краской. Шрифт, состоящий только из заглавных букв, есть две альтернативы для каждой буквы, чтобы сохранить индивидуальный вид. Hackney — отличный шрифт для любого проекта, о котором вы только можете подумать, и может добавить новое измерение к работе, которую вы уже делаете.

Учить больше

Скрипт Moonfrost — 16 $

С гладким современным стилем, но с резкими краями, напоминающими зимнюю холодную погоду, Moonfrost Script от JROH Creative — это шрифт с надписью от руки, который можно использовать для самых разных проектов, включая подписи, логотипы, приглашения на свадьбу и многое другое. .Имея более 400 глифов, а также специально закодированные шрифты, он поставляется с множеством альтернативных символов. Если вы хотите добавить стильного, но зимнего стиля в свой следующий проект, в прогнозе может быть сценарий Moonfrost.

Учить больше

Pure Heart — Шрифт OpenType SVG Brush — $ 19

Созданный как гиперреалистичный шрифт, максимально приближенный к нарисованному вручную, Pure Heart от Грега Николса помогает вывести вашу работу на новый уровень, привлекая внимание клиентов и дизайнеров.Используя новую технологию, которая делает шрифт еще более реалистичным, каждая буква была тщательно нарисована много раз, пока не стала идеальной, а затем отредактирована, чтобы текстура также была идеальной. Pure Heart — красивый шрифт, который добавит новый уровень реализма и творчества ко всему, на чем вы его используете.

Учить больше

Mourich Elegant Font — 11

долларов

Элегантный шрифт с засечками Mourich от Arterfak Project поставляется с двумя стилями, которые они рекомендуют для создания стильного минималистичного дизайна, который вы ищете.Тщательный дизайн с вниманием к штрихам для достижения среднего контраста. Это шрифт, состоящий только из заглавных букв, который также имеет заглавные буквы, что может быть очень полезно для заголовков или логотипов. Благодаря более чем 500 глифам, которые поставляются с функциями OpenType, вы можете с самого начала создавать потрясающие работы с этим невероятным шрифтом.

Учить больше

Mafelo SVG Font — $ 23

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

Учить больше

Шрифт

Black Caviar SVG — $ 16

Сохраняя все детали оригинальных рукописных букв в высоком разрешении, Black Caviar от Ивана Розенберга использует технологию OpenType SVG для создания действительно реалистичного вида.В набор входят шрифт OpenSVG, шрифт OpenSVG Alt Alternates, All Caps и многослойный файл Photoshop, если вы не можете получить доступ к шрифту OpenType SVG. Шрифт Black Caviar может добавить немного реализма и профессионализма в любой проект, в котором вы его используете, делая его более чем стоящим ваших денег.

Учить больше

Havana Sunset Font Duo + SVG — 11

долларов

Создание Сэма Парретта, Havana Sunset — это шрифт SVG, сочетающий аналоговый и цифровой формат, создавая модный шрифт без засечек, состоящий только из заглавных букв, беззаботный и в то же время текстурированный скриптовый шрифт.Это идеальный контраст для создания веселых, бесплатных и стильных дизайнерских работ. Хотя шрифта уже более чем достаточно, он также обладает дополнительными функциями. Включен полный альтернативный набор символов, а также дополнительная версия SCG, содержащая текстуры с высоким разрешением. Чтобы предоставить вам множество вариантов макета, он также включает версию с заливкой и контуром. Если бы у нас был шрифт, который был бы лучшим значением в нашем списке, это, безусловно, был бы он.

Учить больше

Script Neon 3D Lettering — 15 долларов США

Вы когда-нибудь видели неоновые вывески за пределами вашего местного бизнеса? И нет, Лас-Вегас не в счет.Неон может добавить невероятный вид любому знаку, а с помощью Script Neon 3D Lettering от TVartworks вы можете добавить сценарий в стиле ретро в любой из ваших проектов. В набор входят трехмерные надписи, цветные шрифты и даже графические элементы в качестве бонуса, так что вы можете создавать собственные сцены типографики. Надпись отлично подходит для всех типов проектов, включая социальные сети, плакаты, брендинг, чехлы для телефонов, футболки и блоги.

Учить больше

Париж | Font Duo + SVG с дополнительными материалами — 19 9000 долларов 7

Созданный Jen Wagner Co, Paris Font Duo — красивый шрифт с текстурированным карандашом.Вы можете чудесно создавать приглашения, цитаты, объявления и многое другое с помощью шрифта, который является столь же деликатным, сколь и реалистичным. Шрифт также имеет дополнения, включая бонусный пакет из 16 золотых элементов, которые вы можете добавить в свою работу для еще большей красоты. Шрифт Paris так же прекрасен и красив, как и город, от которого он получил свое название. Вы не ошибетесь, выбрав это для своего следующего проекта.

Учить больше

Hello Bloomie — Семейство шрифтов SVG — 25 долларов

Hello Bloomie от My Creative Land — многоязычное семейство шрифтов, содержащее как шрифты с засечками, так и шрифты кисти. Это шрифт, который представляет собой реалистичную кисть, чернила и текстуру бумаги.В комплекте с лигатурами, альтернативами и элементами дизайна семейство шрифтов предоставляет вам функции OpenType, которые вы можете использовать для создания удивительных и уникальных дизайнов, которые выглядят так, как будто они были созданы с помощью кисти. В набор входят параметры SVG с засечками и кистью, а также обычные параметры с засечками и кистью, если вы не можете получить доступ к файлам SVG.

Учить больше

Коллекция Викторианских шрифтов — $ 19

Есть что-то в том, как выглядит викторианский шрифт. Коллекция Victorian Fonts Collection от Burntilldead, наполненная ностальгией, дает вам шрифт, который вы можете использовать в своем дизайнерском проекте или даже на своем веб-сайте, чтобы придать ему более викторианский вид.Коллекции, наполненные более чем 1800 символами и функциями OpenType, предоставляют вам инструменты, необходимые для того, чтобы вернуть ваш проект во времени в более цивилизованную эпоху.

Учить больше

Затерянный в космосе — Обычный и цветной шрифт (SVG) — 10

долларов

Шрифт

The Lost in Space от Cosmic Store предоставляет креативщикам современный шрифт, созданный с использованием эффекта двойной экспозиции. Каждая буква имеет уникальный дизайн и даже имеет свою космическую предысторию. Набор типографики «Затерянный в космосе» разработан с учетом этого, поэтому в набор входят как цветные шрифты, так и обычные шрифты, а также векторные объекты, элементы и фоны, так что вы можете дать волю своему воображению!

Учить больше

Thunder Stone Font Duo — 18

долларов

Созданный Get Studio, Thunder Stone Font Duo, использующий технологию шрифтов SVG, предоставляет вам шрифт, который выглядит настолько реалистично, насколько это возможно.Thunder Stone — это маркер без шрифта, а также рукописный шрифт, который идеально гармонирует с типографикой, чтобы вы могли полностью использовать их в своих дизайнерских проектах. Эти шрифты идеально подходят для логотипов, брендов, сообщений в блогах, цитат, рекламы, журналов и дизайна продуктов. Нет ограничений на количество способов использования шрифта Thunder Stone в своей работе.

Учить больше

Лучшие шрифты SVG для дизайнеров

Шрифты

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

Связанные

Создание цветного шрифта SVG

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

Формат шрифта SVG

Во-первых, раньше был SVG как файл webfont в формате . Его суффиксы имени файла: .svg или сжатый zip-файлом .svgz . Забудьте об этом сразу, потому что в действительности он поддерживался Safari только на ранних iPhone. К счастью, он вымер. Он был огромен по сравнению с другими форматами шрифтов и не предлагал ничего, кроме простых контуров. Это означает: ни кернинга, ни хинтинга, ни других хороших вещей, которые не могут предоставить таблицы OpenType.Другими словами, это был даже не шрифт OpenType. Glyphs — это редактор шрифтов OpenType, поэтому он не может создавать такие шрифты SVG.

Этот учебник , а не , посвящен устаревшему формату файлов шрифтов SVG.

Таблица SVG OpenType

В настоящее время широко используются форматы файлов веб-шрифтов: WOFF и, постепенно набирая популярность, WOFF2. Конечно, это еще не все, но в двух словах, WOFF — это сжатые шрифты OpenType. Его настольные братья и сестры, CFF / OTF и TTF, также являются форматами OpenType, как со своими особенностями, так и с меньшей степенью сжатия, чем WOFF.Шрифты OpenType делают шрифты OpenType своей внутренней структурой, которая представляет собой набор так называемых таблиц OpenType , и одной из этих таблиц может быть таблица SVG, содержащая информацию на основе SVG. Шрифты, содержащие такую таблицу SVG, иногда называются цветными шрифтами OpenType-SVG или цветным шрифтом SVG .

Этот учебник — о цветных шрифтах OpenType-SVG.

В Glyphs есть два способа переноса информации SVG в шрифт: (A) из отдельного .svg файлов изображений или (B) из существующей настройки цветного шрифта. Последний может быть шрифтом слоя на разных мастерах, шрифтом CPAL / COLR с индексированными слоями Color или шрифтом sbix в стиле Apple со слоями iColor .

Вариант A: из файлов изображений SVG

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

Для подготовки мы рекомендуем сохранить ваш файл .glyphs в желаемом месте и создать подпапку под названием Images для файлов SVG. Это связано с тем, что в файле .glyphs хранятся только относительные пути к изображениям, и их легче хранить вместе, когда они находятся во вложенной папке.

Теперь нам нужен пример. Если у вас нет SVG под рукой, у меня есть для вас. Давайте попробуем анимацию вращающегося красного круга для заглавных букв O .Выберите и скопируйте (Cmd-C) этот SVG-код:

Вставьте его (Cmd-V) в новое окно любого текстового редактора по вашему выбору, например TextMate, SublimeText или Atom.

Затем сохраните файл в папке Images как O.svg . Итак, в Finder вся ваша установка может выглядеть так:

Вернувшись в файл .glyphs, подготовьте верхний регистр O. Откройте его в режиме редактирования и в палитре Layers нажмите кнопку Copy , чтобы добавить копию слоя, затем переименуйте его в svg (все в нижнем регистре) . Когда вы закончите, он должен выглядеть так:

Теперь дело в том, что все, что вы помещаете в мастер-слой, является черно-белым резервным глифом, который виден в приложениях, которые не могут отображать информацию о цвете, хранящуюся в таблице SVG.Если вам интересно, мастер-слой — это слой, выделенный жирным шрифтом в палитре Layers , в нашем примере тот, который называется «Обычный».

Но на новом слое svg вы можете перетащить файл изображения .svg. Он должен отображаться сразу. Однако вы не увидите анимации. Вы можете изменять размер и перемещать изображение по своему вкусу:

Замечание о интервале: слой svg наследует свою ширину от основного слоя, поэтому вам нужно вернуться к нему, если вы хотите разместить свой глиф.В нашем примере имеет смысл установить ширину 800, предполагая, что вы не масштабировали и не искажали размещенный SVG. Для этого щелкните слой Regular в палитре слоев, затем измените ширину в сером информационном поле на 800:

В любом случае экспортируйте шрифт как webfont: File> Export> Webfont , используйте WOFF и WOFF2 в качестве форматов. CFF или TTF значения не имеют:

На Mac Firefox — единственный браузер, поддерживающий шрифты OpenType-SVG. В Windows его также поддерживает Microsoft Edge.Итак, это те браузеры, к которым вам нужно будет иметь доступ, если вы хотите протестировать свой шрифт OpenType-SVG. С этой целью вы можете либо вызвать HTML-файл, содержащий код HTML и CSS для отображения WOFF, либо запустить сценарий Test> Webfont Test HTML из репозитория сценариев mekkablue. Этот сценарий создает HTML-файл для текущего шрифта в месте назначения экспорта веб-шрифтов, которое использовалось последним.

Если вы еще не знакомы со сценариями, уделите минуту и просмотрите инструкции по установке в файле readme сценариев, установите сценарии соответственно.Затем, удерживая нажатой клавишу Option, выберите Script> Reload Scripts (Cmd-Opt-Shift-Y).

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

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

Вариант Б: из существующего цветного шрифта

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

У вас есть три варианта:

Шрифт слоя: два или более мастеров, которые помещаются друг на друга. Мастера не обязательно должны быть совместимы и иметь назначенный им Master Color .
Шрифт CPAL / COLR: шрифт, содержащий глифы со слоями Color , каждый из которых связан с цветом в предопределенной цветовой палитре.
Шрифт sbix: шрифт, содержащий глифы с растровыми изображениями с различным разрешением, размещенными на слоях iColor .

Посмотрите варианты, сделайте свой выбор и прочтите ниже, чтобы узнать, как добавить экспорт SVG:

В случае CPAL / COLR: Следуйте инструкциям руководства. Убедитесь, что у вас есть одна или несколько цветовых палитр , настроенных в разделе Custom Parameters первого мастера в File> Font Info> Masters, и пронумерованные Color слои в глифах, т.е.е., Цвет 0 , Цвет 1 , Цвет 2 и т. д.

В Файл> Информация о шрифте> Экземпляры создайте новый экземпляр для шрифта, содержащего таблицу SVG. Дайте ему подходящее название стиля. Затем добавьте настраиваемый параметр Color Palette для SVG в раздел Custom Parameters экземпляра и установите его значение на индекс желаемой цветовой палитры. Если у вас есть только одна палитра, определенная в параметре Color Palettes , описанном выше, используйте 0 в качестве значения.

Затем добавьте настраиваемый параметр Экспорт таблицы SVG и установите его флажок. Если вам нужен чистый шрифт SVG, рассмотрите возможность добавления специального параметра Export COLR Table со снятым флажком.

В случае шрифта слоя: Следуйте инструкциям руководства. Убедитесь, что вы установили цвета с помощью параметра Master Color в File> Font Info> Masters .

В Файл> Информация о шрифте> Экземпляры создаст новый экземпляр для шрифта, содержащего таблицу SVG.Дайте ему имя стиля, например Regular или Multicolor или SVG или любое другое, имеющее смысл для вас. Затем добавьте в новый экземпляр пользовательский параметр Color Layers в SVG и убедитесь, что для него включено значение Value :

В случае sbix: Следуйте инструкциям руководства. Создайте новый экземпляр в Файл> Информация о шрифте> Экземпляры, и добавьте пользовательский параметр SBIX в SVG с предпочтительным размером iColor в качестве значения.Это позволит взять изображения sbix из слоев iColor с тем же индексом размера и превратить их в графику SVG. Например, если вы укажете 256 в качестве значения в пользовательском параметре, Glyphs будет искать все слои iColor 256 и преобразовывать их в SVG.

Если вам нужен чистый шрифт SVG, рассмотрите возможность добавления специального параметра Экспорт таблицы sbix со снятым флажком.

Теперь экспортируйте с Файл> Экспорт> Webfont (Cmd-E). Все, не более того.Протестируйте шрифт в Firefox, как описано выше (см. Вариант A).

Другие пользовательские параметры

В File> Font Info> Instances (Cmd-I), в пользовательских параметрах , вы можете добавить любой или все из этих трех параметров:

Экспортная таблица COLR
Экспорт таблицы SVG
Экспорт таблицы sbix

Они предназначены для управления тем, какие таблицы цветов создаются и фактически превращаются в шрифт OpenType, а какие нет.Чтобы уменьшить размер файла веб-шрифтов, вы можете включить экспорт одной из таблиц, но отключить все остальные. Например, если вы используете метод, описанный в Варианте B, для экспорта таблицы SVG на основе настройки CPAL / COLR, вы можете запретить создание таблицы COLR.

Подробнее о SVG

Мы только что поцарапали поверхность. Чтобы узнать больше о SVG и всех его возможностях, ознакомьтесь со спецификациями и примерами кода:

На момент написания этой статьи таблица SVG поддерживается в приложениях Firefox, Windows 10+ и Adobe.

Обновление 2017-01-20: добавлен Microsoft Edge в список поддерживаемых браузеров. Обновление
26.03.2018: добавлено преобразование sbix-to-SVG. Обновление
2018-04-14: Обновлена поддержка ОС / приложений SVG, спасибо, Behdad! Обновление
от 01.02.2019: исправлены опечатки и заменено слово «братья» на «братья и сестры». Спасибо, Натали! Обновление
15.11.2019: лучшее знакомство с «Вариантом Б».

21 великолепных SVG-шрифтов, которые сделают ваш дизайн привлекательным!

Последнее обновление: 22 марта 2021 г.

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

Неограниченное количество загрузок: 1 500 000+ шрифтов, бесплатных материалов и материалов для дизайна по

Что означает SVG?

Благодаря формату OpenType-SVG типографы могут наслаждаться большим разнообразием и гибкостью в своей работе. Масштабируемая векторная графика или сокращенно SVG считается сегодня «новым» стандартом для шрифтов и значков.Это потому, что они более доступны, легко настраиваются, их можно масштабировать или анимировать без потери качества.

Хотите создать собственную коллекцию OpenType-SVG? Почему бы не начать с этих потрясающих шрифтов SVG!

Необходимые шрифты SVG

1. Кисть Rapstar и шрифт SVG RapstarBF

В этот пакет входят два шрифта для отображения скриптов в стиле гранж от Cruzine , а также 8 дополнительных гранжевых фигур или графики для вашего удобства. .

Скачать Rapstar Brush и шрифт SVG

2. Шейкер TheShakerSVG

Создан, чтобы имитировать почерк Kaitlynn Albani из KA Designs, и эта кисть OTFten SVG ориентирована на . с оттенком шика.

Скачать The Shaker

3. Шрифт Seirra SVG Seirra

Делаете ли вы логотипы, плакаты, фирменные бланки или открытки, этот ручной кистью шрифт Maulana Creative придаст вашим проектам аутентичность. , элегантный вид.

Загрузить Seirra Typeface SVG

4. Ostinel SVG Font Ostinel

Гордо написанный от руки, Creamy Script рекомендует этот драгоценный камень для тех, кто работает над брендингом, свадьбой или любой работой, требующей немного красивой нежность.

Скачать шрифт Ostinel SVG

5. Шрифт SVG Total Rage Brush TotalRage

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

Скачать шрифт Total Rage Brush SVG

6. Karelle SVG TheKarelle

Слишком много урбанизации? Подчеркните естественные линии и изгибы с помощью этого органического шрифта с засечками от Sarid Ezra . 7

Скачать The Wilde

8. Candy Display Script CandyDisplayS

Сделайте эти плакаты, логотипы, журналы и рекламу популярными с помощью этого яркого и красочного сценария отображения из Twinbrush Image Forge ! С 17 росчерками и завитками в высоком разрешении вы можете чувствовать себя уверенно, завершая набор шрифтов с чутьем.

Скачать скрипт дисплея Candy

9. Другой вариант Другой вариант

Нет ничего лучше милого и причудливого рукописного шрифта, чтобы добавить желанный каллиграфический вид в любой современный проект.

Скачать Otherway

10. Almonte Almonte

Хотите создать привлекательный текст, которому позавидуют другие типографы? Тогда этот драгоценный камень от Greg Nicholls — это все, и даже больше.

Скачать Almonte

11. Мальтийский акварельный шрифт SVG MatleseSVG

Этот раскрашенный вручную SVG-шрифт от The Paper Town , вдохновленный красками моря, включает в себя обычный и курсивный варианты.

Скачать мальтийский SVG-акварельный шрифт

12. Wonderland SVG Script WonderlandSVG

С легкостью создавайте чудеса, используя этот супер-случайный каллиграфический скрипт. Получите реалистичный вид акварели с версией SVG, которая входит в комплект.

Загрузить сценарий SVG в стране чудес

13. Шрифт Stay Dreaming SVG StayDreaming

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

Скачать шрифт Stay Dreaming SVG

14. Paris Font Duo ParisDuo

Jen Wagner Co представляет этот текстовый SVG-скрипт с текстурой карандаша и жирный шрифт с минимальным шрифтом. Сделайте каждый дизайн особенным, включив в него любой из 16 золотых элементов, включенных в бонусный пакет.

Загрузить Paris Font Duo

15.Роскошный шрифт Роскошный

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

Загрузить Opulent Font

16. Avallon OpenType Avallon

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

Загрузить Avallon OpenType

17. Triester TriesterSVG

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

Скачать Triester

18. Hot Mess! SVG Font HotMess

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

Загрузить Hot Mess! Шрифт SVG

19. Brixton SVG BrxtnSVG

Семейство шрифтов, напечатанных вручную Эллен Лафф, отмечает оригинальный стиль высокой печати с его сильным стилем, недостатками и невероятной детализацией.

Загрузить Brixton SVG

20. Hackney SVG HackneySVG

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

Загрузить Hackney SVG

21. Stranger Times StrangerTimes

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

Скачать Stranger Times

22. Kamikaze Kamikaze

Kamikaze — это шрифт SVG — это маркер, который сделает любую подпись реалистичной, профессиональной и идеально соответствует бренду.

Загрузить Kamikaze

23. Rollete Qaku Rollete Qaku

Rollete Qaku — это шрифт SVG с океаническим, пляжным оттенком. Эту комбинацию рваной кисти и плавного изгиба невозможно превзойти в наши дни!

Скачать Rollete Qaku

Теги: добавить шрифт в фотошоп добавить шрифт сродства дизайнер добавить шрифт в Adobe Illustrator добавить шрифт в иллюстратор добавить шрифт в иллюстратор cc добавить шрифт в иллюстратор Mac добавить шрифт в фотошоп добавить шрифт в фотошоп cc добавить шрифты в иллюстратор cs6 добавить шрифты в фотошоп cc добавить шрифты в фотошоп cc 2018 добавить шрифт otf в фотошоп добавить шрифты в иллюстратор cc 2018 настроить цвет иллюстратора Adobe CC font manager Adobe cs6 шрифты Adobe Illustrator добавить шрифты Adobe Illustrator изменить цвет шрифта Adobe Illustrator цвет шрифта Adobe Illustrator png в svg Adobe Photoshop cc 2017 шрифты Adobe Photoshop cc шрифты Adobe Photoshop cs6 шрифты Adobe Photoshop cs6 папка со шрифтами Adobe Photoshop svg Adobe Pixel font Affinity Designer 2017 AI изменить цвет слоя avallon opentype svg font avallon svg font free download barbie font svg bitmap Факты босс детский шрифт svg cara установить Adobe Illustrator cc 2018 cara установить шрифт cara установить фотошоп cara menginstal fo nt cc излишки изменить все шрифты в Photoshop изменить цвет иллюстратора cc изменить цвет шрифта в Photoshop изменить цвет слоя иллюстратора изменить цвет шрифта фотошоп изменить шрифт в Adobe Illustrator изменить шрифт в иллюстраторе изменить шрифт на иллюстраторе изменить png изменить цвет иллюстратора svg цвет рождественский шрифт svg круг монограмма шрифт svg цвет растровый шрифт наложение цвета иллюстратор замена цвета фотошоп como шрифт como usar adobe photoshop cc 2017 como usar photoshop mac конвертировать шрифт в svg онлайн конвертировать шрифт в svg путь конвертировать svg в шрифт значок онлайн конвертировать ttf в svg шрифт круто svg проекты копировать svg photoshop coreldraw трюки и советы создать файл шрифта из svg создать файл svg в фотошопе создать svg из фотошопа создать svg в фотошопе курсивные шрифты svg пользовательский шрифт в svg шрифт disney svg проблемный шрифт svg загрузить шрифт потрясающие значки svg загрузить шрифты для Adobe Illustrator cs6 dr seuss шрифт svg редактировать svg в фотошопе cs6 редактировать svg фотошоп первый svg cc font awesome ico ns скачать svg font awesome icons svg download font awesome svg font awesome svg icons font awesome svg icons download font face svg font icon svg font icons vs svg font illustrator cc font manager illustrator font photoshop cc font photoshop cc 2018 Произойдет замена шрифта окно шрифта Photoshop иллюстратор шрифты дизайн 2017 шрифты доступны в фотошопе шрифты для аффинити дизайнер шрифты для иллюстратора Mac шрифты для фотошопа cs6 Windows шрифты для формата svg svg иллюстратор друзья шрифт svg fx цвет шрифта gfxworld векторная графика глифы иллюстратор хакни svg жирный шрифт с ручной росписью гарри поттер шрифт svg гавана закат font duo svg free download как изменить цвет шрифта в indesign как установить шрифты в фотошоп как добавить шрифт в фотошоп cs6 как добавить шрифт в фотошоп как добавить шрифт в Adobe Illustrator как добавить шрифт в иллюстратор как сделать добавить новый шрифт в иллюстратор как добавить шрифт в фотошоп cs6 как добавить шрифты в иллюстратор как добавить шрифты в adobe il lustrator как добавить шрифты в cs6 как добавить шрифты в иллюстратор как добавить шрифты в иллюстратор mac как добавить шрифты в иллюстратор на mac как добавить шрифты в фотошоп cc как добавить шрифты в фотошоп cc 2017 как добавить шрифты в фотошоп cc windows 10 как добавить шрифты в Photoshop cs6 mac как добавить шрифты в Photoshop cs6 windows как добавить новый шрифт в иллюстратор как добавить новые шрифты в иллюстратор как добавить новые шрифты в Photoshop cc как добавить новые шрифты в Photoshop cs6 как сделать добавить контур к шрифту в фотошопе как изменить цвет текстуры в иллюстраторе как изменить цвет шрифта в indesign как изменить цвет шрифта в фотошопе как изменить цвет шрифта в фотошопе cs6 как изменить цвет шрифта в дизайне как изменить цвет шрифта в иллюстраторе как изменить цвет png в indesign как преобразовать png в svg в фотошопе cs6 как загрузить шрифты для фотошопа cs6 как загрузить шрифты в иллюстратор cs6 как отредактировать svg на Mac как найти глифы в фотошопе как получить шрифты для иллюстратора как получить шрифты в иллюстраторе как получить новые шрифты в иллюстраторе как применить градиент шрифта в иллюстраторе как вставить шрифты в иллюстратор как вставить глифы в фотошоп как установить шрифты в фотошоп как установить шрифт в Adobe Illustrator как установить шрифт на indesign как установить шрифты Adobe Illustrator как установить шрифты для Adobe Illustrator как установить шрифты для Illustrator как установить шрифты в Adobe Illustrator как установить шрифты в Adobe Indesign как установить шрифты в Adobe Photoshop как установить шрифты в Adobe фотошоп cs6 как установить шрифты в After Effects cs6 как установить шрифты в иллюстраторе как установить шрифты в фотошопе как установить шрифты в фотошоп cc 2017 как установить шрифты в indesign как установить шрифты в фотошоп cs6 как установить шрифты в фотошоп cs6 как установить глиф на Mac как установить градиенты в фотошоп cc как установить градиенты в фотошоп cs6 как установить новые шрифты в фотошоп c s6 как установить шрифты svg как установить шрифты svg cricut как загрузить шрифты в фотошоп cs6 как загрузить шрифты в иллюстратор как сделать фон прозрачным в фотошопе cc 2017 как сделать файлы svg в фотошопе как сделать файлы svg фотошоп как сделать значок svg в фотошопе как открыть шрифт в иллюстраторе как поместить шрифт в иллюстратор как поставить шрифты в фотошоп cs6 как растрировать текст в иллюстраторе как использовать глифы в фотошопе cs6 как использовать шрифт opentype в иллюстраторе как использовать opentype в иллюстратор как использовать otf-шрифты как использовать svg как использовать svg в фотошопе как использовать росчерки в шрифтах я люблю блестящий шрифт svg icon font в svg illustrator окно шрифтов иллюстратор как добавить шрифты иллюстратор импорт шрифтов иллюстратор открыть svg импорт шрифта импорт Adobe Illustrator шрифт в иллюстратор импортировать шрифты в фотошоп cs6 indesign растрировать текст вставить шрифт в фотошоп установить шрифт в иллюстраторе установить шрифт Adobe после эффектов установить шрифт Adobe Illustrator в stall font adobe photoshop cs6 установить шрифт photoshop установить шрифт в иллюстратор jurassic park font svg m & m font svg make font from svg make icon font from svg make svg font martin font svg open svg font in illustrator open svg in photoshop open svg in photoshop cs5 open svg Photoshop opentype скрипт opentype svg цветные шрифты opentype svg редактор шрифтов opentype svg шрифты скачать роскошный шрифт svg otf совместимость otf поддержка браузера шрифтов otf установщик шрифтов otf в svg paris font duo svg с extrashop потрясающие шрифты Photoshop cc font установить photoshop cs6 fonts панель установить фотошоп фотошоп как добавить шрифты фотошоп linux 2017 фотошоп сделать svg фотошоп на Linux 2017 фотошоп svg photoshop svg поддержка png в svg с цветом powerpoint svg mac rae dunn svg font растрировать текст в иллюстраторе перекрасить иллюстратор cc роялти бесплатные шрифты скриптовые шрифты в Adobe Illustrator скрипт svg font Звездные войны шрифт svg странные вещи шрифт svg svg поддержка браузера 2017 svg кисть шрифт svg c аллиграфия шрифт svg цветные шрифты svg редактировать иллюстратор svg файл фотошоп cs6 svg шрифт svg шрифт жирный svg шрифт css svg шрифт скачать svg шрифт редактор svg пример шрифта svg шрифт глиф svg шрифт html svg библиотека шрифтов svg шрифт фотошоп svg размер шрифта настроить svg шрифты svg в фотошопе cc svg означает svg монограммные шрифты svg несколько цветов svg в фотошопе svg opentype функция в фотошопе svg скриптовые шрифты svg цвет текста svg в иконку шрифт svg в psd со слоями svg в ttf конвертер шрифтов онлайн текстурные шрифты иллюстратор ttf в svg шрифт ttf в svg конвертер шрифтов типография svg с использованием глифов в фотошопе что означает otf в тексте что означает растрирование в фотошопе что означает svg для каких шрифтов в фотошопе что такое svg-шрифт что такое eot font

SVG-шрифты — Meta

font-family	стили шрифтов	Наборы символов ^[1] ^[2]	Источник	Лицензия
аакар	средний	Латинский (гуджарати)
Abyssinica SIL	Обычный	Латинский, Эфиопский	[2]	SIL Лицензия открытого шрифта
Аль-Арабия	Обычный	Латинский, арабский
AlBattar	Обычный	Латинский, арабский
AlHor	Обычный	Латинский, арабский
Аль-Манзома	Обычный	Латинский, арабский
AlYarmook	Обычный	Латинский, арабский
Амири Коран	Обычный	Арабский
Амири	Обычный, жирный, наклонный, жирный наклонный	Латинский, арабский
Ани (অনি Dvf)	Обычный	латинский, бенгальский	[3]?
AnjaliOldLipi	Обычный	латинский, малаялам	[4]	SIL Лицензия открытого шрифта
AR PL UKai CN (大陆楷体)	Книга	Латиница, греческий, кириллица, математика, китайский, японский	[5] (мертв?)
AR PL UKai HK (香港楷體)	Книга	Латиница, греческий, кириллица, математика, китайский, японский	«
AR PL UKai TW MBE (台灣楷體 + 台灣方言音符號)	Книга	Латиница, греческий, кириллица, математика, китайский, японский	«
AR PL UKai TW (台灣楷體)	Книга	Латиница, греческий, кириллица, математика, китайский, японский	«
AR PL UMing CN (大陆细明体)	Свет	Латиница, греческий, кириллица, математика, китайский, японский	«
AR PL UMing HK (香港細明體)	Свет	Латиница, греческий, кириллица, математика, китайский, японский	«
AR PL UMing TW MBE (台灣細明體 + 台灣方言音符號)	Свет	Латиница, греческий, кириллица, математика, китайский, японский	«
AR PL UMing TW (台灣細明體)	Свет	Латиница, греческий, кириллица, математика, китайский, японский	«
Араб	Обычный	Латинский, арабский
Бандаж (반달)	Обычный	Латиница, математика, корейский	Debian ttf-alee
Bangwool (방울)	Обычный	Латиница, математика, корейский	Debian ttf-alee
Каладеа	Обычный, полужирный, курсив, полужирный курсив	Латиница, математика
Карлито	Обычный, полужирный, курсив, полужирный курсив	Латиница, греческий, кириллица, математика
Чандас	Обычный	Латиница, кириллица, деванагари, математика
см x 10	Обычный	Математика
cmmi10	Обычный	Латинский, Греческий
cmr10	Обычный	Латинский
cmsy10	Обычный	Математика
Comfortaa	Обычный, Светлый, Полужирный	Латиница, греческий, кириллица, математика
Кортоба	Обычный	Латинский, арабский
Дэвид CLM	средний, средний курсив, полужирный, жирный шрифт	латынь, иврит
DejaVu Sans	Книга, полужирный, наклонный, полужирный наклонный	Латинский, греческий, кириллица, армянский, иврит, арабский, NKo, лаосский, грузинский, канадские аборигены, огам, математика, шрифт Брайля, тифинаг, ицзин, лису, старый курсив, тай-сюань-цзин, смайлики	debian fonts-dejavu-core	Авторские права, Авторские права Arev Fonts, Общественное достояние
DejaVu Sans Condensed	Книга, полужирный, наклонный, полужирный наклонный	Латинский, греческий, кириллица, армянский, иврит, арабский, NKo, лаосский, грузинский, канадские аборигены, огам, математика, шрифт Брайля, тифинаг, ицзин, лису, старый курсив, тай-сюань-цзин, смайлики	debian fonts-dejavu-core	Авторские права, Авторские права Arev Fonts, Общественное достояние
DejaVu Sans Mono	Книга, полужирный, наклонный, полужирный наклонный	Латинский, греческий, кириллица, армянский, арабский, лаосский, грузинский, математика	debian fonts-dejavu-core	Авторские права, Авторские права Arev Fonts, Общественное достояние
DejaVu Serif	Книга, полужирный, курсив, полужирный курсив	Латинский, греческий, кириллица, армянский, грузинский, математика, шрифт Брайля	debian fonts-dejavu-core	Авторские права, Авторские права Arev Fonts, Общественное достояние
DejaVu Serif Condensed	Книга, полужирный, курсив, полужирный курсив	Латинский, греческий, кириллица, армянский, грузинский, математика, шрифт Брайля	debian fonts-dejavu-core	Авторские права, Авторские права Arev Fonts, Общественное достояние
Димна	Обычный	Латинский, арабский
Дроид Арабский Куфи	Обычный, Полужирный	Арабский
Дроид Арабский Насх	Обычный, Полужирный,	Арабский
Droid Naskh Shift Alt	Обычный	Латинский, арабский
Droid Sans Arabic	Обычный	Арабский
Droid Sans Armenian	Обычный	Армянский
Droid Sans Ethiopic	Обычный, Жирный	Эфиопский язык
Droid Sans Fallback	Обычный	Латинский, греческий, кириллица, корейский, математические, японский, китайский
Droid Sans Georgian	Обычный	Грузинский
Droid Sans Hebrew	Обычный, Жирный	Еврейский
Droid Sans Japanese	Обычный	японский, китайский
Droid Sans Mono	Обычный	Латиница, греческий, кириллица, математика
Droid Sans	Обычный, Жирный	Латиница, греческий, кириллица, математика
Droid Serif	Обычный, полужирный, курсив, полужирный курсив	Латиница, греческий, кириллица, математика
Дьюти	Обычный	латинский, малаялам
EB Garamond Initials	Обычный	(латиница)	[6]	SIL Лицензия открытого шрифта
EB Garamond Initials Fill1	Обычный	(латиница)	[7]	SIL Лицензия открытого шрифта
EB Garamond Initials Fill2	Обычный	(латиница)	[8]	SIL Лицензия открытого шрифта
EB Garamond SC 08	Обычный	Латиница, греческий, кириллица	[9]	SIL Лицензия открытого шрифта
EB Garamond 08	Обычный, Курсив	Латиница, греческий, кириллица	[10]	SIL Лицензия открытого шрифта
EB Garamond 12	Обычный, Курсив	Латиница, греческий, кириллица, математика	[11] [12]	SIL Лицензия открытого шрифта
Электрон	Обычный	Латинский, арабский
esint10	Обычный	Математика
eufm10	Обычный	Латинский
Ынджин Наксео (은진 낙서)	Обычный	Латиница, математика, корейский	Debian ttf-alee
Ынджин (은진)	Обычный	Латиница, математика, корейский	Debian ttf-alee
Ezra SIL	Обычный	латынь, иврит
Ezra SIL SR	Обычный	латынь, иврит	[13]
FontAwesome	Обычный	Иконки
Франк Рюль CLM	Medium, MediumOblique, Bold, BoldOblique	латынь, иврит
FreeMono	Обычный, полужирный, наклонный, полужирный наклонный	Латинский, греческий, кириллица, армянский, иврит, арабский, грузинский, чероки, рунический, математический, шрифт Брайля, Кая Ли, старый курсив
FreeSans	Обычный, полужирный, наклонный, полужирный наклонный	Латинский, греческий, кириллица, армянский, иврит, сирийский, деванагари, бенгальский, гурмухи, малаялам, грузинский, чероки, канадские аборигены, математика, тифинаг, вай, угаритский, староперсидский, османья, финикийский
FreeSerif	Обычный, полужирный, курсив, полужирный курсив	Латинский, греческий, кириллица, армянский, иврит, арабский, тхана, деванагари, бенгальский, гурмукхи, гуджарати, ория, тамильский, малаялам, сингальский, тайский, грузинский, эфиопский, чероки, хануно, тай-ле, бугийский, математика, глаголица Коптский, готический, музыкальный
Фурат	Обычный	Латинский, арабский
Гаруда	Полужирный, Полужирный Oblique, Книжный, Наклонный	Латинский, Тайский	[14]	Бесплатное
Gentium Basic	Обычный, полужирный, курсив, полужирный курсив	Латиница, математика
Gentium Book Basic	Обычный, полужирный, курсив, полужирный курсив	Латиница, математика
Gentium	Обычный, Курсив	Латиница, греческий, кириллица
GentiumAlt	Обычный, Курсив	Латиница, греческий, кириллица
Гранада	Обычный	Латинский, арабский
График	Обычный	Латинский, арабский
Губби	Обычный	Каннада
Guseul (구슬)	Обычный	Корейский	Debian ttf-alee
Хадасим CLM	Regular, RegularOblique, Полужирный, BoldOblique	латынь, иврит
Хани	Обычный	Латинский, арабский
Харамейн	Обычный	Латинский, арабский
Хома	Обычный	Арабский	пакет debian fonts-farsiweb
Хор	Обычный	Латинский, арабский
IPAexGothic	Обычный	Латиница, греческий, кириллица, математика, китайский, японский
IPAexMincho	Обычный	Латиница, греческий, кириллица, математика, китайский, японский
IPAG Готический	Обычный	Латиница, греческий, кириллица, математика, китайский, японский
IPAMincho	Обычный	Латиница, греческий, кириллица, математика, китайский, японский
IPAP Готический	Обычный	Латиница, греческий, кириллица, математика, китайский, японский
IPAP Минчо	Обычный	Латиница, греческий, кириллица, математика, китайский, японский
Джамрул	Обычный	латинский, бенгальский
Япония	Обычный	Латинский, арабский
Струя	Обычный	Латинский, арабский
Юникод	Обычный, полужирный, курсив, полужирный курсив	Латинский, греческий, рунический, математический, готический
KacstArt	Среднее	Арабский
KacstBook	Среднее	Арабский
Kacst Декоративный	Среднее	Арабский
KacstDigital	Среднее	Арабский
KacstFarsi	Среднее	Арабский
KacstLetter	Среднее	Арабский
KacstNaskh	Среднее	Арабский
KacstOffice	Среднее	Арабский
KacstOne	Полужирный, Обычный	Арабский
KacstPen	Среднее	Арабский
KacstPoster	Среднее	Арабский
KacstQurn	Среднее	Арабский
KacstScreen	Среднее	Арабский
KacstTitleL	Среднее	Арабский
KacstTitle	Среднее	Арабский
Калапи	Обычный	Гуджарати
Калимати (नालिमाटी)	Обычный (कालिमाटी)	латинский, деванагари
Каляни	Книга	Малаялам
Кайраван	Обычный	Латинский, арабский
Kedage	нормальный, нормальный, курсив, полужирный, полужирный, курсив	Каннада
Кетер YG	Medium, MediumOblique, Bold, BoldOblique	латынь, иврит
Халид	Обычный	Латинский, арабский
Кхмерский OS Баттамбанг	Обычный	Латиница, кхмерский, математика
Кхмерский OS Bokor	Обычный	Латиница, кхмерский, математика
Кхмерское содержание ОС	Обычный	Латиница, кхмерский, математика
Кхмерский OS Fasthand	Обычный	Латиница, кхмерский, математика
Кхмерский OS Freehand	Обычный	Латиница, кхмерский, математика
Khmer OS Metal Chrieng	Обычный	Латиница, кхмерский, математика
Кхмерский OS Muol Light	Обычный	Латиница, кхмерский, математика
Кхмерский OS Muol Pali	Обычный	Латиница, кхмерский, математика
Кхмерский OS Muol	Обычный	Латиница, кхмерский, математика
Кхмерский OS	Обычный	Латиница, кхмерский, математика
Кхмерская ОС Сиемреап	Обычный	Латиница, кхмерский, математика
Кхмерская система OS	Обычный	Латиница, кхмерский, математика
Киннари	Средний, Курсив, Наклонный, Полужирный, Полужирный, курсив, Полужирный Обликованный	Латинский, Тайский
Коччи Готика	Обычный	Латиница, греческий, кириллица, математика, китайский, японский
Кочи Минчо	Обычный	Латиница, греческий, кириллица, математика, китайский, японский
Лаксаман	Обычный, полужирный, курсив, полужирный курсив	Латиница, тайский, математика
Латиф	Обычный	Латинский, арабский
Лато	Обычный, Светлый, Тонкий, Линия роста волос, Средний, Полужирный, Полужирный, Толстый, Черный, Курсив, Светлый курсив, Тонкий курсив, Волосный курсив, Средний курсив, Полужирный курсив, Полужирный курсив, Полужирный курсив, Черный курсив	Латиница, греческий, кириллица, математика
Liberation Mono	Полужирный, Полужирный Курсив, Курсив, Обычный	Латиница, греческий, кириллица, математика	[15]	SIL Лицензия открытого шрифта
Liberation Sans	Полужирный, Полужирный Курсив, Курсив, Обычный	Латиница, греческий, кириллица, математика	[16]	SIL Лицензия открытого шрифта
Liberation Sans Narrow	Полужирный, Полужирный Курсив, Курсив, Обычный	Латиница, греческий, кириллица, математика	[17]	SIL Лицензия открытого шрифта
Liberation Serif	Полужирный, Полужирный Курсив, Курсив, Обычный	Латиница, греческий, кириллица, математика	[18]	SIL Лицензия открытого шрифта
Лихан	Обычный	латинский, бенгальский
LKLUG	Обычный	Сингальский
Лохит Ассамский	Обычный	Бенгальский
Лохит Бенгали	Обычный	Бенгальский
Лохит Деванагари	Обычный	Деванагари
Лохит Гуджарати	Обычный	Гуджарати
Лохит Каннада	Обычный	Каннада
Лохит Малаялам	Обычный	Малаялам
Лохит Ория	Обычный	Ория
Лохит Пенджаби	Обычный	Гурмухи
Лохит Тамил	Обычный	Тамил
Лохит Тамил Классик	Обычный	Тамил
Лохит телугу	Обычный	телугу
Лома	Полужирный, Полужирный Oblique, Книжный, Наклонный	Латинский, Тайский
Маньчжурский	Обычный (Обычный, обычный, Стандартный, Κανονικά, Normaali, Normál, Normale, Standaard, Normalny, Обычный, Normálne, Navadno, Arrunta)	Латинский, Монгольский
Машк	Обычный, Жирный	Латинский, арабский
Meera	Обычный	латинский, малаялам
Металл	Обычный	Латинский, арабский
MgOpen Canonica	Полужирный, Полужирный Курсив, Курсив, Обычный	Латинский, Греческий, Математический
MgOpen Cosmetica	Полужирный, полужирный наклонный, наклонный, стандартный	Латинский, Греческий
MgOpen Modata	Полужирный, Полужирный Облики, Наклонный, Обычный	Латинский, Греческий
MgOpen Moderna	Полужирный, Полужирный Oblique, Наклонный, Обычный	Латинский, Греческий
Мириам CLM (מרים)	Книга (קל), жирный (כבד)	Еврейский
Мириам Моно CLM	Book, Bold, Oblique, BoldOblique	латынь, иврит
Mitra Mono (মিত্র)	Обычный	латинский, бенгальский
mry_KacstQurn	Обычный	Арабский
msam10	Обычный	Математика
MSBM10	Обычный	(латиница), математика
Мукти узкий (মুক্তি পাতনা)	Обычный, Жирный	Латинский, бенгальский
Нада	Обычный	Латинский, арабский
Нафис (Nafees Web Naskh)	Обычный	Латинский, арабский
Нагам	Обычный	Латинский, арабский
Накула	Обычный	Латинский, греческий, кириллица, деванагари, математика
Навилу	Обычный	Каннада
Назли	Полужирный, Обычный	Латинский, арабский	пакет debian fonts-farsiweb
Ницца	Обычный	Латинский, арабский
Нораси	полужирный, полужирный, курсив, наклонный, обычный	Латинский, Тайский
Noto Sans Armenian	Обычный, Жирный	Армянский
Noto Sans Devanagari UI	Обычный, Жирный	Деванагари
Noto Sans Devanagari	Обычный, Полужирный	Деванагари
Noto Sans Ethiopic	Обычный, Жирный	Эфиопский язык
Noto Sans Georgian	Обычный, Жирный	Грузинский
Noto Sans Hebrew	Обычный, Полужирный	Еврейский
Noto Sans Khmer UI	Обычный, Жирный	кхмерский
Noto Sans Khmer	Обычный, Жирный	кхмерский
Noto Sans Lao UI	Обычный, Полужирный	Лаос
Noto Sans Lao	Обычный, Жирный	Лаос
Noto Sans Tamil UI	Обычный, Жирный	Тамил
Noto Sans Tamil	Обычный, Полужирный	Тамил
Noto Sans Thai UI	Обычный, Полужирный	Тайский
Noto Sans Thai	Обычный, Жирный	Тайский
Noto Sans UI	Обычный, полужирный, курсив, полужирный курсив	Латиница, греческий, кириллица, математика
Noto Sans	Обычный, полужирный, курсив, полужирный курсив	Латиница, греческий, кириллица, математика
Noto Serif Армянский	Обычный, Жирный	Армянский
Noto Serif Грузинский	Обычный, Полужирный	Грузинский
Noto Serif Lao	Обычный, Жирный	Лаос
Тайский язык с засечками	Обычный, Жирный	Тайский
Noto Serif	Обычный, полужирный, курсив, полужирный курсив	Латиница, греческий, кириллица, математика
Nuosu SIL	Обычный	латиница, Yi
ori1Uni (уткал)	Среднее	латиница, ория
Остора	Обычный	Латинский, арабский
Ouhod	Полужирный	Латинский, арабский
Padauk	Regular, Book, Bold, Book Bold	Latin, Myanmar
padmaa (padmmaa)	Normal (regular, Medium), Bold 1.1	Латинский (гуджарати)
Петра	Обычный	Латинский, арабский
Phetsarath OT	Обычный	Латинский, Лаосский
Pothana2000	Обычный	телугу
Purisa	Средний, Полужирный, Наклонный, Полужирный Облики	Латинский, Тайский
Рачана	Обычный	латинский, малаялам
Рагху Малаялам	Sans	Малаялам
Rasheeq	Полужирный	Латинский, арабский
Рехан	Обычный	Латинский, арабский
Рекха	Среднее	Латинский (гуджарати)
RSFS10	Роман	(латиница)
Saab	Обычный	Гурмухи
Сахадева	Обычный	Латинский, греческий, кириллица, деванагари, математика
Салем	Обычный	Латинский, арабский
Саманата	Обычный	латинский, деванагари
Самьяк Деванагари	Обычный	Деванагари
Самьяк Гуджарати	Обычный	Гуджарати
Самьяк Малаялам	Обычный	Малаялам
Самьяк Тамил	Обычный	Тамил
Савасди	Полужирный, Полужирный Oblique, Наклонный, Обычный	Латинский, Тайский
Шахерезада	Обычный	Латинский, арабский
Шадо	Обычный	Латинский, арабский
Шарджа	Обычный	Латинский, арабский
Шофар	Regular, RegularOblique, Полужирный, BoldOblique	латынь, иврит
Простой CLM	Medium, MediumOblique, Bold, BoldOblique	латынь, иврит
Синдбад	Обычный	Латинский, арабский
Стам Ашкеназ CLM	Среднее	Еврейский
Stam Sefarad CLM	Среднее	Еврейский
stmary10	Роман	Математика
Сурума	Среднее	латинский, малаялам
TakaoExGothic (TakaoEx ゴシック)	Обычный	Латиница, греческий, кириллица, математика, японский, китайский
TakaoExMincho (TakaoEx 明朝)	Обычный	Латиница, греческий, кириллица, математика, японский, китайский
Такао Готика (Такао ゴシック)	Обычный (標準)	Латиница, греческий, кириллица, математика, японский, китайский
Такао Минчо (Такао 明朝)	Обычный (標準)	Латиница, греческий, кириллица, математика, японский, китайский
TakaoP Готика (Takao P ゴシック)	Обычный	Латиница, греческий, кириллица, математика, японский, китайский
ТакаоПМинчо (Такао П 明朝)	Обычный	Латиница, греческий, кириллица, математика, японский, китайский
Тараблус	Обычный	Латинский, арабский
Толот	Обычный	Латинский, арабский
Tibetan Machine Uni	Обычный	Латиница, тибетский, математика
Титр	Полужирный	Арабский	пакет debian fonts-farsiweb
TlwgMono	Полужирный, Полужирный Облики, Средний, Наклонный	Латинский, Тайский
TlwgTypewriter	Полужирный, Полужирный Облики, Средний, Наклонный	Латинский, Тайский
Tlwg Typist	Полужирный, Полужирный Облики, Средний, Наклонный	Латинский, Тайский
Tlwg Typo	Полужирный, Полужирный Облики, Средний, Наклонный	Латинский, Тайский
TSCu_Comic	Обычный	Латинский, Тамильский
TSCu_Paranar	Полужирный, Курсив, Обычный	Латинский, Тамильский
TSCu_Times	Обычный	Латинский, Тамильский
Ubuntu	Обычный, светлый, средний, полужирный, курсив, светлый курсив, средний курсив, полужирный курсив	Латиница, греческий, кириллица, математика	ttf-ubuntu-font-family [19]	Лицензия шрифта Ubuntu (аналог OFL)
Сжатая версия Ubuntu	Обычный	Латиница, греческий, кириллица, математика	ttf-ubuntu-font-family [20]	Лицензия шрифта Ubuntu (аналог OFL)
Ubuntu Mono	Полужирный, Полужирный Курсив, Курсив, Обычный	Латиница, греческий, кириллица, математика	ttf-ubuntu-font-family [21]	Лицензия шрифта Ubuntu (аналог OFL)
Умпуш	Book, Light, Bold, Oblique, LightOblique, BoldOblique	Латинский, Тайский
UnBatang (은 바탕)	Обычный, Жирный	Латинский, греческий, кириллица, корейский, математические, японский, китайский
Ундинару (은 디 나루)	Обычный, Светлый, Полужирный	Латинский, греческий, кириллица, корейский, математические, японский
UnDotum (은 돋움)	Обычный, Жирный	Латинский, греческий, кириллица, корейский, математические, японский, китайский
UnGraphic (은 그래픽)	Полужирный, Обычный	Латинский, греческий, кириллица, корейский, математические, японский
UnGungseo (은 궁서)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский, китайский
UnJamoBatang (은 자모 바탕)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский
UnJamoDotum (은 자모 돋움)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский
UnJamoNovel (은 자모 노벨)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский
UnJamoSora (은 자모 소라)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский
УнПенхеулим (은 펜 흘림)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский
UnPen (은 펜)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский
UnPilgia (은 필기 a)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский
UnPilgi (은 필기)	Полужирный, Обычный	Латинский, греческий, кириллица, корейский, математические, японский
УнСинмун (은 신문)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский, китайский
UnTaza (은 타자)	Обычный	Латинский, Корейский
UnVada (은 바다)	Обычный	Латинский, греческий, кириллица, корейский, математические, японский
UnYetgul (은 옛글)	Полужирный, Обычный	Латинский, греческий, кириллица, корейский, математические, японский, китайский
Vemana2000	Обычный	телугу
VL Готика (VL ゴシック)	Обычный	Латинский, греческий, кириллица, математика, китайский, японский, смайлики
VL PGothic (VL P ゴシック)	Обычный	Латинский, греческий, кириллица, иврит, математика, китайский, японский, смайлики
Вари	Полужирный, Полужирный Oblique, Книжный, Наклонный	Латиница, тайский, математика
wasy10	Обычный	(разное)
WenQuanYi Zen Hei Mono (文泉驛等寬正黑, 文泉驿等宽正黑)	Обычный	Латинский, греческий, кириллица, корейский, математика, китайский, японский, ицзин, тай-сюань-цзин
WenQuanYi Zen Hei Sharp (文泉驛點陣正黑, 文泉驿点阵正黑)	Обычный	Латинский, греческий, кириллица, корейский, математика, китайский, японский, ицзин, тай-сюань-цзин
WenQuanYi Zen Hei (文泉驛正黑, 文泉驿正黑)	Обычный	Латинский, греческий, кириллица, корейский, математика, китайский, японский, ицзин, тай-сюань-цзин

Шрифты OpenType SVG в печати: известные проблемы и рекомендации

Шрифты OpenType SVG (масштабируемая векторная графика) не являются чем-то новым.Первоначально предназначенные для веб-дизайна, шрифты OpenType SVG начинают появляться в печатных изданиях и вызывают беспокойство в полиграфической отрасли среди дизайнеров, издателей, полиграфистов и компаний-разработчиков программного обеспечения.

О шрифтах OpenType SVG

Adobe описывает шрифты OpenType SVG как «формат шрифта, в котором все или только некоторые из глифов шрифта OpenType представлены как изображения SVG (масштабируемая векторная графика). Это позволяет отображать несколько цветов и градиентов в одном глифе.«Из-за этих особенностей эти шрифты также называются« цветными шрифтами ». Помимо шрифтовых шрифтов, этот шрифт также отображается как Emojis (как на смартфонах).

Шрифты OpenType SVG в печати

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

Некоторое программное обеспечение, такое как Photoshop CC, Illustrator CC и InDesign CC, поддерживает шрифты OpenType SVG, и эти шрифты доступны по подписке на Photoshop CC и Illustrator CC.Хотя шрифты OpenType SVG можно применять в поддерживаемых программах, упомянутых выше, существуют известные проблемы (выявленные Adobe) в Illustrator CC и InDesign CC (хотя группы разработчиков программного обеспечения работают над их исправлением). Вы можете столкнуться со следующими проблемами:

Глифы могут отображаться неправильно после экспорта в PDF.
При применении эффектов «Прозрачность», «Повернуть» или «Отражение» к цветным шрифтам SVG эффекты могут быть потеряны или символы могут смещаться со своих исходных позиций при создании контуров глифов.
При установке текста по вертикали позиции символов могут отображаться по-другому после экспорта.
При размещении текста по спиральной траектории символы могут отображаться неправильно.
Могут выпадать символы.
При преобразовании из цветного в черно-белое в PDF-файле внешний вид может измениться.

Примеры:

Цветной Trajan OpenTypeSVG

Emoji One Color OpenType SVG

Дополнительные ресурсы

Sheridan предлагает несколько удобных руководств, которые помогут подготовить ваши файлы к печати, в том числе одно о том, как экспортировать в PDF из Adobe InDesign CC 2018.

adobe-type-tools / opentype-svg: Инструменты и образцы файлов для создания OpenType-SVG fonts

GitHub — adobe-type-tools / opentype-svg: инструменты и файлы примеров для создания шрифтов OpenType-SVG

Инструменты и файлы примеров для создания шрифтов OpenType-SVG

Файлы

Постоянная ссылка Не удалось загрузить последнюю информацию о фиксации.

Тип

Имя

Последнее сообщение фиксации

Время фиксации

добавляетvg добавляет таблицу SVG к шрифту, используя предоставленные файлы SVG. Формат шрифта может быть OpenType или TrueType.
свалкиvg сохраняет содержимое таблицы SVG шрифта как отдельные файлы SVG. Формат шрифта может быть OpenType, TrueType, WOFF или WOFF2.
шрифты2svg генерирует набор файлов глифов SVG из одного или нескольких шрифтов и шестнадцатеричных цветов для каждого из них. Формат шрифтов может быть OpenType, TrueType, WOFF или WOFF2.

Зависимости

Инструкция по установке

Убедитесь, что у вас установлен Python 3.6 (или выше) установлена.
Настройка виртуальной среды:
```
  $ python3 -m venv ot-svg
  
```
Активировать среду:
```
  $ source ot-svg / bin / activate
  
```
Обновление pip :
```
  $ pip install -U pip
  
```
Установить opentypesvg :
```
  $ pip install opentypesvg
  
```

Шаг 1

Создает набор файлов SVG из набора шрифтов и значений цвета.

  fonts2svg -c 99ccff, ff0066, cc0066 fonts / Zebrawood-Shadow.otf fonts / Zebrawood-Fill.otf fonts / Zebrawood-Dots.otf

Шаг 2

Добавить набор файлов SVG к существующему шрифту OpenType (или TrueType).

  добавляет vg -s fonts / SVGs fonts / Zebrawood.otf

Вы можете использовать Step 2 , не выполняя Step 1 , но есть несколько вещей, о которых вам нужно знать при использовании инструмента addvg :

После сохранения файлов SVG в приложении для создания (например,грамм. Adobe Illustrator, CorelDRAW !, Inkscape) они должны пройти процесс, оптимизирующий и очищающий код SVG; это уменьшит размер файла, сохраняя при этом то же самое конечное изображение. Для этого шага вы можете использовать один из следующих инструментов:
Инструмент требует, чтобы файлы SVG назывались в соответствии с глифами, с которыми они должны быть связаны. Например, если глиф в шрифте называется амперсанд , файл SVG должен иметь имя амперсанд.svg .
Инструмент предполагает, что цветное изображение будет иметь тот же размер, что и глифы в шрифте, обычно 1000 или 2048 UPM. Это означает, что 1 пункт (pt) в приложении для разработки равен 1 единице в координатах шрифта.

Около

Инструменты и файлы примеров для создания шрифтов OpenType-SVG

Ресурсы

Лицензия

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

Использование пользовательских шрифтов с SVG в теге изображения

Когда мы создаем изображение PNG, мы используем тег или фон CSS, вот и все. Это очень просто и гарантированно работает.

PNG намного проще использовать в HTML, чем SVG

. К сожалению, этого нельзя сказать о SVG, несмотря на его многочисленные преимущества.Хотя вы избалованы выбором при использовании SVG в HTML, на самом деле он сводится к inline ,

	Оригинал	Растеризация шрифта	Неоптимизированное внедрение шрифтов	Встраивание шрифтов Nano
Размер	15,7 КБ	137 КБ	65,2 КБ	22,0 КБ
Gzip	3,57 КБ	11,0 КБ	44.5 КБ	11,7 КБ

	PNG @ 1x	PNG @ 2x	PNG @ 3x
Размер	11,9 КБ	26,5 КБ	42,6 КБ
Gzip	12,1 КБ	26,1 КБ	41,7 КБ