Показване на всякакъв шрифт | 2-ри начин - @font-face
28-07-2011


За да може в уеб сайта си да използвате шрифт по ваше желание, трябва да използваме CSS или по-точно да използваме @font-face технологията.

За целта ни трябва някакъв шрифт (изтегляме го от сайт или го взимаме от компютъра). Примерни сайтове за шрифтове:
www.dafont.com
www.fontsquirrel.com.com
www.myfonts.com


В Windows XP, шрифтовете се намират в Start -> Control Panel -> Fonts. Оттам го копираме и поставяме в някоя папка или да речем на десктопа. Трябва да е в *.ttf (True Typeface) или *.otf (Open Typeface) формат.


За да конвертираме вече избрания шрифт, ще използваме конвертора на Font Squrrel.

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

Под бутона и името на шрифта има няколко опции. Оставяме селектираната опция по подразбиране - OPTIMAL. На Agreement поставяме отметка и след това кликаме върху .

Ще се свалят примерни файлове, с HTML/CSS демо, което ще разберете. Но ако не искате да го гледате трябва да добавите ето това към вашият CSS код:

@font-face{
font-family: 'име на шрифта, което ще викате някъде из кода';
src: url('шрифта.eot');
src: url('шрифта.eot?#iefix') format('embedded-opentype'),
url('шрифта.woff') format('woff'),
url('шрифта.ttf') format('truetype'),
url('шрифта.svg#име на шрифта, което ще викате някъде из кода') format('svg');
font-weight: normal;
font-style: normal;
}
. Ако искате да зададете този шрифт на някой <div>, трябва просто да му добавите това:

font-family: 'име на шрифта, което ще викате някъде из кода';




<html>
<head>
<title>@font-face шрифт</title>
<style type="text/css">
<!--
@font-face{
font-family: 'име на шрифта, което ще викате някъде из кода';
src: url('шрифта.eot');
src: url('шрифта.eot?#iefix') format('embedded-opentype'),
url('шрифта.woff') format('woff'),
url('шрифта.ttf') format('truetype'),
url('шрифта.svg#име на шрифта, което ще викате някъде из кода') format('svg');
font-weight: normal;
font-style: normal;
}
.font{
font-family:'име на шрифта, което ще викате някъде из кода'
}
-->
</style>
</head>

<body>
<div class="font">Тест с желаният от нас шрифт.</div>
</body>
</html>


*Уверете се че сте поставили правилният път до шрифта.

1-ви вариант - Cufon YUI
Този вариант (@font-face) е по-добър.

Урокът е авторски. Копирането на урока е забранено! (cc)
Източник: www.vladchooo.com








/ Трябва да сте регистриран за да напишете коментар /
От: mapka7a
0:03 07-09-2011
Добър урок.Браво! :)))
От: StormBreaker
15:48 07-09-2011
Браво, надявам се да добие поне малко популярност пред Cufon, който нямам идея защо се използва все още.
От: Kido
0:16 08-09-2011
Браво. Супер уроче
От: madmax3_
14:42 09-09-2011
Искам да добавя следното : Както винаги ИЕ има собствено мнение и по този въпрос. За да работи нормално, тряба да се направи следното:

@font-face {
font-family: new_font_name;
src: url("font_name.eot") /* EOT file for IE */
}
@font-face {
font-family: new_font_name;
src: url("font_name.ttf") /* TTF file for CSS3 browsers */
}

Ето тук http://www.kirsle.net/wizards/ttf2eot.cgi можете от TTF формат да го преобразувате в ЕОТ формат.
От: Vladkata
15:02 09-09-2011
Разгледай отново първият код и ще видиш че го има =)...
От: shterev
0:11 13-09-2011
Само да вметан,че google имат готови , ест не работят на старите ИЕ-та
http://www.google.com/webfonts#ChoosePlace:select
От: Vladkata
12:13 13-09-2011
Да имат доста шрифтове, даже и cmmercial, но не може да си ги дърпаш, а ги използваш оттам.
От: Genius_m
18:29 30-09-2011
Точно това търсех!!! Мерси много.. Страхотен урок! :)
От: Styl3rbg
19:07 12-10-2011
http://fontface.codeandmore.com/ В сайта който си дал не става, пробвайте в този :)
От: Vladkata
18:50 14-10-2011
Напротив, става.
От: Styl3rbg
19:02 10-12-2011
В http://fontface.codeandmore.com/ може да правите шрифтовете и след това да се показва и кирилица, а при другия не става!
От: Vladkata
22:36 20-12-2011
Как не става, като винаги този конвертор използвам?! Егати ината значи...
От: tini4ka
16:05 29-02-2012
аз ползвах sladkoeshka, и не ми се получава , промених и на .eot и пак всичко е на маймуница...
От: tini4ka
18:22 29-02-2012
аз ползвах sladkoeshka, и не ми се получава , промених и на .eot и пак всичко е на маймуница...
От: Vladkata
19:02 29-02-2012
@tini4ka: Оправи си енкодинга, може да е от него. Потърси в уроците тук или питай във форума.
От: tini4ka
19:38 29-02-2012
а ми не е е от това проблема, качих го в хит.бг за проба, възможно ли е да е от това?
1