Шрифтовете да не се влият от ОС

webdeveloper

Registered
Здравейте, има ли някакъв начин например да кача шрифтовете в сайта си и да ги използвам тях в дизайна за да няма различия когато операционната система е различна.

Например в момента като разглеждам сайта с win 7 всичко е както искам да бъде, но като го гледам с XP шрифта на текста меко казано не ми харесва и бих искал да фиксирам това.
 
webdeveloper каза:
Здравейте, има ли някакъв начин например да кача шрифтовете в сайта си и да ги използвам тях в дизайна за да няма различия когато операционната система е различна.

Например в момента като разглеждам сайта с win 7 всичко е както искам да бъде, но като го гледам с XP шрифта на текста меко казано не ми харесва и бих искал да фиксирам това.
Може!
HTML:
<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-website
:?:
 
Бях пуснал урок точно за това нещо, но все още не е одобрен.
------------------------------------------------------------------------
Здравейте! За да може в уеб сайт си да използвате шрифт по ваше желание, трябва да използваме JavaScript или по-точно да регистрираме желания шрифт в Cufon YUI.

Как протича регистрацията:
Изваждаме въпросният шрифт от системата (OS). В Windows XP, шрифтовете се намират в Start -> Control Panel -> Fonts. Оттам го копираме и поставяме в някоя папка или да речем на десктопа.

*Използвайте по-семпли шрифтове (с не много украски), иначе няма да се визуализира шрифта!

Влизаме в сайта на Cufon YUI. Посочваме (избираме) шрифта от първия бутон (Regular Typeface).

От другите бутони нищо не посочваме (те са за удебелен, наклонен или удебелен и наклонен стил на шрифта). Слагаме тикчето на 'The EULAs of these fonts allow Web Embedding (without Adobe Flash)'.

След това поставяме тикче на 'All'. Другите ги оставяме, все пак препоръчително е да се избере всички глифове да се включат.

Отиваме най-отдолу на сайта и слагаме тикче на 'I acknowledge and accept these terms'.

Натискаме големият син бутон 'Let's do this!'. След като го натиснем, трябва автоматично да се изтегли регистрираният шрифт във файл с разширение *.js.

________________________________________________________________________________
Това беше регистрирането на шрифта. Сега трябва да го включим в сайта.


В <head> тага на сайта си поставяме следният код:
Код:
<script type="text/javascript" src="cufon.js"></script> 
<script type="text/javascript" src="съответното име на шрифта.js"></script>
. Като това е ]скрипта cufon.js (копираме цялото съдържание и правим нов текстов документ, поставяме го и променяме разширението на *.js, като горе посочваме правилният път до него), а името на шрифта го оставяме същото, което ни е оставено от сайта, от който го изтеглихме по-рано.

В <head> тага на сайта си добавяме и следният код:[/b]
Код:
<script type="text/javascript">
  Cufon.replace('h1')('h2')('h3')('h4')('h5');
</script>
. Това указва, кой текст да се изобразява с регистрирания шрифт. Както можете да видите, този код заменя h1, h2],h3, h4 и h5 с шрифта, който желаем. Всеки текст между тези тагове, ще се изобразява с желания шрифт.[/b]

Кодът ни придобива следният вид:
Код:
<html>
<head>
<title>JavaScript шрифт</title>
<script type="text/javascript" src="cufon.js"></script> 
<script type="text/javascript" src="съответното име на шрифта.js"></script> 
<script type="text/javascript">
  Cufon.replace('h1')('h2')('h3')('h4')('h5'); 
</script>
</head>

<body>
<h1>Текст със специфичен шрифт</h1>
<h2>Текст със специфичен шрифт</h2>
<h3>Текст със специфичен шрифт</h3>
<h4>Текст със специфичен шрифт</h4>
<h5>Текст със специфичен шрифт</h5>
</body>
</html>

Демо е горният код, просто го копирайте и тествайте (не забравяйте шрифта и скрипта)!
*Използвайте по-семпли шрифтове (с не много украски), иначе няма да се визуализира шрифта!

Урокът е авторски.
Източник: www.vladchooo.com
 
Cufon технологията е вече стара тъй като вече както казаха по-горе всички браузъри в момента поdдържат @font-face като ти трябват два варианта на шрифта един за ie (*.eot) и един за всички други (*.ttf/*.otf). За конвертиране на шрифтове аз ползвам този сайт кой смятам ,че е най добрия http://www.fontsquirrel.com/fontface/generator.
 
hpstuff каза:
Cufon технологията е вече стара тъй като вече както казаха по-горе всички браузъри в момента поdдържат @font-face като ти трябват два варианта на шрифта един за ie (*.eot) и един за всички други (*.ttf/*.otf). За конвертиране на шрифтове аз ползвам този сайт кой смятам ,че е най добрия http://www.fontsquirrel.com/fontface/generator.

Стара, ама изпипана. И Winodws XP е стар... Така е и двете стават, ама винаги нещо трябва да се направи специално за Internet Explorer... Само виж колко проблема има тук за последната седмица (раздел Софтуер Хардуер) с "великия" Windows 7...
 
Технологията cufon освен че е стара е и тежка (тъй като използва canvas и svg за рисуване на шрифтовете, а @font-face-а е вградена в браузъра функционалност) и както си описал

*Използвайте по-семпли шрифтове (с не много украски), иначе няма да се визуализира шрифта!

това с @font-face не съм го виждал, а аргумента ти че трябва да се прави нещо специално за ie както каза ти винаги е така (поне често) ,а това че ще направиш два шрифта не един и че ще добавиш един ред повече не мисля че е проблем и най-важното шрифта ще си е шрифт не canvas или svg и е много по лесен за манипулация от cufon-a.

OFF
Не знам дали ти се е налагало да правиш нещо от рода на индекси с cufon или hover ефект ама не е забавно бъгаво и прочие.

ПП
Аз никога не съм имал проблеми с @font-face ,а съм го използвал с най-различни шрифтове.
 
Прав си, @font-face е перфектно, а относно това че трябва да се прави специално за Internet Explorer, исках да намекна, че браузъра не става за нищо (99% от хората тук го знаят)...
 
Само да спомена, че IE е първият браузър, който поддържа font-face с външни шрифтове. Още от IE6. :D
 
разбира се това никой не го успорва ама за разлика то това как ги рендва :D
 
Така, до колкото виждам font-face е решението. Обаче имам малък проблем. Взех от windows/fonts папката на win 7 шрифта Verdana понеже такъв използвам за сайта и го сложих в папка fonts на уеб сървъра. След това с font-face в css файла:

[css]@font-face {
font-family: "verdana_win7";
src: url("fonts/verdana_win7.ttf");
}[/css]

После в body-то замених Verdana с verdana_win7 с надеждата шрифта да си е същия, но ако сайта се разглежда под win XP да речем, шрифта да е като на 7цата.


Проблема е, че шрифта излезе малко по сбит от колкото като използвам Verdana в body-то. На какво може да се дължи това?


Edit: Тоя фонт фейс май не работи под Chrome?
 
До колкото разбирам ти искаш и на xp и на windows 7 да виждаш шрифта по един и същ начин. НЯМА ДА СТАНЕ. http://www.microsoft.com/typography/smoothfonts.mspx При windows 7 има antialiasing ('Clear Type') включен по подразбиране ,а на XP НЕ Е така че няма как да изглежда по един и същ начин. Единствено ако си го пуснеш сам или отваряш сайта с IE ще виждаш smooth-нат шрифта.
 

Back
Горе