Приветствую Вас Гость • Регистрация • Вход
Понедельник, 16.12.2019
Главная » 2013 » Ноябрь » 21 » Подключение сторонних интернет-шрифтов от Google
14:48
Подключение сторонних интернет-шрифтов от Google
Снова рад видеть Вас уважаемые господа!
Думаю каждому веб мастеру хочеться как то и чем то разнообразить и выделить свое творенье от остальных...А сегодня мы на практике рассмотрим как выделить наш сайт(блог) красивыми сторонними шрифтами от компании Google При оформлении дизайна веб-страницы, часто хочется выделить красивым и необычным шрифтом название, заголовки или ссылки в меню, для этого обычно по старинке используют картинки. Однако,это уже пережитки прошлого как говорится,сейчас есть возможность сделать это гораздо проще. Красивый и уникальный шрифт части, а может даже и всего текста, на сайте или в блоге теперь установить очень просто, благодаря использованию интернет-шрифтов. На данный момент не составляя особого труда подключить веб-шрифты к своему интернет-ресурсу позволяет услуга от компании Google Web Fonts где представлен и предоставлен огромный выбор самых различных интернет-шрифтов, причем также имеется неплохая подборка и для русского языка - кириллицы.
Вот поэтому я и решил поделится немного об этом ресурсе ну и заодно рассказать о том,как подключить веб-шрифты из Google Web Fonts к своему сайту или блогу.
А начнем мы пожалуй с того, что в сети, латиницей шрифтов гораздо больше и они более разнообразны чем кириллицей, однако красивые шрифты есть и для нас.
Интерфейс прост и интуитивно понятен, хотя и доступен пока только на английском.
А так выглядит главная страница Google Web Fonts:
В колонке слева - "Script", в выпадающем списке, выбирается буквенный набор - латиница, кириллица, греческий и т.д. Если вам нужен веб-шрифт для русского языка, то лучше сразу выбрать кириллицу(Cirillic).
Если вы хотите использовать только один понравившейся шрифт - кликаете на Quick-use под ним и получаете код для интеграции на сайт.
Но чтобы не добавлять для каждого шрифта отдельный код подключения, можно создать коллекцию, в которую выбрать сразу несколько веб-шрифтов - Add to Collection и получить код для сайта в одной строчке, что конечно же удобнее и лучше.
Более подробно просмотреть выбранные шрифты,можно кликнув на "Review"(Обзор).
Когда же окончательный выбор сделан и коллекция набрана, кликаем на "Use"(Использовать), чтобы взять необходимый код.
На странице получения кодов, есть индикатор влияния на загруженность веб-страницы, при подключении к сайту одного или коллекции интернет-шрифтов, на него стоит обращать внимание.
Вторым пунктом идет выбор буквенных наборов для этого шрифта. По умолчанию всегда будет латиница, поэтому не забывайте повторно выбрать кириллицу при необходимости. Выбран должен быть хотя бы один пункт, но можно выбрать и несколько.
Как видно на скриншоте, возможно три способа подключения веб-шрифтов Google к сайту:
  1. Через правило @import;
  2. Через JavaScript.
  3. Стандартный - через удаленное подключение;
Варианты 1 и 3 добавляются повыше в , 2 - наверх в раздел с CSS; если стили подключены удаленно то лучше будет записать в шаблоне перед ссылкой на основной стиль так предварительно заключив его в значения :
Код
@import url(http://fonts.googleapis.com/css?family=Lobster);
В CSS можно записывать как через отдельные свойства:
Код
* { font-family: 'Lobster', Arial, cursive; font-weight: 400; }
Так и в одну строку:
Код
* { font: normal normal 400 'Lobster', Arial, cursive; }
Как видите ничего сложного нет,данные шрифты работают у меня на сайте,так что желаю всем удачи...
Категория: WEB-мастеру вопросы и советы | Просмотров: 883 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика