web-touristПоказване на всякакъв шрифт | 2-ри начин – @font-face
Автор: Vladkata
Показване на всякакъв шрифт | 1-ви начин – Cufon YUI
За да може в уеб сайта си да използвате шрифт по ваше желание, трябва да използваме 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-display:swap;
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-family: 'име на шрифта, което ще викате някъде из кода';
<html>
<head>
<title>@font-face шрифт</title>
<style type="text/css">
<!--
@font-face{ font-display:swap;
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>*Уверете се че сте поставили правилният път до шрифта.
Урокът е авторски. Копирането на урока е забранено! (cc)
Източник: www.vladchooo.com
