<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Как использовать нестандартный шрифт на сайте

Как использовать нестандартный шрифт на сайте

При вёрстке страниц время от времени приходится сталкиваться с нестандартными шрифтами. Безусловно, использовать их как основные на сайте не стоит, но вот в различных отдельных элементах, например, в шапке, вполне можно. Проблема с этими шрифтами в том, что его может просто не оказаться на компьютере пользователя, что приведёт к тому, что у него соответствующий текст отобразится стандартным шрифтом, в результате, задуманный дизайн будет испорчен. Данную проблему решают очень просто: весь нестандартный шрифт вырезают просто в виде картинки. Однако, есть и другой способ использовать нестандартный шрифт на сайте.

Давайте я напишу CSS-код, а потом его поясню:

@font-face {
  font-family: SpecialFont;
  src: url("font/specialfont.ttf");
}
p {
  font-family: SpecialFont;
}

В результате, к тегам <p> будет применён шрифт SpecialFont. Я думаю, код достаточно прозрачный, но всё-таки поясню. Вам нужно раздобыть шрифт и загрузить к себе на сайте, например, в папку font. Дальше в CSS-коде прописать в @font-face его имя и путь к нему, а дальше уже можно его использовать.

Но недаром в большинстве случаев используют картинки для вывода нестандартных шрифтов. У использования @font-face есть 2 недостатка:

  1. Есть очень крупные шрифты, которые весят сотни килобайт, а это резко увеличит время загрузки страницы.
  2. Второй минус ещё серьёзнее. Не все браузеры поддерживают такую возможность, более того, некоторым браузерам нужен шрифт в другом формате (не ttf). Таким образом, у некоторых Ваш шрифт всё равно не отобразится. Чтобы решить данную проблему, надо загружать один и тот же шрифт в разных форматах, что в разы усилит первый минус.

Но стоит отметить, что первый минус уже не так принципиален как раньше. Так как скорости Интернет-соединения растут очень быстро, и уже мало, кого волнуют дополнительные 100-200 КБ.

Второй минус тоже не так принципиален. Единственные более-менее популярные браузеры, которые не поймут этого кода - это IE8 и ниже, плюс iOS. Все остальные современные браузеры без проблем данный код поймут.

Учитывая, что IE8 ещё относительно популярен, то лично я пока буду выводить нестандартные шрифты по-прежнему в виде картинки, но очень надеюсь, что в ближайшем будущем данный браузер станет историей, и тогда можно будет использовать @font-face и ttf-шрифты.

P.S. Всех женщин поздравляю с праздников весны!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (6):

katushka katushka 08.03.2013 20:07:58

Спасибо за поздравление и за полезную статью!

Ответить

Алек Алек 13.03.2013 16:50:48

Спасибо.Обязательно применю.

Ответить

witalij witalij 27.04.2013 21:21:32

Если нужно задать несколько font-family, то код будет выглядеть таким образом??? @font-face { font-family: SpecialFont; src: url("font/specialfont.ttf"); font-family: SpecialFont1111; src: url("font/specialfont1111.ttf"); } Спасибо.

Ответить

Admin Admin 03.05.2013 14:34:41

Нет, нужно каждый шрифт в отдельном @font-face указывать.

Ответить

goshan2112 goshan2112 29.09.2013 08:09:52

Здравствуйте Михаил!Не могу подключить шрифт Trebuchet MS к сайту. В chrome отображается корректно, а в остальных браузерах отображается совсем другой. Пишу так: @font-face { font-family:"Trebuchet MS"; src: url(fonts/trebuc.eot); src: local("Trebuchet MS"), url(http://singlecombats.ru/fonts/trebuc.ttf);}

Ответить

Admin Admin 29.09.2013 18:33:09

Посмотрите в firebug в ресурсах, подгружается ли вообще нужный шрифт.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.