Кърваво писмо от Якоруда

Не ви ли писна на сайдера да пишете с вездесъщите "Verdana" или да тахомите с "Tahoma"?

Излиза, че тук-там се намират някакви шибаняшки шрифтове, които могат коренно да изменят сичюейшъна в уеб-типографията.

Какво му става на този? Нищо! Просто идват разни небългари и те тоже ме четат. И се опитват да ме разберат с преводачката на дядо Гуг? И дядо Гуг превежда. Обаче ще ми преведе хастара на шушлека, защото това е кърваво писмо до пипълсите.

Пич, много смъркаш! Тогава не е имало нет и писмото специално е било накапано с кръв, за да се отприщи СПИН-а. Понял!

Обаче има една малка проблема. Гъзарските шрифтове не са безплатни и не са общодостъпни, някакви там пропиетарни лицензи. Сакам да казувам Myriad Pro. А дано в другия живот авторът му се прероди в едноклетъчно! Ние, хищниците, откъде да вземем кинти бре, дядо ми не е евреин?!

Мда, тук една лелка бълва гарнитури, които може да се инсталират в зомби кутиите (на галено компчето). Цъкай тук. И после да се използват в качеството на базов шрифт в уеб-типографията (русаниците четат уеб-уйоб, което си е онази работа, сещай се - ... ми Янко). И каква стана тя - уйоб типография. Дреме ти на фара. Интересно ми е дядо Гуг каква тъпня в превода ще избаса за "Дреме ти на фара" и после, защо разни небългари като ми пишат по месенджърите ме мислят за негър.

Да, ама не Спаске. Яж сирене, защото си зависима от комплекта шрифтове, които са инсталирани в операционната ти система. При това задължително близки или техните аналози в други ОС-ми (не осми, а операционни системи, понял). Иначе едни узери ще виждат "красиво", а други - "горе-долу".

Аре не се прави! Georgia и Lucida Grande/Sans стават за някакъв чеп, другите вярно са тафта.

Братя! Изобщо не се правя и ви казвам братя, пишете си любовните писма с Arial, Times New Roman, Verdana или Tahoma, ама кървавите с по-такива, ако се сещате какво ми инспирирам.

Не виждаш капките кръв, защото аз не съм донор на кръв! Умри вампир!

Съществуват различни начини за демонстрация на нестандартен шрифт в уеб-документ. В началото, той трябва да бъде инсталиран в системата.

• С помощта на графичен редактор. Текстът се превръща в картинка и тя се добавя в страницата. Не сме 1996г и днес това се приема за детско изпълнение.
• Чрез флаш технологията. Получаваме на изхода *.swf файл, когото добавяме на нужното място. Изглежда сложно и не на място.
• Чрез джава скриптове. Моят фаворит е френския Cufon. Мощен инструмент с неговите плюсове и минуси. Подминаваме го с уговорка, че търсим нещо семпло и бързо.
• Последният, за когото се сещам е Google Font API и него ще разгледаме надолу.

Google предостави Font API, което е набор от инструменти за украшение на сайтове с разнообразни шрифтове. Заглавията на статията тук са постигнати с шрифт "Philosopher", захранван от Google Font Directory.

Технологията предлага просто подключване на CSS, използващо @font-face, а още съвременна JavaScript библиотека WebFont Loader, съвместна разработка на Google с TypeKit.

Всичко това може да се направи и без Google, разполагайки необходимите файлове на своя сървър. Google просто предоставя възможност да разтоварите сървъра си и икономисате трафик. Все пак шрифтовете са с обем около 50-70 килобайта.

Примери:
шрифт "Yanone Kaffeesatz"

Wonderful Life

шрифт "Reenie Beanie"

Hello ProfruitBlog Fan

Основи на Google Font API

Google Font API е прост в употреба и не изисква особени знания по програмиране. Ако сте строили сайт, то определено ще се справите..

Как работи: @font-face?

Google Font API използва свойство CSS @font-face. Не се плашете от свойството, а смело го използвайте. @font-face ви позволява да използвате файлови шрифтове (техните разширения са .otf и .ttf) по същия начин като в приложни програми, например, Microsoft Word или Adobe Photoshop.

Нюансът с това свойство е, че разните браузъри ползват разни шрифтове по тип. Например, Internet Explorer разбира само .eot-файлове, докато Firefox търси формат .otf. Това кара разработчиците да прибягват до всевъзможни "магии", за да подсигурят поддръжка на @font-face за всички браузъри. Задаването на условие в CSS, в зависимост от браузъра, който зарежда файла е едно от тях.

Възниква обаче малък проблем с @font-face — лицензионната чистота на самите шрифтове. Неяснота, може ли да се използва дадения шрифт на своите страници или е нужно тяхното лицензиране.

Google Font API решава този проблем.

Изгода от ползване на Google Font API

Google Font API е отлично решение, избавящо от редица проблеми свързани с @font-face. Преди всичко този сервиз прави ползването на уеб-шрифтове по-лесно. Вие може да включите избрания шрифт, добавяйки единствено един ред код в шапката на HTML-документа и няколко реда в CSS.
Не е нужно да се безпокоите от работата на разните браузъри. Отлична кросбраузърност . Шрифтовете се поддържат от всички популярни браузъри: Internet Explorer, Firefox, Chrome и Safari.

Шрифтовете от Google са отворени и се предоставят безвъзмездно, което ви спестява проблемите с лицензиите.

Техническата изгода от ползването на Google Font API, по сравнение съхранението им на свой сървър е преди всичко високата стабилност на Google към големи натоварвания и количество заявки. Тази компания е всепризнат лидер в оптимизацията на сайтове. Нещо повече, читател посетил сайт, ползващ Google Font API, ще разполага с него, заради кеширането, което повишава скоростта на зареждане на вашата страница.

И най-главното, това е абсолютно безплатно.

Как се работи с Google Font API?

Google Font API е отлично документиран на страниците на Google, но нека засегнем важните моменти.

Първо, добавете вътре в вашата страница пътя към файл с CSS-стилове, разбира се преди <head> в шапката на HTML-документа. Ако ползвате CMS, например, WordPress или Joomla!, то внесете допълнението в шаблона. Ако касае статичен сайт, то е нужна промяна в всички страници на сайта. Ако разполагате с глобален файл CSS, може да ползвате директива @import.
FontName е името на избрания от вас шрифт. Сменете FontName с точното име на шрифта.

Втората стъпка от ваша страна е да укажете в CSS, как и къде искаме да ползваме шрифта.
Примерно:
Може да опитате нещо по-сложно. По подразбиране, вие получавате шрифт с обичаен стил. Ако обаче се нуждаете от наклонен или удебелен шрифт? Лесно, добавяте двуеточие (:) в края на името на шрифта и указвате стила, когото ви е нужен.

Пример, как да получим наклонен и удебелен шрифт.
Използване на няколко шрифта.
Не е нужно да правите няколко връзки за всеки един добавен шрифт. Достатъчно е да добавите в кода символ «|» и да допишете след него другото име. Нека съчетаем с наученото преди малко, то нещата конкретно за този блог изглеждат така:

Инструменти

Google предлага някои инструменти, за лесна работата с Font API. Това е Font Directory, Google Font Previewer и Web Font Loader.

Google Font Previewer позволява експериментиране с шрифтовете. Можете да изменяте размер, стил и разстояние между символите. В краен резултат получавате генериран код, който показва шрифта на вашата страница подобно в Font Previewer.