Главная » Статьи » Веб-дизайн |
В этом материале мы разберемся с вопросом о том, как поставить свой шрифт на сайте uCoz. Существует несколько способов, и решение не такое простое, как может показаться на первый взгляд. В разных браузерах, на разных компьютерах и операционных системах, и я уже не говорю о том, что на сайты сейчас заходят с телефона, шрифты выглядят по разному. Сейчас мы не будем говорить о сглаживании, «разжуем» только про выбор шрифтов. Этот материал подойдет не только для uCoz, просто здесь коснемся некоторых особенностей. Стандартные шрифтыСвой шрифт на сайте использовать очень просто, в CSS следует указать его название вот так: В данном случае выбран шрифт Tahoma для селектора body. Самое главное здесь это параметр font-family и его значение Tahoma. Что же следует после запятой? В конкретном примере указана специфика шрифта на случай если у пользователя не будет найден шрифт Tahoma. На разных устройствах разные списки стандартных шрифтов, они особо не пересекаются, нужно искать эквивалентные шрифты.
Подключение своего шрифта с помощью font-faceВы можете указать название любого шрифта, установленного на вашем устройстве, но, скорее всего, этой же гарнитуры нет у всех пользователей. Следует загрузить шрифт на свой сайт. Не все браузеры поддерживают все форматы шрифтов, но самый поддерживаемый – это формат TTF. Вот так будет выглядеть код: Чтобы шрифт поддерживался во всех браузерах или хотя бы в выбранных вами, следует загрузить и другие форматы этого же шрифта. Собственно вот код с добавлениями «путей» к шрифту: Форматов 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 | |||
Просмотров: 613 | | |
Всего комментариев: 0 | |