Jump to content
  • 0
Sign in to follow this  
Paul Silent

Использование в Muse коммерческих шрифтов

Question

Paul Silent    0

Есть ли опыт использования коммерческих шрифтов в Muse?

  • [*]Если оплачен один из тарифных планов «Typekit», будет ли возможность использовать коммерческий шрифт при вёрстке в Muse? [*]Возможно ли подключить приобретённый, например, у Paratype веб-шрифт в случае, если я хочу его хостить на сервере, где размещен мой сайт (если нет возможности подключить данный шрифт по @fonface со шрифтовых онлайн сервисов)? При вёрстке, установленный мной в системе шрифт будет конвертирован в растр.

Share this post


Link to post
Share on other sites

Recommended Posts

  • 0
Paul Silent    0

Похоже, на мой второй вопрос ответ найден:

Алгоритм действий подключения шрифтов через @font-face

Для начала нам нужен файл шрифта TrueType в формате .ttf. Для кроссбраузерной поддержки его необходимо преобразовать в форматы .eot, .otf, .woff. Это можно сделать онлайн, например на сайте Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.. Загружем свой шрифт и на выходе получаем архив со всеми файлами. Также там находится файл веб-страницы index.html, открыв который можно сразу увидеть внедренные веб-шрифты.

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

Затем добавляем стили CSS на сайт в <header>. Для этого кликаем правой кнопкой на страницу Шаблона-A и выбираем Свойства страницы, вкладку Метаданные.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Прописываем туда код:

<style>

@font-face {

font-family: Thin; /* Имя шрифта */

src: url('assets/he_thin.eot');

src: local('☺'), url('assets/he_thin.woff') format('woff'), url('assets/he_thin.ttf') ; /* Путь к файлу со шрифтом */

}

p, body {

  font-family: Thin, sans-serif;

}

  </style>

Первая часть кода поключает наши шрифты из папки assets, а вторая задает правила для текста.

Можно добавить свои стили для  H1, H2 и т.д. Данный код добавляет шрифт Thin для основного текста с тегом <p>.

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

Итак, повторим алгоритм

1. Создаем  набор веб-шрифтов

2. Загружаем их в Muse Файл - Добавить файлы для передачи

3. Прописываем CSS в Header

4. Готово

Как видим, подключить любые шрифты в программе Adobe Muse не составляет особого труда. Если вам не хватает разнообразие TypeKit и Google fonts, то пользуйтесь этим методом.

Источник: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
Share on other sites

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

Да да, все верно. Не успел вам скинуть инструкцию.  Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./default_smile.png" alt=":)">

Share this post


Link to post
Share on other sites
  • 0
Paul Silent    0

Евгений, а как обстоит дело с «Typekit» (мой первый вопрос)?Если оплачен один из тарифных планов «Typekit», будет ли возможность использовать коммерческий шрифт при вёрстке в Muse?Есть ли практический опыт такого подключения шрифта? Каков алгоритм?

Share this post


Link to post
Share on other sites
  • 0

Коммерческие шрифты не доступны из меню подключения шрифтов в Muse. По этому единственный способ использовать такие шрифты - подключать через @font-face. Так как практически любой шрифт в TypeKit работает в режиме webfont:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
Share on other sites
  • 0
Paul Silent    0

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

Благодарю за ответ. «Пикчеризации», как раз, и хотелось избежать.

Share this post


Link to post
Share on other sites
  • 0
Guest Vadim   
Guest Vadim

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

Итог - все будет красиво, пикселизации не будет.

Share this post


Link to post
Share on other sites
  • 0

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

Итог - все будет красиво, пикселизации не будет.

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

PS Могу ошибаться.

Share this post


Link to post
Share on other sites
  • 0
Paul Silent    0

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

Итог - все будет красиво, пикселизации не будет.

Vadim, как это сделать технически, если на хостинг будет выгружен растризованный вариант, т.е. на уровне кода и стилей будут прописаны картинки? Через ныне тестируемую cms adobe muse admin корректировать HTML и CSS? Пожалуйста, поясните. 

Направил в Adobe заявку на добавление этого функционала. Вдруг они учтут мнение старого тестера)

Замечательно!

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

PS Могу ошибаться.

Вероятно, с кешированными шрифтами веселей. У меня нет практики подключения шрифтов размещенных на хостинге вместе сайтом. Такое решение значительно будет влиять на скорость загрузки страниц (например, при нагрузке в несколько десятков тысяч посещений в месяц)? 

Share this post


Link to post
Share on other sites
  • 0
Guest Vadim   
Guest Vadim

Вы ж сами вверху написали ответ.В папке сайта создаете папку fonts, туда кладете свой купленный шриф в формате .ttfпотом в коде прописываете путь к своему шрифту:

<style> @font-face { font-family: Pompadur; /* Гарнитура шрифта */  src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ }h1 { font-family: Pompadur, 'Comic Sans MS', cursive; }</style>

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

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>

только ссылку и название вписываете свое. А потом в html блоке мус вставить ваш текст с подключенными стилями шрифта:

<p style="font-family: 'Ubuntu Mono';">Ваш текст</p>

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

Share this post


Link to post
Share on other sites
  • 0
Paul Silent    0

Благодарю за помощь.
Однако, отсутствие практического опыта не позволяет прояснить самостоятельно некоторые вопросы.

 

Алгоритм подключения купленного шрифта из директории fonts на завершающем этапе понятен. Однако, при вёрстке шрифтом ttf, установленным в системе, мы получаем в коде нечто подобное:
 

<div id="page" class="clearfix">

<img id="u69-4" class="colelem" width="272" height="50" alt="ТЕKCT" src="images/u69-4.png">

<div class="verticalspacer" style="min-height: 1px; height: 358px;"></div>

</div>

Что происходит с ранее созданными Muse фрагментами кода после подключения шрифта? В коде появляются шрифт и стили. Какова судьба фрагментов кода с картинкой?

С подключением «гугловских» шрифтов всё понятно. Гугл автоматом даёт код, содержащий всю необходимую информацию об адресе размещения, семействе, кодировке и т.д.
Размещение шрифтов на хостинге для использования в редакторе Muse вызывает ряд вопросов. В том числе — где на сервере необходимо размещать файлы шрифта, чтобы получить правильный url для подключения — в папке домена или иной директории? Как сгенерировать остальные параметры?  Если возможно, поясните, пожалуйста, синтаксис кода для такого способа подключения шрифта на примере.

Share this post


Link to post
Share on other sites
  • 0
Guest Vadim   
Guest Vadim

Найдите любой сайт с подключенными шрифтами и посмотрите как работает. Тоже самое что гугл шрифты, но пока вы сами не увидите не поймете.Например вот сайт ( goo.gl/xMWjul ) там подключены шрифты из папки, все просто и понятно.

Share this post


Link to post
Share on other sites
  • 0
Paul Silent    0

Найдите любой сайт с подключенными шрифтами и посмотрите как работает. Тоже самое что гугл шрифты, но пока вы сами не увидите не поймете.Например вот сайт ( goo.gl/xMWjul ) там подключены шрифты из папки, все просто и понятно.

Вадим, благодарю за рекомендации и пример. Пробую разобраться. Пока что, и на данном конкретном примере, алгоритм не так прост и понятен как для Вас.P. S. У Вас хорошее чувство юмора... Среди миллионов сайтов найти те, в которых шрифты хостят серьёзная задача. Тем более, что представление об алгоритме у меня весьма туманное Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./default_smile.png" alt=":)">

Share this post


Link to post
Share on other sites
  • 0
Reijii    0

<style>

@font-face {

font-family: Thin; /* Имя шрифта */

src: url('assets/he_thin.eot');

src: local('☺'), url('assets/he_thin.woff') format('woff'), url('assets/he_thin.ttf') ; /* Путь к файлу со шрифтом */

}

p, body {

  font-family: Thin, sans-serif;

}

  </style>

Как по этому шаблону подключить несколько шрифтов на страницу?

Share this post


Link to post
Share on other sites
Sign in to follow this  

×
×
  • Create New...