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

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

Новая статья

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

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

Share this post


Link to post
  • 0

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

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

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

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

Share this post


Link to post
  • 0
Paul Silent    0

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

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

Share this post


Link to post
  • 0
Guest Vadim   
Guest Vadim

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

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

Share this post


Link to post
  • 0

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

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

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

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

Share this post


Link to post
  • 0
Paul Silent    0

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

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

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

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

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

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

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

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

Share this post


Link to post
  • 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
  • 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
  • 0
Guest Vadim   
Guest Vadim

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

Share this post


Link to post
  • 0
Paul Silent    0

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

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

Share this post


Link to post
  • 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
Sign in to follow this  

×
×
  • Create New...