Вибір мови

  • 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 рішення, актуальні уроки з фотошопу та графічного дизайну, рекомендації та приклади уроків по створенню гарних та оригінальних сайтів, або Ви хочете бути в курсі останніх новинок і трендів у веб розробці? Тоді Ви потрапили саме туди! Також не залишаться осторонь питання пов'язані з просуванням сайту в пошукових системах - СЕО та оптимізація. Розглянемо основні моменти якісного наповнення сайту - копірайтинг, веб-райтинг, неймінг ітп. Сподіваюся Вам сподобаєтся у нас;)

Шрифти - де взяти, як вмонтувати

03.11.2012 в 02:00 | NARDO | Теги: шрифти, Google Web Fonts, Fonts, Google, Cufon

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

 Шрифти - де взяти, як вмонтувати Dafont.com

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

 Шрифти - де взяти, як вмонтувати Dafont.com

Величезною перевагою ресурсу є наявність більше 50 кірілістіческіх шрифтів, що робить особливо актуальним даний ресурс для нашого регіону.
Завдяки меню опцій ви не тільки можете вписати текст для попереднього перегляду, але й вибрати кількість відображуваних шрифтів на сторінці, їх розмір, тип шрифтів, можливість перегляду всіх варіантів одного шрифту та багато іншого.

 Шрифти - де взяти, як вмонтувати Dafont.com

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

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

Для презентацій та різних графічних рішень 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 бібліотеку 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"

 

 Як Ви бачите використання стильних та нестандартних шрифтів при розробці сайту стало просто як ніколи. Та й веб-технології не стоять на місці, пропонуючи нам все більше творчої свободи при реалізації різних задумок. Сподіваюся Ви почерпнули щось нове для себе! Зважуйтесь на більше!


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»

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

Всяка всячина.
Статті не пов'язаних з основною тематикою мого блогу.



ПОПУЛЯРНЕ

    Підбірка класних шаблонів візитних карток. 3 Частина

    Підбірка класних шаблонів візитних карток. 3 Частина.
    Величезна підбірка різних шаблонів візиток на всі випадки життя! Далі...»

    Підбірка класних шаблонів візитних карток. 1 Частина

    Підбірка класних шаблонів візитних карток. 1 Частина.
    Величезна підбірка різних шаблонів візиток на всі випадки життя! Далі...»

    Добірка класних шаблонів візитних карток. 6 Частина

    Добірка класних шаблонів візитних карток. 6 Частина.
    Величезна добірка різних шаблонів візиток на всі випадки життя! Далі...»

    Добірка класних шаблонів візитних карток. 5 Частина

    Добірка класних шаблонів візитних карток. 5 Частина.
    Величезна добірка різних шаблонів візиток на всі випадки життя! Далі...»

    Підбірка класних шаблонів візитних карток. 4 Частина

    Підбірка класних шаблонів візитних карток. 4 Частина.
    Величезна підбірка різних шаблонів візиток на всі випадки життя! Далі...»

ВИПАДКОВІ НОТАТКИ

    Добірка класних шаблонів візитних карток. 5 Частина

    Добірка класних шаблонів візитних карток. 5 Частина.
    Величезна добірка різних шаблонів візиток на всі випадки життя! Далі...»

    Добірка різних менюшек. 1 частина - горизонтальні меню

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

    Встановлення та налаштування SimpleGallery для MODx EVO

    Встановлення та налаштування SimpleGallery для MODx EVO.
    Покрокове встановлення та налаштування SimpleGallery для MODx EVO Далі...»

    Добірка різних слайдерів. Частина 3

    Добірка різних слайдерів. Частина 3.
    Пропоную до вашої уваги третю частину добірки слайдерів на будь-який смак. Усі слайдери надані у статті як мінімум умовно безкоштовні і доступні для завантаження. Сподіваюся ви знайдете щось для себе нове! Далі...»

    Фотобанки з безкоштовними фото, частина перша

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



Наш вибір:


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

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


Доменні імена в Україні

Доменні імена в Україні




Доменні імена у світі

Доменні імена у світі


pisture

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

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

СПІЛЬНОТА

КОНТАКТИ