Правильные шрифты создают визуальный эффект для вашего сайта, что облегчает его чтение и, в некоторых случаях, повторяет бренд. Существует всего несколько веб-безопасных шрифтов, и вы не можете контролировать, какие шрифты будут установлены на компьютере пользователя. Однако в большинстве случаев вы можете контролировать, какие шрифты будут отображаться, когда пользователь загружает ваш сайт в свой браузер.
Управляйте шрифтом с помощью CSS
Предпочтительный и самый простой способ убедиться, что ваши шрифты отображаются в браузере пользователя, — это использовать правило CSS @font-face . Для этого подхода необходимы два шага.
Создание файлов шрифтов
Способ работы любого из процессов для отображения шрифта заключается в размещении определенного файла шрифта на вашем сервере, а затем вызове его. Это позволяет вашему шрифту загружаться на веб-страницу вместо шрифта по умолчанию на компьютере пользователя.
При использовании метода @font-face безопаснее всего создать три версии файла шрифта: .tff, .eot и .woff для поддержки старых браузеров. Эти три версии охватывают всех, поскольку более новые браузеры могут читать .woff, а все браузеры, кроме Internet Explorer, могут читать .tff. Файл .eot может быть прочитан более старыми версиями Internet Explorer.
Поскольку большинство шрифтов имеют формат .tff, вам потребуется преобразовать шрифт в .eot или .woff. Бесплатные онлайн-конвертеры могут быстро сделать это.
Отображение шрифта
Как только вы загрузите два файла на свой сервер, создайте код CSS, чтобы добавить шрифт на вашу HTML-страницу. Свойства font-family и src являются обязательными, остальные свойства необязательны.
Ваш код будет выглядеть так:
@font-face
{
семейство шрифтов: myFirstFont;
src: url(‘Name_of_Font.ttf’),
url(‘Name_of_Font.eot’); /* IE9 */
}
Дополнительные свойства правила @font-face включают:
- Font-stretch: это свойство определяет ширину шрифта — по умолчанию она равна normal. Варианты включают: конденсированный, ультраконденсированный, экстраконденсированный, полуконденсированный, расширенный, полурасширенный, экстрарасширенный и ультрарасширенный.
- Стиль шрифта: по умолчанию используется обычный; другие варианты включают курсив и наклон.
- Начертание шрифта: определяет жирность шрифта. По умолчанию это нормально; другие варианты включают жирный шрифт и 100-900.
- Unicode-range: Это свойство определяет диапазон символов Unicode, поддерживаемых шрифтом. По умолчанию используется «U+0-10FFFF».
JavaScript
Основная слабость использования правила CSS @font-face заключается в том, что оно не работает в старых браузерах. JavaScript предлагает более безопасный способ отображения шрифтов, в то время как браузеры догоняют опцию CSS. Этот метод также состоит из нескольких шагов, но конечный результат один и тот же — возможность использовать любой шрифт на вашем сайте.
Создание файлов шрифтов
Первым шагом метода является создание пары файлов для шрифтов. Возьмите существующий файл шрифта и преобразуйте его с помощью генератора cufón . Инструмент создает два файла JavaScript (.js), которые вы загружаете на свой сервер: cufon-yui.js и MyNewFont.font.js (название используемого вами шрифта).
Чтобы создать файл cufon-yui.js:
- Щелкните правой кнопкой мыши ссылку «Загрузить» в строке меню.
- Выберите «Сохранить объект как» и сохраните файл .js на свой компьютер.
Чтобы создать файл MyNewFont.font.js:
- Загрузите файл шрифта в генератор
- Установите флажки по мере необходимости.
- Отправьте, и инструмент преобразует ваш шрифт в файл .js.
Отображение шрифта
Как только файлы .js будут загружены на сервер, вызовите их со своих веб-страниц.
Для этого:
- Внутри раздела <head> шаблона макета сайта или веб-страницы, на которой он будет использоваться, вставьте эти две строки кода (предполагается, что у вас есть папка js для всех ваших файлов JavaScript):
- <script type=»text/javascript» src=»js/cufon-yui.js»></script>
- <script type=»text/javascript» src=»js/MyNewFont.font.js»></script>
- Чтобы заменить шрифты на страницах вашего сайта, используйте эту кодировку:
- <script type=»text/javascript»> Cufon.replace(‘h1’); </скрипт>
Вспышка
Adobe Flash уже много лет является популярным решением для пользовательских шрифтов. Это связано с тем, что шрифты встроены в «фильм» .swf, что означает, что шрифты отображаются на стороне пользователя независимо от того, установлены ли шрифты на компьютере пользователя.
Создание файлов шрифтов
Поиск параметра «Встроить» зависит от версии Flash:
В более старых версиях параметр размещался в библиотеке FLA в разделе « Новый шрифт» .
Более новые версии следуют той же концепции, помещая параметр «Встроить» в библиотеку, связанную с открытым FLA-файлом. Вот один из способов получить доступ к опции встраивания в CS5 :
- Откройте FLA-файл и выделите текст, который хотите встроить.
- На панели библиотеки перейдите в «Персонаж» >> «Встроить».
- Откроется панель «Встроить» с уже выделенным шрифтом.
- Выберите атрибуты, которые должны быть у шрифта (курсив, полужирный и т. д.)
- В разделе «Диапазоны символов» включите любые символы (например, тире), которые вы хотите встроить.
Помните, что чем больше диапазон, тем больше будет .swf. Если ваш сайт в основном будет просматриваться на мобильных устройствах, таких как iPad, не используйте этот метод, поскольку Flash не работает на этих устройствах.
Отображение файлов шрифтов
Чтобы разместить .swf на своей странице, вы можете использовать тег <object> для его встраивания.
<object width=»400″ height=»400″ data=»myFont.swf»></object>
sIFR (масштабируемая замена флэш-памяти Inman)
Это более сложный метод, в котором используется комбинация Flash, JavaScript и CSS для чтения пространства, в котором будет отображаться пользовательский шрифт, а затем перетекает в шрифт.
Как это работает
Хотя знание того, как это работает, не требуется, понимание того, что происходит, может помочь вам при использовании этого метода.
- Ваша веб-страница загружается в браузер.
- JavaScript проверяет, установлен ли Flash. Если это так, JavaScript ищет теги CSS, идентификаторы или классы, которые вы указали для пользовательских шрифтов.
- JavaScript теперь проходит через исходный код и измеряет каждый элемент, который вы выбрали на шаге 2.
- После измерения JavaScript создает Flash-ролики с такими же размерами для наложения исходных элементов.
- Затем ActionScript внутри Flash рисует текст выбранным вами шрифтом.
В этом подходе есть только одна слабость, помимо того, что он более сложный. В редких случаях, когда Flash не установлен или JavaScript отключен, ваша страница отображается без пользовательских шрифтов.
Как это сделать
Использование этого метода требует глубокого понимания Flash, чтобы вы могли создать Flash-ролик, содержащий ваши шрифты. Вам также потребуется скачать zip-файл, содержащий файлы sIFR.
- Загрузите и распакуйте этот файл .
- Откройте файл sifr.fla
- Дважды щелкните текстовую область.
- Введите текст и выберите нужный шрифт на своем компьютере.
- Экспортируйте этот файл как fontname.swf
- Локальный файл sifr.fla — вы будете использовать этот файл для создания «фильма» вашего шрифта.
- Прикрепите две таблицы стилей CSS к своему веб-сайту, разместив этот код в разделе <head>:
- <link href=»sIFR-print.css» rel=»stylesheet» type=»text/css» media=»print» />
- <link href=»sIFR-screen.css» rel=»stylesheet» type=»text/css» media=»screen» />
- Включите файл JavaScript, разместив этот код в разделе <head>:
- <script src=»js/sifr.js» type=»text/javascript»></script>
- Добавьте этот код JavaScript внутрь элемента <body>:
- <script type=»text/javascript»>
//<![CDATA[
/* Замена вызовов. Пожалуйста, смотрите документацию для получения дополнительной информации. */
if(typeof sIFR == «функция»){
};
//]]>
</скрипт>
- <script type=»text/javascript»>
- Добавьте эту строку в код на шаге 5, чтобы изменить команду функции:
- sIFR.replaceElement(named({sSelector:»h1″, sFlashSrc:»impact.swf», sColor:»#000000″})); Измените этот код, чтобы получить селекторы и файл Flash, характерные для вашего приложения.
Поиск отличных шрифтов
Если при оформлении страницы вас не устраивают доступные шрифты, несколько интернет-сайтов предоставляют бесплатные веб-шрифты . FontSquirrel — особенно популярный сайт с дополнительным бонусом. В дополнение к бесплатным шрифтам на сайте также есть генератор веб-шрифтов, который позволяет вам создавать .tff вашего любимого шрифта. Как только вы найдете нужные шрифты, вы будете готовы начать работу над своей веб-страницей.