В закладки

X

База плагинов jQuery

Множество различных jQuery примеров, элементы CSS
и большое количество других инструментов для Вашего сайта!

> > Советы по CSS, HTML, Java Script, PHP - font-face и дизайнерские шрифты
-->

28-12-2016

Статьи

Советы по CSS, HTML, Java Script, PHP - font-face и дизайнерские шрифты

Советы по CSS, HTML, Java Script, PHP - font-face и дизайнерские шрифты

Многие веб-дизайнеры сталкивались с проблемой переноса шрифтов с нарисованного макета на html страницу. Перед ними вставала дилемма – забыть про красивые шрифты и довольствоваться теми шрифтами, которые есть у всех или же на свой страх и риск использовать свой шрифт и молится, чтобы он оказался у пользователя на компьютере. Но прогресс не стоит на месте и CSS3 продолжает нас приятно удивлять.

 

Давайте посмотрим как дело обстояло в CSS1 font-family

В css1 для задания шрифта использовалось свойство font-family в котором через запятую указывались предпочтительные шрифты. Например: font-family:”Lucida Grande”,Tahoma,Verdana,Arial,Sans-serif;

 

Браузер по очереди начинает искать шрифт у пользователя, сначала он ищет шрифт Lucida Grande, если он его не находит, то он переходит к поиску шрифта Tahoma, если и его не находит, то начинает искать следующий и так до тех пор, пока не найдет тот шрифт, который есть у пользователя. Если ни один из заявленных шрифтов не найден, то браузер отобразит страницу при помощи тех шрифтов, какие у него указаны по-умолчанию.

В принципе неплохой вариант указывать шрифты через свойство font-family, но вот только одна и та же страница у разных пользователей может отобразиться по-разному, т.к. у одного есть 1-ый шрифт, а другого есть только 3-й шрифт. А разные шрифты влекут за собой разные значения для высоты и ширины и бог знает еще на что могут повлиять, так что результат может быть не предсказуем, поэтому все условились использовать так называем стандартные группу шрифтов.

Грустно конечно, не всегда красиво, зато надежно.

И вот наконец молитвы веб-дизайнеров были услышаны.

 

font-face

В CSS3 появилось свойство font-face, которое позволяет загрузить дизайнерский шрифт напрямую с сервера на компьютер пользователя и затем отобразить сайт используя этот шрифт. Что еще приятней загрузка шрифта происходит “в фоне”, то есть пользователю ничего не нужно делать, он даже ни о чем не узнает и ему не нужно будет перезагружать или обновлять страницу.

Пример:

@font-face {font-family: “Lucida Grande”;src: url(http://neoprizma.net/demo/fonts/Lucida-Grande.ttf);} эта строчка означает, что шрифт Lucida Grande будет загружен из файла http://neoprizma.net/demo/fonts/Lucida-Grande.ttf, а дальше мы можем использовать этот шрифт при помощи старого доброго свойства font-family . То есть достаточно всего один раз объявить шрифт и он всегда будет доступен.

Свойство font-face является частью спецификации CSS3 и поддерживается большинством новых браузеров, в том числе и в IE.

Читайте так же:

Здесь нет еще ни одного комментария...

Оставить комментарий

 

Опрос

Какие материалы стоит добавлять на сайт в большей степени?


 

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Скачать
v.1.4.1 или v.3.0.0

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Популярное за неделю:

Шаблоны:

Подборки интерфейсов:

Архив материалов:

«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031 

^