Здравейте скъпи приятели!
Както вече всички знаете, типографията е един от най-важните елементи в дизайна. С навлизането на новите технологии в изработката на уеб сайтове, тя стана неразделна част и от уеб дизайна. Вече сме доста улеснени в това да ползваме нови и интересни шрифтове в проектите си, но… винаги има но, нали?
За съжаление хубавите и направените за уеб кирилизирани шрифтове са изключително малко. Затова реших да споделя с Вас един изключително удобен и силен инструмент, който позволява да се имплементират кирилизирани шрифтове, направени специално за уеб сайтове.
Да! Говоря именно за Google Web Font – лабораторията за шрифтове на Google, която до скоро имаше само 3-4 кирилизирани шрифта. Сега вече са 15.
В този кратък урок ще Ви покажа как да ги използвате, техните предимства и някои недостатъци.
Адресът на шрифтовата лаборатория на Google е : http://www.google.com/webfonts
Заредете адреса, след което изберете от филтъра кирилизирани шрифтове.
Ще ви излезе списък, който показва само кирилизираните шрифтове. След като изберете подходящия за Вас шрифт ще излезе профила на самия шрифт.
Сега имате 2 варианта: да го тествате, за да прецените дали това е шрифтът, който Ви е нужен, или директно да го инсталирате.
Инсталиране на кирилизиран шрифт.
Google Web Fonts дава възможността да ползвате шрифта директно от техния сървър, което е изключително удобно, защото не Ви се налага да правите никакви настройки, да качвате файлове или каквото и да било, просто копирате следния линк:
<link href="http://fonts.googleapis.com/css?family=Lobster:regular&subset=cyrillic,latin" rel="stylesheet" type="text/css" >
в тага <head></head> и това е всичко по инсталирането на шрифта.
За по-напредналите разработчици системата позволява голяма свобода, като да импортирате шрифта директно в CSS файла си с функцията @import:
@import url(http://fonts.googleapis.com/css?family=Tenor+Sans&subset=cyrillic,latin);
или директно да се заровите в Java Scripta:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tenor Sans' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
Използване на инсталирания шрифт
След като го инсталирате, кирилизираният шрифт се използва както всяко едно font-family.
Пример: h1 { font-family: 'Tenor Sans', arial, serif; }
В конкретния пример инсталирах шрифта Lobster, затова и кодът, който трябва да въведа в CSS файла си, е:
body {
font-family: 'Lobster', serif;
}
можете да променяте настройките от Font Previewer програмата, докато стигнете до желания резултат, след което копирайте генерирания код и го поставете в CSS файла си. В повечето случаи той изглежда така:
body {
font-family: 'Lobster', serif;
font-size: 36px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
Малък съвет: Използвайте кода, който генерира самият Font Prewiver, защото шрифтът изглежда изключително по-добре, ако е зададен по начина, по който е генериран. Има огромна разлика в тези шрифтове, ако например зададете тежестта на шрифта font-weight:bold; и font-weight:800; визуализацията е различна.
Преглед на кирилизиран шрифт. Font Previewer
Стартирайте програмата за преглед на шрифта. Тя Ви дава възможност да променяте вида, големината, да добавяте и махате курсив, сянка, отстояние от думи и букви.
Поиграйте си с настройките, докато получите нужния Ви резултат. После просто копирайте кода в CSS файла си и сте готови!
Това е.
Важно
Винаги слагайте по един web safe шрифт към фамилията, за да сте 100% сигурни, че всичко ще работи нормално и при по-екстремни условия.
Допълнения и разширения.
Уеб сайтът дава възможност да свалите файла с кирилизирания шрифт и да го инсталирате на вашия компютър. Така можете да използвате шрифта с PhotoShop, докато разработвате самия проект.
Ето и един удобен инструмент, ако ползвате Google Chrome. След като сте реализирали проекта си, но се двоумите между един или няколко шрифта, следното малко разширение ще Ви е от изключителна полза:
https://chrome.google.com/webstore/detail/engndlnldodigdjamndkplafgmkkencc
Това разширение Ви дава възможност да сменяте шрифта на всяка страница с друг от каталога на Google WebFonts.
Ако искате да се заровите още по-надълбоко в дебрите на този инструмент, можете да посетите и пълната техническа спецификация и помощни файлове.
Предимства и недостатъци
Предимствата са много и очевидни. Свобода, лесно и бързо инсталиране, поддръжка на всички браузъри (което за мен е най-големият плюс) в случая няма да се съобразяваме, дали конкретен браузър поддържа или не @font-face класа.
Недостатъците за мен като уеб дизайнер са малко: основният е, че в редки случаи шрифтът се скапва и страницата трябва да бъде презаредена, за да се коригира. Това се случва изключително рядко и е цена, която аз съм готов да платя за един по-красив Интернет.
Още статии за кирилизирани шрифтове
10 модерни, безплатни кирилизирани шрифта
Безплатни шрифтове в MyFonts.com
Интересно ми е дали някой друг, който ги е ползвал не е срещал проблеми.
Също ако из Интернет има други такива инструменти, които си заслужават да се знаят, можете да ги споделяте.
Няма да се учудя ако тази услуга на google и другите подобни спрат да се ползват скоро. Новите възможности на CSS3 се оказаха изключително удобни и лесни за изпозване, пример:
@font-face {
font-family: Rockwell;
src: url(‘Rockwell.otf’);
}
Естесвено няма 100% поддръжка, особено при стари browser-и и като devs трябва да се съобразим с това и с клиентите, но без проблеми можем да си дефинираме и алтернативи след запетаята, за да се подсигурим.
Колкото до кирилизираните шрифтове ( много добра статия btw ) от доста време съм хвърлил око на един, постоянно го виждам по билбордове и flash реклами и чак днес се реших да го търся. Адски прилича на Rockwell и от търсенето досега май ще се окаже, че наистина е Rockwell cyrillic. Намеря ли го друг няма да погледна 🙂
Мерси за полезната статия.
Здравей,
благодаря за коментара.
Тук не засягам ползването на @font-face, защото казуса там е по-различен. Става дума за това, че шрифтовете, които Google предлага са без ограничения за ползването им т.е. създателите им са ги публикували със свободен лиценз.
Докато ползването на @font-face без да имаш нужния лиценз/разрешение може да доведе до проблеми. (не в България, но… ) .
Аз лично следя много за кирилизирани шрифтове и инструменти за ползването им. Ще се радвам, ако някой, който е попаднал на такива неща ги сподели тук, за да можем да допълваме тази статия.
Прав си за @font-face, но в България някак си все минаваме между капките, ще е голям гаф да се ползва без лиценз за нещо сериозно.
Колкото до шрифтовете, продължавам да търся и все така безуспешно. Започвам да си мисля, че света наистина се е объркал и красивите се крият под ключовата дума “Russian”, а не “cyrillic”, което си е голям гаф, но и няма как да ги образоваме 🙂
Гаф е да! Гаф на самата държава, но това е положението. Българина не обича да работи без пари, няма институции, които да подкрепят създаделите на шрифтове, няма институции и/или организации, които да се заемат с това да започнат да дигитализират български шрифтове (а има уникални шрифтове, ако си направиш труда да се разровиш в някоя библиотека, по-голяма разбира се) … и така. Добре, че са руснаците, че иначе още щяхме да сме на Verdana, Tahoma, Trebuchet MS 🙂 …
Много добра статия отново поздравления за което.
Не са само Руски шрифтовете има мног красиви Български шрифтове които са платени рядко има някой да е пуснал безплатен.
Да, така е. Има много добри български шрифтове последно време и да, не са безплатни, но и така се радвам 🙂
Това е много яко, че тъкмо вече ми писна да търся шрифтове, това вече ми изглежда нещо хубавао. Мерси.
Искам да добавя кирилизиран ръкописен шрифт към Блогър,следвах стъпките в статията,но не ми се получи.Бих искала да направя заглавията в блога с различен,ръкописен,по-разчупен :] шрифт.Тааа…как да го направя