<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

Подпишитесь на мой канал на 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 в ресурсах, подгружается ли вообще нужный шрифт.

Ответить

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