Обучение работе с персональным компьютером



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

Сторонние шрифты зачастую имеет ограничения. Связаны они с авторскими правами, поэтому об этом необходимо помнить всегда. Мы взяли первый попавшийся русский каллиграфический шрифт - ISABELLA.TTF и с ним будем работать. Немного о шрифтах. В веб-разработке применяют не так уж и много шрифтов - это Arial, Sans-serif, Helvetica, Verdana, Times New Roman, Geneva, Courier New, Monospace и еще несколько шрифтов. Этого количества, конечно же, не хватает для красивого оформления. Еще одна загвоздка в кроссбраузерности. Не каждый браузер поддерживает работу с теми или иными шрифтами. Например, Internet Explorer работает со шрифтами EOT, Firefox с EOT и TTF, Safari c TTF и SVG. Поэтому, возникают проблемы в отображении этих шрифтов. С помощью каскадных таблиц стилей можно решить и эту задачу. Для реализации, правда, необходимо иметь один и тот же шрифт под разными расширениями, но цель оправдывает средства. Теперь давайте приступим к реализации нашей идеи. Скачайте шрифт fonts.rar [152,94 Kb]. Запустите браузер и перейдите на сайт обработки шрифтов. На этом сайте представлен генератор шрифтов. С его помощью мы создадим шрифты под разными расширениями, для различных браузеров. Первым делом нажмите на кнопку "Add Fonts" и укажите путь к скаченному шрифту.

Шрифты для сайта

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

  • BASIC - прямое преобразование с минимальной обработкой.
  • OPTIMAL - рекомендуемые настройки для лучшей производительности и скорости работы.
  • EXPERT - вы самостоятельно принимаете решение по оптимизации шрифта для сайта.

Я работал с параметром OPTIMAL, который установлен по умолчанию. После того как шрифт будет загружен ставим галочку напротив "Yes, the fonts I'm uploading are legally eligible for web embedding.". Тем самым принимаем лицензионное соглашение.

Шрифты для сайта

Нажимаем на кнопку "Download Your Kit" и скачиваем архив. Распаковываем скаченный архив с обработанными шрифтами для сайта. Обработанные шрифты имеют название - "isabella-webfont". Убираем webfont и получаем название "isabella.ttf" и "isabella.eot. Все остальные можете переименовать, а можете их вообще не использовать. Работать наш вариант будет и с двумя шрифтами. Если хотите, то можете шрифты не переименовывать, а взять их как есть. При этом воспользоваться уже сгенерированным кодом, который находится в файле style.css. Для сокращения кода мы пойдем другим путем. Создайте на сайте директорию, где будут сохранены шрифты для сайта. Назовем ее "font". Закачайте подготовленные шрифты в папку "font". Откройте файл CSS вашего сайта и впишите следующий код:


/*Код для корректной работы в IE*/
@font-face {
font-family: isabella;
src: url(font/isabella.eot);
}
/*Код для остальных браузеров*/
@font-face {
font-family: isabella;
src: url(font/isabella.ttf);
}

Рассмотрим код. Правило @font-face позволяет загрузить и использовать сторонние шрифты, управлять ими. В поле font-family указывается имя шрифта. В поле src:url путь к файлу шрифта. Но это еще не все. После того, как вы пропишите в файл CSS этот код, нужно указать браузеру в странице HTML на этот шрифт. Делается это следующим образом, например, так:



<div style="font-family:isabella;font-size:35px;color:green;">Я шрифт для сайта!</div>

Вот и все, не так уж и сложно, как может показаться на первый взгляд. Проделав эти нехитрые манипуляции, вы сможете подключить любые шрифты для сайта.
Еще существует другой метод - воспользоваться сервисом Google. Благодаря этому сервису вы получите лицензионный шрифт и беспокойств по поводу нарушения авторских прав у вас не возникнет. Для этого перейдите на страницу сервиса Google и выберите там нужный шрифт нажатием кнопки "add to collection".

Шрифты для сайта

На следующем этапе выберите вид шрифта кириллический или латиница.

Шрифты для сайта

Далее нажмите кнопку "Use"

Шрифты для сайта

В открывшемся окне скопируйте ссылку на файл стилей и вставьте ее в свой документ HTML между тегами <head></head>. Ниже скопируйте название шрифта. Оформите шрифт на сайте с учетом этих названий.

Шрифты для сайта

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

Похожие статьи на нашем сайте:


CSS 100 и 1 совет CSS 100 и 1 совет Название: "CSS 100 и 1 совет" Автор: Рейчел Эндрю Язык: русский Формат: pdf Качество: хорошее Размер: 6,81 МБ Страниц: 333 Год издания: 2010 ...
Подсветка кода PHP в DLE 9.2 и выше Подсветка кода PHP в DLE 9.2 и выше Иногда веб-мастера сталкиваются, на первый взгляд, с небольшой проблемой. С организацией подсветки PHP кода на сайте. Такая необходимость возникает...
Полезные мелочи Windows 7 Полезные мелочи Windows 7 В отличие от своих предшественников, таких систем, как Windows XP, операционная система Windows 7 оснащена различными мелкими, но в свою очередь...
Критические ошибки начинающих веб-мастеров Критические ошибки начинающих веб-мастеров Критические ошибки, совершаемые начинающими веб-мастерами при создании сайта, преследуют постоянно. Начинающие веб-мастера делают их не осознано, в...
Разрешение экрана, проблемы с работоспособностью Windows 8 Разрешение экрана, проблемы с работоспособностью Windows 8 Как известно разрешение экрана имеет важную роль при установки и использовании операционной системы Windows 8 и обновленной версии 8.1. Если...




Комментарий #1 написал: Роман (18 февраля 2012 10:45)
Фото

Гости
Комментариев: 0
Публикаций: 0
Полезная статья. Спасибо за информацию! wink
Информация
Комментировать статьи на нашем сайте возможно только в течении 90 дней со дня публикации.

Главная | Обратная связь | Статистика

Copyright © 2011-2015 | Персональный компьютер для начинающих пользователей