Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.

Животът е прекрасен

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

Встъпление към масите

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

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

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

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

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

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

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

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

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

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

Нестандартни шрифтове

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

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.
HTML код
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FontName">
</head>
FontName е името на избрания от вас шрифт. Сменете FontName с точното име на шрифта.

Втората стъпка от ваша страна е да укажете в CSS, как и къде искаме да ползваме шрифта.
Примерно:
CSS код
p {
font-family: «FontName»;
font-size: 12px;
}
Може да опитате нещо по-сложно. По подразбиране, вие получавате шрифт с обичаен стил. Ако обаче се нуждаете от наклонен или удебелен шрифт? Лесно, добавяте двуеточие (:) в края на името на шрифта и указвате стила, когото ви е нужен.

Пример, как да получим наклонен и удебелен шрифт.
HTML код
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css? family=FontName:italic,bold">
Използване на няколко шрифта.
Не е нужно да правите няколко връзки за всеки един добавен шрифт. Достатъчно е да добавите в кода символ «|» и да допишете след него другото име. Нека съчетаем с наученото преди малко, то нещата конкретно за този блог изглеждат така:
HTML код
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Philosopher|Reenie Beanie|Yanone Kaffeesatz'/>

Инструменти

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

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

видео поздрав за масите

30.10.2010 profruit 

0 Response to "Уеб типография с Google Font API"

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: Ubuntu, WEB, Photoshop, Фотография, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога