Показване на всякакъв шрифт | 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-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-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

One Reply to “Показване на всякакъв шрифт | 2-ри начин – @font-face”

Вашият коментар