Спонсор материала.
Кондиционеры в интернет-магазине http://www.technodom.kz/catalog/konditsionery . Кондиционеры — лучшие товары, кредитование, огромный выбор, безупречный сервис.
Добрый день дорогие читатели. Все из вас, наверно, мечтают сделать свои или клиентские сайты более лаконичными и привлекательными.
Одними из главных факторов, который отвечает за восприятие информации на сайте, являются шрифты и то, как мы их используем вместе. Так как на одном сайте, чаще всего употребляется двое и более разновидностей шрифтов, например для заголовков и просто основного текста.
Одна из возможностей, визуально улучшить читаемость текстов – это подключение сторонних шрифтов. Ведь все наверно знают, какая «бедная» стандартная коллекция кириллических шрифтов в Windows, которая отвечает за отображение текста в браузере.
Стандартные шрифты:
Cufon и @font-face
Ранее я уже писал про , с помощью которого можно подключать не стандартные шрифты к сайту. А сейчас рассмотрим более простой способ — это правило @font-face в css и подгрузкой самого шрифта с хранилища шрифтов Google Fonts.
Вся разница между Cufon и @font-face в том, что первый использует js для эмулирование шрифта и прорисовывает символы своими средствами, а @font-face подгружает сам шрифт на компьютер посетителя и браузер уже использует его для отображения текста.
В любом случае Cufon и @font-face уменьшают скорость загрузки сайта, хоть и не значительно.
Использование Google Fonts на сайте
Не буду расписывать много и долго, я приведу конкретный пример подключения Google Fonts, на примере этого блога.
Как видите, заголовки статей и подзаголовки у меня выполнены в не стандартном шрифте, вот сейчас на практике я покажу как такое сделать, а вы уже по аналогии будете пробовать на своих сайтах.
Выбор шрифта в репозитории
Чтобы не пугались, объясню — репозиторий это хранилище, но по-буржуйски:). И так, заходим на http://www.google.com/fonts/ и смотрим для себя подходящий шрифт:
Не много по меню:
Слева, как видите, находиться блок с всевозможными фильтрами поиска шрифтов, в котором вы можете выбрать, к примеру, только латинские шрифты или кириллические. А сверху, настройки по отображению примеров, которые разделены на 4 вкладки:
- Word — отображение нескольких букв. В таком режим удобно сравнивать сразу много шрифтов и смотреть как выглядят конкретные символы;
- Sentence — отображение в виде одного предложения;
- Paragraph — выводиться большой кусок текста, который позволит наглядно сравнивать шрифт уже в самом тексте;
- Poster — отображаются заголовки, такой способ сравнения удобен для подбора шрифта, который будет использоваться в заголовках.
Подключение шрифта к сайту
После этого, на панели Collection, которая находиться внизу, заходим во вкладку Use, которая отвечает за использование шрифтов из вашей коллекции. Тут вы сразу увидите, что гугл показывает на сколько ухудшится скорость загрузки страницы:
Ниже находится панель с выбором «типа отображения», выбираем Latin (latin) и Cyrillic (cyrillic), что даст нам возможность отображать как латинские, так и кириллические буквы:
После этого переходим к третьему пункту на этой странице, а именно к самому подключению. Google предлагает нам три варианта встраивания своих шрифтов — через js, стандартный способ через подключение в
и @import в css файле. Я использую последний способ.Открываем свой файл css и прописываем строчку, которую нам предоставил google:
Всё, шрифт от Google Fonts мы подключили к сайту, теперь как его использовать?
Использование в CSS
Всё достаточно просто, после того, как мы подключили шрифт через @import , нам надо прописать стандартные инструкцию для тех классов и индификаторов, у которых будет использоваться наш новый шрифт. К примеру:
h1, h2, h3 {font-family: ‘Cuprum’, sans-serif;}
После всех этих манипуляций, у вас будет выводиться заголовки с новым, не стандартным шрифтом.
На этом всё, спасибо за внимание и до скорых встреч.
Если начинать с истоков, тег font был введен в 1995 году, а уже в 1996-м было написано программное определение на CSS. Начиная с версии CSS 2.0 была введена загрузка и синтез шрифта в браузерах, но тем не менее тогда еще популярный, а ныне старый и неактуальный IE не имел поддержки загрузки шрифтов, что мешало бурному развитию использования шрифтов на своем сайте.
В современном интернете веб-шрифты - это давно устоявшаяся вещь. На разных сайтах мы можем использовать разного рода шрифты, которые, в свою очередь, не включены в поставку той или иной операционной системы, однако есть нежелательный побочный эффект, о котором мы сегодня и поговорим.
Форматы файлов
Для подключения шрифтов используется программная вставка в CSS, так называемое @-правило. Итак, в простейшей форме @font-face - это такая декларация. Выглядит она следующим образом: /* Объявляем шрифт */
@font-face {
font-family: "Имя шрифта";
src: url("путь/до/него");
}
/* Применяем шрифт */
p {
font-family: "Имя шрифта", Arial;
}
TTF или OTF - привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;
WOFF - незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2–2,5 раза легче, чем исходные;
EOT - внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8, кроме TrueType кривых, поддерживаются и PostScript);
SVG - для поддержки браузера Safari.
Подготовленные к внедрению (@font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах. Вы поняли, что существуют некоторые расхождения, так же как существует не один вид операционных систем. Форматов шрифтов достаточно много, но конкретный будет работать только в конкретном браузере. Что же касается этих самых форматов, отчего их так много нужно указывать при подключении, то они нужны для кроссбраузерной поддержки сайта.
@font-face {
font-family: "Имя_шрифта_любое";
src: url("Имя_файла_шрифта.eot");
src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype"),
url("Имя_файла_шрифта.woff") format("woff"),
url("Имя_файла_шрифта.ttf") format("truetype"),
url("Имя_файла_шрифта.svg#DSNoteRegular") format("svg");
font-weight: normal;
font-style: normal;
}
Ежели вы хотите использовать вместо файла зашифрованный код, в этом случае к нам на помощь приходит base64, который работает по тому же принципу и с изображениями, однако для старого IE base64 не обрабатывается.
@font-face { font-family: "Имя_шрифта_любое"; src: url("Имя_файла_шрифта.eot"); } @font-face { font-family: "Имя_шрифта_любое"; src: url(data:font/woff;charset=utf-8;base64,ДАННЫЕ) format("woff"), url(data:font/truetype;charset=utf-8;base64,ДАННЫЕ) format("truetype"), url("Имя_файла_шрифта.svg#Имя_файла_шрифта") format("svg"); font-weight: normal; font-style: normal; }
Embedded OpenType?
Как вы могли заметить, то подключаемые шрифты для IE имеют строчку с таким параметром:Src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype")
В классическом варианте мы должны были указать с вами именно так:
Src: url("Имя_файла_шрифта.eot") format("embedded-opentype")
Но при добавлении символа "?" после формата шрифта мы принудительно указываем браузеру не читать последующее указание - format("embedded-opentype"). Internet Explorer поддерживает вложение шрифтов через так называемый фирменный Embedded OpenType стандарт, начиная с версии IE 4.0. Он использует метод управления цифровыми правами для предотвращения копирования шрифтов, которые распространяются по лицензии.
Что, если не поддерживается шрифт в браузере?
Давным-давно уже были придуманы обходные пути, так называемые «костыли» для отображения того или иного шрифта. Бывают случаи, когда шрифт был разработан только в формате SVG, или же только в формате TTF.1. В стародавние времена разработчики подключали изображение, которое в свою очередь было текстом, набранным в визуальном редакторе. Однако сейчас это считается дурным тоном, ибо поддержка довольна затруднительна (нужно снова открывать редактор, чтобы изменить текст картинки), соответственно пользователь не может скопировать текст с картинки.
2. Также распространенным являлось использование flash-решений.
3. Другим решением является использование Javascript, чтобы заменить текст с VML (для Internet Explorer) или SVG (для всех остальных браузеров).
Какие проблемы еще могут возникнуть?
Браузер будет пытаться синхронизировать подгрузку шрифта, он будет стараться спрятать текст, то есть сделать его невидимым, пока шрифт не был подгружен. Этот эффект называют FOIT, эффект «белой вспышки».Эффект вспышки
Эффект FOIT в таких браузерах, как Safari, Chrome, Opera, Firefox имеет тенденцию скрывать текст в течении максимум 30 секунд перед отказом в получении шрифта, после чего устанавливается шрифт по умолчанию.Пример того, как загружается шрифт:
И все-таки, 2.7 секунды - это долгое время!
Что же можно сделать?
Изначально подход заключался в том, чтобы включить преобразование файлов шрифта в данные URIs так, чтобы те шрифты могли быть включены непосредственно в определения семейства шрифтов в файле CSS. Загружая этот файл CSS асинхронным способом, можно гарантировать, что браузер немедленно отдаст текст в странице, используя кастомные шрифты, а новые шрифты применялись бы, как только CSS был бы загружен.Однако, в любом эксперименте есть побочный эффект.
Изначально Bram Stein использовал кастомный шрифт, но после того, как его шрифт был подгружен, происходило «мерцание», в примере на 0.7 секунде:
Короче говоря, мерцание происходит тогда, когда браузер пытается отобразить шрифт из font-family и применить его в html. Шрифт, определенный в @font-face декларации, который не был еще загружен.
Bram Stein показал, как правильно подключать шрифты, он разработал скрипт, альтернативу от google для асинхронной подгрузки шрифтов, это скрипт - FontFaceObserver.
Пробуем
Анализ
Стандартное подключение от GoogleЧестно говоря, используя больше одного шрифта на сайте можно конкретно замедлить скорость загрузки страницы сайта, тем самым увеличивая общее время загрузки. Google Fonts API позволяет быстро добавить шрифт на сайт, используя генератор шрифтов, тем самым быстрее проектировать свой сайт. Однако, нужно помнить об эффекте FOIT. Общее время загрузки - 322 мс.
Web Font Loader от Google
Web Font Loader - JavaScript библиотека для расширенной работы с API, библиотека, которая дает нам больше контроля над подгрузкой шрифта, чем стандартный API Google Fonts. Скрипт позволяет нам использовать множество шрифтов, подгружая их последовательно или асинхронно. В отличие от стандартного подключения, на слабых соединениях показывается текст со стандартным шрифтом, до тех пор, пока не будет загружен шрифт.
Общее время загрузки: 1132 мс
FontFaceObserver
FontFaceObserver - это JavaScript библиотека (5кб), так называемый подгрузчик совместимый с любым веб-обслуживанием шрифта. Скрипт позволяет уведомить нас о том, загрузился ли шрифт или нет, позволяет отслеживать событие после загрузки и до загрузки шрифта. Общее время загрузки: 159 мс
Использование скрипта.
1. - безусловный лидер рейтинга. Содержит полный набор 897 символов. Имеет отличные характеристики, разборчив. Оптимизирован под различные устройства. Его дизайн практически идентичен Droid Sans, за исключением более широких символов и наличием курсива. В то время как Droid Sans в основном используется в пользовательских интерфейсов некоторых Android устройствах.
2. - этот чистый шрифт мир впервые увидел с появлением операционной системы Android Ice Cream Sandwich. Семейство данного шрифта включает регулярные и курсивные стили, тонкий, легкий, регулярный и суженный ширины (condensed). По своей структуре явно напоминает не менее известный шрифт Helvetica . Начиная с 15 мая 2013 г. данный шрифт компания Google начал интенсивно использовать в своих популярных продуктах таких как: Google+, Google Play, Google Maps.
3. - содержит в себе четыре варианта стиля, что тем не менее не мешает ему занимать лидирующие позиции по популярности. Толчок к развитию данного шрифта дала Роспечать, которая поставила цель создать шрифт поддерживающий все различные варианты кириллицы, используемой на языках национальных меньшинств России. Шрифт PT Sans включает в себе символ российского рубля .
4. - этот шрифт мир впервые увидел в составе операционной системы Ubuntu ее версии 10.10. Доступен в четырех версиях: обычный, курсив, полужирный, полужирный курсив на английском языке и на кириллице. Начиная с 26 апреля 2011 г. он включен для использования в сервисе Google Docs.
5. Arimo - данный шрифт вошел в состав Chrome OS. Еще одна допустимая альтернатива Helvetica.
8. Cuprum - универсальный шрифт. Представляет собой зауженный гротеск. Доступен в четырех вариантах начертаний.
Google создал открытую коллекцию веб-шрифтов .
При помощи Google Font API вы получаете свободный доступ к ним, что дает возможность легко добавлять веб-шрифты на сайт. Это займет не больше 15 секунд! Совершенно бесплатно вы получаете доступ к огромному хранилищу шрифтов.
В числе преимуществ:
● большой выбор высококачественных веб-шрифтов для любой вашей страницы.
● поддержка данных шрифтов почти всеми браузерами (в том числе Explorer 6).
● невероятно легко использовать.
● хранилище шрифтов продолжает увеличивается с каждым днем.
Ниже я приведу пошаговую инструкцию, как найти и установить русские шрифты на ваш сайт.
Чтобы воспользоваться Google Fonts API, перейдите по данной ссылке .
Кликните по кнопке Cyrillic (как показано на рисунке ниже)
Из списка представленных шрифтов выберите нужный шрифт. Затем кликните по закладке “Use this font”. Замечу, что закладка “Download” вам не нужна, только если вы хотите использовать этот шрифт на своем компьютере, например, для фотошопа (правда гугл просит, но не требует, при этом сделать взнос для будущего развития хранилища).
Если вы собираетесь использовать этот шрифт курсивом или жирным, то поставьте галочки возле соответствующих названий.
Обратите внимание, где находится название шрифта (подчеркнуто зеленым). Будет необходимо, если вы вручную будете дописывать название шрифтов.
И вы можете уже использовать его в таблицах стилей CSS. Просто добавляйте название шрифта в свойстве font-family, не забывая добавлять в конце стандартные веб-шрифты.
h1 { font-family: "PT Serif", arial, serif; }
Можно также подключить и использовать сразу несколько шрифтов на вашем сайте.
Запись подключения выглядит так. На рисунке видно, что к чему.
Помимо этого, в он-лайн режиме можно протестировать шрифт с разными настройками.
Нажав кнопку Lanch in font previewer, вы получаете возможность на месте поиграться с настройками. С правой стороны (на фоне в клеточку) можно сразу вводить текст, а слева можно настроить вид текста. Затем внизу вы получаете готовый код CSS, а также строку команды для подключения шрифта к сайту.
Кроме того, вы можете воспользоваться Google Extensions . С его помощью вы сможете прямо на своем сайте тестировать шрифты. Очень удобно, сразу видно как смотрится сайт в данном шрифте.
Подводя итог, замечу, что это творение Google невероятно удобное. О чем говорит тот факт, что Smashingmagazine перезапустил свой веб-сайт воспользовавшись шрифтом Droid из хранилища шрифтов Google. Вам необходимо меньше минуты, чтобы подключить нужный шрифт, а скорость его подключения обеспечивает Google.
На сайтах html, как правило, встречаются стандартные шрифты. Например
- Arial ;
- Verdana ;
- Times New Roman ;
- Georgia ;
- Trebuchet MS ;
Некоторым вебмастерам они покажутся через чур простыми и скучными, поэтому многие ищут варианты как можно сделать шрифт на сайте необычным, красивым и т.п. Можно самостоятельно искать шрифты на просторах интернета или гораздо проще воспользоваться самым крупным сервисом по шрифтам Google Fonts: https://fonts.google.com
Что такое Google fonts
Google fonts - сервис универсальных шрифтов для сайта. Шрифт можно откорректировать в режиме онлайн и сделать его таким, каким вы захотите, после чего подключить его к сайту и использовать
Для начала рассмотрим небольшую инструкцию как создать шрифт на Google fonts.
Как создать шрифт на Google fonts
Перейдя на страницу https://fonts.google.com Вам предстоит либо выбрать готовый шрифт, либо создать свой. Рассмотрим кратко элементы меню.
В левом блоке можно сразу с помощью фильтра отсеять ненужные шрифты:
- Серия шрифтов Serif (с засечками)
- Серия шрифтов Sans Serif (без засечек)
- Серия шрифтов Display (дисплей)
- Серия шрифтов Handwriting (рукописный)
- Серия шрифтов Monospace (моноширинные)
Потом так же можно отсеять по следующим критериям:
Таким образом, выбираете понравившиеся шрифты. Каждый из них можно отредактировать: изменить толщину шрифта, выбрать поддерживаемые языки и т.п.
Например, вам понравился следующий шрифт:
Как добавить шрифт Google fonts на сайт
Чтобы подключить шрифт от Google fonts к себе на сайт даже не обязательно использовать правило @font-face . Делается все проще.
В правом нижнем углу будет окно, куда добавляются все понравившиеся вам шрифты. Вы можете как легко добавить туда шрифт, так же легко и удалить его от туда. Например:
После выбора шрифта Google Вам сам предложит 2 варианта html-кода для вставки (standart и import). Чаще всего используют первый вариант через link:
... ...
А в CSS надо прописать
body { font-family : newfamily , Ariel ; }
Стоит так же обратить внимание на параметр во вкладке "Customize" - Load Time (Fast). Попробуйте включать и отключать галочки. В зависимости от этого загрузка будет либо быстрая, либо медленная.
Естественно нужно стремится к быстрой загрузке.
ПримечаниеНесмотря на удобство использования шрифтов от Google fonts, есть недостаток: шрифт нужно подгружать на сайт. Это в свою очередь создает лишнюю зависимость от качества работы сервера fonts.googleapis.com. По моему опыту я знаю, что иногда он тормозит работу сайта. Я полностью отказался от использования сторонних шрифтов.
