Главная » Статьи » Веб-дизайн

Как поставить свой шрифт на сайт uCoz

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

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

Стандартные шрифты

Свой шрифт на сайте использовать очень просто, в CSS следует указать его название вот так:

body {font-family: Tahoma, sans-serif}

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

Windows:

1. Arial
2. Arial Black
3. Comic Sans MS
4. Courier New
5. Georgia
6. Impact
7. Tahoma
8. Times New Roman
9. Verdana
Mac:

1. Helvetica
2. Gadget
3. Georgia
4. Geneva
5. Times
6. Arial
7. Arial Black
 

Подключение своего шрифта с помощью font-face

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

Следует загрузить шрифт на свой сайт. Не все браузеры поддерживают все форматы шрифтов, но самый поддерживаемый – это формат TTF.

Вот так будет выглядеть код:

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

/* Применение шрифта к определенным селекторам */

  h1 {
  font-family: Pompadur, 'Comic Sans MS', cursive;
  }
  </style>

Чтобы шрифт поддерживался во всех браузерах или хотя бы в выбранных вами, следует загрузить и другие форматы этого же шрифта.

Собственно вот код с добавлениями «путей» к шрифту:

<style>
  @font-face {
  font-family: Pompadur; /* Гарнитура шрифта */
  src
: url(fonts/pompadur.eot);
/* Для IE5-8 */
  src
: local(pompadur), url(fonts/pompadur.ttf);
/* Для остальных браузеров */
  }
  h1 {
  font-family: Pompadur, 'Comic Sans MS', cursive;
  }
  </style>

Форматов TTF и EOT достаточно для отображения во многих браузерах, в том числе старых версиях IE, и даже на Android. Существуют онлайн-конвертеры шрифтов, вот пример такого, который адекватно переформировывает TTF в EOT:

https://www.kirsle.net/wizards/ttf2eot.cgi

А iOS? Там нужен формат SVG. Учитывайте это при проектировании сайта, не стоит привлекать лишние килобайты для мобильных устройств.

Где скачивать шрифты в формате TTF

Выделим один современный удобный и бесплатный ресурс.

Бесплатные шрифты

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

Чтобы найти сразу кириллические шрифты в формате TTF, воспользуйтесь этой ссылкой.

Google Fonts Рекомендуем

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

Ссылка: http://www.google.com/fonts

Итак, как подключить шрифты из Google Fonts на свой сайт на uCoz:

1. Переходим на сайт http://www.google.com/fonts

2. В фильтре выбираем шрифты с поддержкой кириллицы:

3. В списке шрифтов выбираем один или несколько, нажимая на кнопку «Add to collection» (Добавить в коллекцию).

4. Шрифты сразу появятся в лотке внизу, в этом лотке нажмите «Use» (Использование).

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

6. Чуть ниже будет показываться код для подгрузки стиля со шрифтами. Вы можете выбрать 3 варианта подгрузки.

Рекомендую первые 2 варианта (стандартный и @import).

Первый вариант. Код вставляется между и на страницах сайта:

Второй вариант. Код ставится в самый верх «Таблицы стилей (CSS)»:

7. К нужному селектору (body, h1 и т.д.) указывается шрифт в «Таблице стилей (CSS)»:

Сразу смотрим результат:

По материалам источника: http://htmlbook.ru/blog/svoi-shrift-na-stranitse



Источник: http://yraaa.ru/publ/shrift/6-1-0-2382
Категория: Веб-дизайн | Добавил: fotocom (30.04.2015)
Просмотров: 613 | Теги: шрифты, веб-дизайн | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:

сайты фотоком
Посетите сайты студии ФОТОКОМ
Нижегородский фотобанк Панорама Нижнего Новгорода Фотоком-Арт Фотоком-Веб Свадебный альбом Фотоком-дети