Выбор языка

  • NARDOdesign
  • NARDOdesign
  • NARDOdesign

NARDOdesign NARDOdesign NARDOdesign NARDOdesign NARDOdesign

  • В помощь вебмастеру

    | ЛИКБЕЗ |

    В помощь вебмастеру

    В данном разделе представлены статьи, раскрывающие основные моменты работы вебмастера с сайтом, а также базовые моменты при разработке сайтов

  • Полезные веб-ресурсы

    | ЗАКЛАДКИ |

    Полезные веб-ресурсы

    Обзор полезных вебресурсов для разработчика и вебмастера различной тематики

  • Уроки и мастер-классы по разработке

    | ТУТОРИАЛЫ |

    Уроки и мастер-классы по разработке

    Уроки по разработке сайтов, уроки фотошоп, графические темплейты от «NARDOdesign»

  • Шаблоны HTML и CSS

    | ТЕМПЛЕЙТЫ |

    Шаблоны HTML и CSS

    Различные HTML шаблоны, CSS, веб-верстка от «NARDOdesign»

  • JQuery, JavaScript, Mootools

    | JAVASCRIPT |

    JQuery, JavaScript, Mootools

    Различные JavaScript решения, содержащие самые популярные библиотеки на основе jQuery, Mootools, HTML5 и CSS

  • Графика и дизайн

    | ГРАФИКА |

    Графика и дизайн

    Уроки фотошоп, графические темплейты , изображения, иконки, векторные и растровые файлы, PSD, кисти и многое другое

  • Продвижение и оптимизация сайтов

    | СЕО |

    Продвижение и оптимизация сайтов

    Уроки по основам продвижения и оптимизации сайтов, продвижение сайтов, вывод в топ, поддержка позиций, SEO от «NARDOdesign»

  • Всякая всячина

    | ОФФТОП |

    Всякая всячина

    Статьи не связанным с основной тематикой моего блога

Next
  • В помощь вебмастеру
  • Полезные веб-ресурсы
  • Уроки и мастер-классы по разработке
  • Шаблоны HTML и CSS
  • JQuery, JavaScript, Mootools
  • Графика и дизайн
  • Продвижение и оптимизация сайтов
  • Всякая всячина
Previous

“Мы сделали кнопки на экране настолько хорошими, что вы будете хотеть их облизывать.”
Steve Jobs, Chairman and CEO Apple Inc.

NARDOdesign – доступно и просто о веб разработке от А до Я

Если Вас интересуют качественные и новые HTML и CSS темплейты, уникальные и свежие JavaScript решения, актуальные уроки по фотошопу и графическому дизайну, рекомендации и примеры уроков по созданию красивых и оригинальных сайтов, или Вы хотите быть в курсе последних новинок и трендов в веб разработке? Тогда Вы попали именно туда! Также не останутся в стороне вопросы связанные с продвижением сайта в поисковиках – СЕО и оптимизация. Рассмотрим основные моменты качественного наполнения сайта – копирайтинг , веб-райтинг, нейминг итд. Надеюсь у нас Вам понравиться ;)

Шрифты - где взять, как встроить

28.10.2012 в 05:12 | NARDO | Теги: шрифты, Google Web Fonts, Fonts. Google, Cufon

Любой Ваш проект, будь то сайт, презентация или стильная визитка имеет в своем составе различный текст. При этом стиль текста имеет огромное значение – он может, как украшать общую композицию, внося в нее гармонию, так и внести дисбаланс  своим аляповатым или несочетающимся видом. Поэтому подбор шрифта зачастую носит очень длительных характер. Также проблемой является то, что разработка нового шрифта, как правило, очень трудоемкий процесс, соответственно  найти легально качественный и красивый шрифт довольно проблематично. На просторах интернета существует полно ресурсов предлагающих скачать различные шрифты, но вот на сколько они легальны для использования – это вопрос открытый. Но выход есть всегда – в сети есть прекрасный сайт с легальным содержанием в виде огромной подборки различных шрифтов.
Представляю Вам один из старейших ресурсов посвященный различным шрифтам - Dafont.com

 Шрифты - где взять, как встроить

Его база содержит более 16000 различных очень качественных шрифтов. Подборка постоянно обновляется.
Для навигации по сайту на главной странице представлен удобный классификатор, позволяющий быстро определиться с каким типом шрифта вы хотите работать.

 Шрифты - где взять, как встроить

Огромным достоинством ресурса является наличие боле 50 кирилистических шрифтов, что делает особенно актуальным данный ресурс для нашего региона.
Благодаря меню опций вы не только можете вписать текст для предпросмотра, но и выбрать количество отображаемых шрифтов на странице, их размер, тип шрифтов, возможность просмотра всех вариантов одного шрифта и многое другое.

 Шрифты - где взять, как встроить

Также присутствует возможность сортировать шрифты, как по популярности, названию,  так и по дате добавления.

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

Для презентаций и различных графических решений Dafont.com это конечно выход, но как быть с различными сайтами и веб-приложениями? Конечно, при создании сайта вы можете использовать любой понравившийся Вам шрифт, но где гарантия, что они установлены у конечного пользователя? Ведь стандартный набор шрифтов поддерживаемых любым браузером довольно скуден -Arial, Verdana, Times New Roman, Georgia, Trebuchet MS, Courier New, Comic Sans MS. До недавнего времени эта проблема была довольно острой, но с появлением уникального сервиса от Google, многие веб-дизайнеры смогли здорово облегчить себе жизнь. Представляем Вашему вниманию Google Web Fonts – уникальный сервис дающий возможность вставлять различные шрифты на Ваш сайт посредством JavaScript.

 Шрифты - где взять, как встроить

На данный момент ресурс содержит более 500 различных шрифтов, и это не предел – постоянно идет пополнение новыми поступлениями. Также не забыли и о кириллице – их конечно не так много как хотелось бы, не более 40, но это лучше чем ничего.

Сайт Google Web Fonts содержит большое количество различных фильтров помогающих отсортировать шрифты по необходимым именно Вам параметрам.

 Шрифты - где взять, как встроить

Также сайт имеет возможность предпросмотра выбраной подборки различных шрифтов, для удобства пользователей реализована функция ввода необходимого Вам текста для оценки его внешнего ввида. При этом Вы можете изменять размер шрифта, сортировать шрифты по популярности, дате добавления и другим параметрам.

 Шрифты - где взять, как встроить

Выбранный вами шрифт будет доступен для использования в разделе Quick Use.

 Шрифты - где взять, как встроить

Quick Use, представлен 4-мя пунктами:

1. Выбор стиля шрифта и оценка его скорости загрузки.

Шрифты - где взять, как встроить

2. Выбор типа набора символов.

Шрифты - где взять, как встроить

3. Выбор варианта кода для вставки в ваш сайт.

Шрифты - где взять, как встроить

4. Код для вставки в вашу таблицу стилей.

Шрифты - где взять, как встроить

Огромным преимуществом такого типа работы с шрифтами является скорость загрузки – шрифты грузятся с серверов Google, не нагружая ваш личный веб-хостинг, да и стабильность серверов поискового гиганта как правило выше обычного хостинга.
Кроме данного способа Вы также можете скачать необходимые Вам шрифты в формате .ttf нажав на кнопку «Download your Collection», но перед этим не забудьте добавить их в Коллекцию посредством кнопки «Add to Collection».

 Шрифты - где взять, как встроить

Онлайн сервис Google Web Fonts не стоит на месте – благодаря абсолютно бесплатной свободной лицензии, дающей возможность встраивать набор шрифтов от Google в любой веб-проект и универсальной кроссбраузерности,  данный сервис получил огромное распространение  среди веб-разработчиков, что несомненно дает возможность сервису динамично развиваться  и пополняться новыми различными шрифтами.

 

Если среди вышеперечисленных двух проектов Вы не нашли то что искали, или у Вас уже есть подобранный шрифт в Dafont.com но он отсутствует в Google Web Fonts не отчаивайтесь, есть еще один волшебный способ для добавления любого шрифта на сайт!

Представляю Вашему вниманию javascript плагин Cufon. Его работа основана на преобразовании любого шрифта в SVG или VML объект. Рассмотрим подробнее что это. Для интеграции красивого шрифта в сайт ранее дизайнеры использовали его вставку в виде изображений. Плагин Cufon по сути делает тоже самое только посредством JavaScript – в браузерах поддерживающих SVG отрисовывается в виде данных элементов, в других браузерах которые не поддерживают это решение применяется технология VML – где шрифт превращается в графическую картинку посредством JavaScript.

Плагин конечно не идеален, у него есть существенные недостатки - невозможно скопировать и выделить текст, не всегда корректно работает с большими объемами текста, замедленная реакции скрипта – до того как он загрузится  и обработает текст пользователь увидит стандартный шрифт. Несмотря на это на данный момент это одно из лучших решений благодаря кроссбраузерности, простоте применения и возможности редактирования текста стандартными инструментами с применением обычных параметров шрифта, поддержке классов hover, text-shadow, возможности  защиты от копирования.
Стоит отметить также небольшой вес библиотек скрипта благодаря чему скорость загрузки сайта практически не изменится.

Для работы с плагином необходимо скачать JavaScript  библиотеку JavaScript cufon-yui.js.
Теперь нам необходимо создать шрифт посредством Generator. Для начала загружаем фалы с доступными шрифтами (поддерживаются расширения .TTF, .OTF, .PFB).

 

 Далее выставляем необходимые опции такие как тип шрифта, ограничение использованием другими доменами итд.

 Шрифты - где взять, как встроить

 В итоге вы получите файл расширением .js котрый необходимо будет встроить в Ваш сайт вместе с библиотекой cufon-yui.js.

 Шрифты - где взять, как встроить

Пример (вставьте перед закрывающимся тегом </head>)

 

1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="cufon-yui.js"></script>
 
<script type="text/javascript" src="Сгенерированный файл.js "></script>
 
<script type="text/javascript">
 
Cufon.replace("h1");
 
</script>

 

 

Данный плагин имеет стандартные опции и методы запуска приведенные в таблицах ниже взятых с сайта xiper.net.

Методы запуска плагина

Методы запуска
set

задает опции шрифта

Cufon.set(option, value)

Cufon.set("fontFamily", "Amaze")

replace

заменяет обычный шрифт на указанный

Cufon.replace(selector[, options])

Cufon.replace('h1')('h2');

now

команда для начала замены текста Cufonом. Иногда нужно для IE, чтобы замена начала происходить после полной загрузки DOM струкутры

Cufon.now()

refresh

обновляет указанный селектор. Нужно для динамически сгенерированного/измененного контента

Cufon.refresh([selector, ..])

Cufon.refresh

 

Опции плагина

Опция

Описание

Возможные значения

По умолчанию

autoDetect

Если установлен true, имя шрифта берется из CSS свойства font-family (не работает в Opera)

true, false

false

color

Цвет текста. Значение берется из CSS свойства color, если не используется градиент

"red", "#f62315", ..

из CSS

fontFamily

Имя шрифта, который будет применен

Имя любого загруженного шрифта

Последний загруженный шрифт

fontSize

Размер шрифта. Если не задан в опциях, берется из CSS (font-size). Доступны значения только в px.

"14px", "24px", "72px", ..

из CSS

fontStretch

Ширина символов. Если не задан в опциях, берется из CSS (font-stretch).

"160%", "condensed", "semi-expanded", ..

"normal"

fontStyle

Стиль шрифта. Если не задан в скрипте, берется из CSS свойства font-style

"normal", "italic", "oblique"

Из CSS

fontWeight

Жирность шрифта. Если не задан явно в скрипте, берется из CSS свойства font-weight

100-900, "normal", "bold"

Из CSS

forceHitArea

Фиксирует кликабильную область элемента для IE. (если у элемента, к которому применен Cufon, задано фоновое изображение, по умолчанию в IE становятся некликабильными прозрачные участки — то что не начертание букв)

true, false

false

hover

Включать ли поддержку :hover. Можно так же явно указать как реагировать на наведение (тип значения Object)

true, false, Object

false

hoverables

Определяет какие теги будут реагировать на :hover (в IE6 применимо только к ссылкам)

{ tag: true, .. }

{ a: true }

letterSpacing

Расстояние между буквами. Если не задано явно в скрипте, берется из CSS свойства letter-spacing

"-1px", ..

Из CSS

separate

Как переносится многострочный текст.

"words" — слов не разрывать, "none" — не переносить на вторую строку, "characters" — слова можно разрывать

"words"

textShadow

Отображает тень текста. Если не задано явно в скрипте, берется из CSS свойства text-shadow

"1px 1px #000", ..

"none"

textTransform

Преобразование текста. Если не задано явно в скрипте, берется из CSS свойства text-transform

"uppercase", "lowercase", "capitalize", "none"

из CSS

trim

Как-то влияет на смежные пробелы и переносы строк. Толком не понял, нужно тестировать.

"simple", "advanced"

"simple"

 

 Как Вы видите использование стильных и нестандартных шрифтов при разработке сайта стало просто как никогда. Да и веб-технологии не стоят на месте, предлагая нам все больше творческой свободы при реализации различных задумок. Надеюсь Вы почерпнули что-то новое для себя! Дерзайте.



blog comments powered by Disqus


КАТЕГОРИИ

В помощь вебмастеру.

В помощь вебмастеру.
В данном разделе представлены статьи, раскрывающие основные моменты работы вебмастера с сайтом, а также базовые моменты при разработке сайтов.

Полезные веб-ресурсы.

Полезные веб-ресурсы.
Обзор полезных вебресурсов для разработчика и вебмастера различной тематики.

Уроки и мастер-классы по разработке.

Уроки и мастер-классы по разработке.
Уроки по разработке сайтов, уроки фотошоп, графические темплейты от «NARDOdesign»

Шаблоны HTML и CSS.

Шаблоны HTML и CSS.
Различные HTML шаблоны, CSS, веб-верстка от «NARDOdesign»

JQuery, JavaScript, Mootools.

JQuery, JavaScript, Mootools.
Различные JavaScript решения, содержащие самые популярные библиотеки на основе jQuery, Mootools, HTML5 и CSS.

Графика и дизайн.

Графика и дизайн.
Уроки фотошоп, графические темплейты , изображения, иконки, векторные и растровые файлы, PSD, кисти и многое другое.

Продвижение и оптимизация сайтов

Продвижение и оптимизация сайтов.
Уроки по основам продвижения и оптимизации сайтов, продвижение сайтов, вывод в топ, поддержка позиций, SEO от «NARDOdesign»

Всякая всячина

Всякая всячина.
Статьи не связанным с основной тематикой моего блога.



ПОПУЛЯРНОЕ

    Подборка классных шаблонов визитных карточек. 4 Часть

    Подборка классных шаблонов визитных карточек. 4 Часть.
    Огромная подборка различных шаблонов визиток на все случаи жизни! Далее...»

    Подборка классных шаблонов визитных карточек. 5 Часть

    Подборка классных шаблонов визитных карточек. 5 Часть.
    Огромная подборка различных шаблонов визиток на все случаи жизни! Далее...»

    Подборка различных менюшек. 5 часть - вертикальные меню

    Подборка различных менюшек. 5 часть - вертикальные меню.
    Предлагаю Вашему вниманию пятую часть мега-подборки различных меню на любой вкус - здесь есть из чего выбрать! Далее...»

    Подборка различных менюшек. 4 часть - вертикальные меню

    Подборка различных менюшек. 4 часть - вертикальные меню.
    Предлагаю Вашему вниманию четвертую часть мега-подборки различных меню на любой вкус - здесь есть из чего выбрать! Далее...»

    Подборка классных шаблонов визитных карточек. 1 Часть

    Подборка классных шаблонов визитных карточек. 1 Часть.
    Огромная подборка различных шаблонов визиток на все случаи жизни! Далее...»

СЛУЧАЙНЫЕ ЗАМЕТКИ

    Edge от Adobe . Первое знакомство.

    Edge от Adobe . Первое знакомство. .
    Edge от Adobe – что это? Полноценный инструмент или пародия на Flash? Какие перспективы и что ждать в будущем. Все это рассмотрим подробнее. Далее...»

    Фотобанки с бесплатными фото, часть первая

    Фотобанки с бесплатными фото, часть первая.
    Не знаете где взять качественные иллюстарции абсолютно бесплатно? Не беда - у нас есть ответ! Далее...»

    Подборка различных слайдеров. Часть 2

    Подборка различных слайдеров. Часть 2.
    Предлагаю вашему вниманию вторую часть подборки слайдеров на любой вкус. Все слайдеры предоставленные в статье как минимум условно бесплатные и доступны для скачивания. Надеюсь вы найдете что то для себя новое! Далее...»

    Фотобанки с бесплатными фото, часть вторая

    Фотобанки с бесплатными фото, часть вторая.
    Подборка различных ресурсов посвященных фотографиям. Далее...»

    Создание визитки в темных тонах

    Создание визитки в темных тонах.
    Пошагово рассмотрим пример создания визитки при помощи Adobe Photoshop Далее...»



Наш выбор:


Услуги хостинга

Услуги хостинга, сервера


Доменные имена в Украине

Доменные имена в Украине




Доменные имена в Украине

Доменные имена в мире


pisture

Школа веб-разработки от NARDOdesignblog

Доступно и просто, всё о веб-разработке от А до Я

СООБЩЕСТВО

КОНТАКТЫ