Designcontest.com: Cufón супраць typeface.js, што з іх лепш?

Original on http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/

Cufón і typeface.js - метады для паказу тэксту у карыстацкіх шрыфтах (напрыклад, sIFR), гэтыя тэхналогіі з'явіліся толькі пару месяцаў таму, і абодва выкарыстоўваюць каркас ці VML. У чым жа розніца? І што з іх лепш?

Як гэта працуе?

Cufón і typeface.js працуюць шляхам пераўтварэння звычайнага файла шрыфта ва ўнутраны фармат. Яны адлюстроўваюць шрыфт, выкарыстоўваючы Canvas у сучасных браўзарах і VML у Internet Explorer. Перавагі у тым, што вам больш не трэба загружаць Flash убудову. Гэта робіць яго хутчэй у параўнанні з sIFR і бачным на некалькіх кампутарах.

Хуткая статыстыка

Cufón і шрыфт вельмі падобныя, вось кароткі спіс іх уласцівасцяў:

	Cufón	Typeface.js
Памер файла	14.0kb (сціснуты)	16.3kb (без сціску)
Падтрымоўваемыя браўзары	Firefox 1.5 +, Safari 3 +, Opera 9.5 +, Google Chrome і Internet Explorer 6 +	Firefox 1.5 +, Safari 2 + і Internet Explorer 6 +, але не 8
Падтрымоўваемыя тыпы файлаў	.ttf,.otf, PFB, postscript	.ttf
Падтрымоўваемыя стыль шрыфта	памер шрыфта, стыль шрыфта, напісанне шрыфта, вышыня радка, тэкст-цяні, колеры	font-size, font-style, font-weight, font-stretch, letter-spacing, line-height
Выбар тэксту?	яшчэ не	яшчэ не
	Cufón	Typeface.js

Шрыфт пераўтварэння

Typeface.js і Cufón - обое анлайн-канвертары шрыфта:

Вы загрузіць шрыфт, абраць Знак групы (якія ўяўляюць сабою наборы, як загалоўныя, малыя літары, лічбы, знакі прыпынку і г.д.) вы жадаеце ўключыць і ён вяртаецца. JS файл, які змяшчае вашы шрыфта. Typeface.js падтрымлівае толькі TrueType (.ttf) шрыфтоў. Cufón таксама падтрымлівае OpenType (.otf), друкарка шрыфтоў Падвойныя і PostScript. Канвертар для typeface.js мае ўбудаваны праверкі шрыфта ліцэнзіі, і адмовіцца канверсаваць любы шрыфт, які не дазваляе ўкладанне.

На загрузкі, typeface.js Наперад на старонку, дзе вы можаце абраць знакі і загрузіць файл. Cufón дазваляе абраць знакі на першай старонцы, а таксама даць вам магчымасць уключаць адважных і курсівам варыянт у тым жа файле. Акрамя таго, яна дазваляе абмежаваць выкарыстанне вызначаных абласцях, а таксама ўсталяваць якасць шрыфта (нізкая якасць хутчэй прадукцыйнасці).

Я выкарыстоўваў абодва, каб пераўтварыць дискатора OPTIMER з вялікімі літарамі, у ніжнім рэгістры, лічбы, знакі прыпынку і пашыраныя лацінскія. у файл Cufón завецца Optimer_400.font.js і 27.3kb у той час як "файл typeface.js завецца optimer_regular.typeface.js і 68.7kb.

Cufón ці typeface.js на вашым сайце

Cufón і typeface.js як праца са спасылкамі на іх файл JavaScript і файл шрыфта ў вашым <head> :
Cufón

<head>
  …
  <script src="cufon-yui.js" type="text/javascript"></script>
  <script src="Optimer_400.font.js" type="text/javascript"></script>
  …
</head>

Typeface.js

<head>
  …
  <script src="typeface-0.11.js" type="text/javascript"></script>
  <script src="optimer_regular.typeface.js" type="text/javascript"></script>
  …
</head>

Для выбару элементаў для пераўтварэння, вы павінны дадаць наступныя <head> для Cufón:

<script type="text/javascript">
  Cufon.replace('h1');
  //If you also include a library, you can add complex selectors like #content h1
</script>

Typeface.js робіць рэчы трохі па-іншаму, і, на мой погляд, прасцей. Typeface.js аўтаматычна змяняе ўсе элементы загалоўка, якія высылаюцца на typeface.js шрыфтоў (што першая частка імя файла шрыфта, у нашым выпадку дискатора OPTIMER, і любы элемент, які мае клас typeface-js :

<div class="myclass typeface-js">
…
h1,  h2 {
  font-family:optimer;
}

Некалькі шрыфтоў

Абодва typeface.js і Cufón дазваляе загружаць у некалькі шрыфтоў. Typeface.js знаходзіць іх аўтаматычна пры ўказанні іх у вашым CSS, і Cufón дазваляе выкарыстоўваць некалькі шрыфтоў, паказаўшы сямейства шрыфтоў у яго пачатковай функцыі:

Cufón.replace('h2', { fontFamily: 'Qlassik Medium' });

Internet Explorer 7

Ніводная з бакоў не будзе поўным без хтосьці спрабуе яго разбурыць для ўсіх, праблема, дык вось у Internet Explorer: для Cufón і typeface.js, сцэнар можа мець пару мілісекунд затрымкі, у выніку чаго тэкст "мігацення". Каб спыніць яго ад гэтага, месца наступныя правільны код перад які зачыняе </body> целы тэга:

Cufón:

<script type="text/javascript"> Cufon.now(); </script>

Typeface.js

<script type="text/javascript"> _typeface_js.renderDocument(); </script>

Побач

Вядома, усё гэта весяла, але было б прыемна ўбачыць іх у дзеянні, акрамя адзін аднаго. Не турбуйцеся, я зрабіў дэма-старонку параўнання.

На рэндэрынгу, вы можаце бачыць лік інтэрвал адрознення. Ёсць асабліва прыкметна пры поглядзе на адлегласць у друкарскай шкале, дзе Cufón выконвае значна лепш, чым typeface.js

Заключэнне

Які з іх лепш? Cufón ці typeface.js? З пункту гледжання функцыянальнасці, розніца невялікая. Cufón падтрымлівае больш тыпаў файлаў, падтрымлівае больш typeface.js CSS уласцівасцямі. І тым не менш, падтрымка рэчы вы, хутчэй за ўсё, неабходнасць. Typeface.js прасцей у выкарыстанні (проста выкарыстоўваць права сямейства шрыфтоў, і, калі гэта не загаловак, дадаць клас), Cufón каля 40kb менш усяго і ручкі інтэрвал лепш "са скрынкі".

Пакуль Cufón працуе трохі лепш з-за апрацоўкі інтэрвал лепш, але я не думаю, што ёсць відавочнае пераможца. Гэта проста азначае, што гонка: Першая дадаць выбар перамогі тэкст!

Наступны тыдзень

Прыходзіце на наступным тыдні для артыкула пра тое, як спалучаць гэтыя метады з @font-face!