20.08.2010

beautiful fonts with @font-face

Хоць Firefox 3,0 паляпшэнні аказання друкарскіх шляхам укаранення падтрымкі кернинг, лігатуры, і некалькі вагі нароўні з падтрымкай візуалізацыі складаных сцэнараў, аўтары па-ранейшаму абмежаваны выкарыстаннем агульнадаступных шрыфтоў у сваіх праектах. Firefox 3,5 здымае гэта абмежаванне шляхам уводзін падтрымкі CSS @font-face правіла, спосаб злучэння TrueType і OpenType шрыфтоў гэтак жа, як код і малюнкі злучаны сёння. Safari падтрымлівае гэты тып шрыфта сувязі, пачынальна з версіі 3,1, і опера абвясціла, што яны плануюць падтрымліваць яе ў Opera 10.

Выкарыстанне @font-face шрыфта сувязі адносна простая. У стыляў, кожны @font-face правіла вызначае прозвішчы, якія будуць выкарыстоўвацца, шрыфт рэсурсаў павінен быць загружаны і стылявыя характарыстыкі дадзенага твару, такія як няхай гэта будзе паўтлустым шрыфтам ці курсівам. Firefox 3,5 спампоўвае толькі шрыфты па меры неабходнасці, так стыляў можна пералічыць цэлы набор шрыфтоў, з якіх толькі нешматлікія абраныя будуць фактычна скарыстаны.

/* Graublau Sans Web (www.fonts.info) */

@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}

body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

Браўзары, якія падтрымліваюць @font-face зробіць тэкст з дапамогай Graublau без вэб а старыя браўзары будуць маляваць тэкст з выкарыстаннем або Lucida-Грандзе ці твар па змаўчанні без засечак. Прыклад тут:

Які капаецца яшчэ глыбей

Большасць шрыфтоў сям’і сёння складаюцца з чатырох твараў: звычайны, паўтлусты, курсіў і паўтлусты курсіў. Для вызначэння кожнага з гэтых граняў font-weight і font-style дэскрыптараў выкарыстоўваюцца. Яны вызначаюць стыль твар, няма канцэпцыі каскад ці ўспадкоўванні, што і тут. Без выразнага вызначэння кожнага з гэтых змаўчанню значэнне ‘normal’:

/* Gentium by SIL International   */
/* http://scripts.sil.org/gentium */

@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf);
  /* font-weight, font-style ==> default to normal */
}

@font-face {
  font-family: Gentium;
  src: url(GentiumItalic.ttf);
  font-style: italic;
}

body { font-family: Gentium, Times New Roman, serif; }

Узор тэксту ніжэй, калі яна падаецца з гэтым шрыфта:

Асаблівасць, якая лёгка недаацаніць тое, што @font-face дазваляе ствараць сем’і з больш за проста чарговай адважны і твары – да 9 вагі могуць быць вызначаны для адной сям’і. Гэта дакладна нават у Windows, дзе асноўныя абмежаванні платформы звычайна абмяжоўваюць сямействы шрыфтоў проста чарговы адважны і шаляў. Шрыфты такіх, як японскі з адкрытым зыходным кодам M + Шрыфты праекта мець гэтулькі, колькі сем шаляў. Выбар з іх выкарыстоўваюцца ў прыклад ніжэй:

У некаторых выпадках, аўтары аддаюць перавагу выкарыстоўваць шрыфты былі даступныя толькі на мясцовым узроўні і запампаваць шрыфты, калі гэтыя твары не маецца. Гэта магчыма з выкарыстаннем local() у вызначэнні SRC дэскрыптар @font-face правіла шрыфта. Браўзар перабору спісу шрыфтоў у src “дэскрыптар, пакуль ён паспяхова нагрузкі 1.

/* MgOpen Moderna                      */
/* http://www.zvr.gr/typo/mgopen/index */

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"),
       local("HelveticaNeue"),
       url(MgOpenModernaRegular.ttf);
}

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

body { font-family: MyHelvetica, sans-serif; }

На скрыншоце ніжэй паказана, зверху дадолу вынікі на Mac OS X, Windows і Linux для простага тэставы якая выкарыстоўвае шрыфт вызначаны вышэй:

Шрыфт Helvetica Neue сем’і даступна на большасці Mac OS X сістэмы, але ў цэлым ні па Windows ці Linux машыны. Калі напрыклад, тут апыняецца на Mac OS X, мясцовых Helvetica Neue твары выкарыстоўвалі шрыфт і не загружаецца. У аперацыйных сістэмах Windows і Linux спробе загрузіць мясцовыя шрыфт няўдала і замяніць шрыфт – MgOpen Moderna – гэта загрузіць і выкарыстоўваць замест. MgOpen Moderna заклікана замяніць Helvetica, таму яна робіць аналагічна Helvetica Neue. Такім чынам, аўтар можа гарантаваць з’яўленне тэксту, але пазбегнуць Запампаваць шрыфт, калі яна патрэбна.

Імя выкарыстоўваецца для пазначэння пэўных твар шрыфт поўнае імя для асобных шрыфта. Наогул гэта прозвішча плюс імя стылю (напрыклад, “Helvetica Bold”). Пад Mac OS X, імя занесена на інфармацыйнай панэлі для дадзенага твару. Абярыце адзін твар і абярыце “Паказваць Шрыфт Інфармацыя” ў меню “Прагляд у FontBook:

Падобныя прылады існуюць пад Linux. У Windows, выкарыстоўваючы шрыфт пашырэння ўласцівасцяў, бясплатна запампаваць з Microsoft, каб прагледзець гэтыя імёны. З пашырэннем усталявана, уласцівасці панэлі адлюстроўваецца інфармацыя пра асобныя шрыфта. Поўнае імя згадваецца як “Font Name” на ўкладцы Імя:

Safari падтрымлівае толькі PostScript пошуку імёнаў у Mac OS X, так што пад Mac OS X імёны Postscript таксама падтрымліваюцца. Для OpenType PS шрыфты (часта пазначаны. ЧКХ пашырэнні) поўнае імя супадае з імем PostScript пад Windows. Такім чынам, для гэтых шрыфтоў, аўтарам рэкамендуецца ўключаць імя, прозвішча і імя PostScript для крос-платформавай сумяшчальнасці.

Падтрымка шматлікіх Мовы

Шматлікія Мовы пакутуюць ад недахопу агульнадаступных шрыфтоў. Для меншасцяў Мовы і старажытных сцэнары, варыянты, часта скарачаецца да ўсяго толькі жменька. Выкарыстанне @font-face дазваляе аўтарам выкарыстоўваць гэтыя Мовы для паляпшэння гэтага, у тым ліку шрыфты з іх старонкі.

@font-face {
  font-family: Scheherazade;
  src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"),
       url(fonts/ScheherazadeRegOT.ttf) format("opentype");
}

body { font-family: Scheherazade, serif; }

Мовы, такіх як арабскі тэкст патрабуе фармавання, дзе адлюстраванні дадзенага знака залежыць ад знакаў, якія атачаюць яго. Розныя платформы падтрымліваюць розныя тэхналогіі рэндэрынгу, з тым каб тэкст фармавання, пад Mac OS X, AAT шрыфты неабходна, знаходзячыся пад Windows і Linux OpenType шрыфтоў не патрабуецца. Без шрыфта ў фармаце, патрабаваным для дадзенай платформы, тэкст фармавання не будзе адлюстроўвацца карэктна.

Пад Mac OS X, AAT версія шрыфта загрузкі. У Windows і Linux, дзе рэндэрынгу з AAT шрыфты не падтрымліваецца загрузка шрыфтоў AAT прапускаецца і OpenType шрыфт, замест яе выкарыстоўваецца. Такім чынам, тэкст адлюстроўваецца няправільна на ўсіх платформах.

Cross-Site Выкарыстанне шрыфтоў

Па змаўчанні, Firefox 3.5 дазваляе толькі шрыфты для загрузкі старонкі, служыў на гэтым жа сайце. Гэта прадухіляе сайты вольна выкарыстоўваючы шрыфты знайсці на іншых сайтах. Для сайтаў, якія відавочна жадаюць, каб крос-сайт шрыфта абмен, электронная бібліятэка шрыфта, напрыклад, Firefox 3.5 падтрымлівае выкарыстанне кіраванні загалоўкі доступ для кіравання гэтымі паводзінамі. Пры даданні дадатковых загаловак HTTP загалоўкі адпраўлены з файламі шрыфтоў, сайты могуць дазволіць межсайтовый выкарыстанні.

# example Apache .htaccess file to add access control header

<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

З дапамогай гэтага загалоўка HTTP уключаны, любы можа атрымаць доступ да старонкі шрыфтоў на гэтым сайце, а не толькі старонкі з таго ж сайта.

Пытанні ліцэнзавання Шрыфт

Пры выкарыстанні шрыфтоў для вэб-сайта, важна заўсёды пацвярджаць, што шрыфт ліцэнзійнае выкарыстанні на вэб-сайце. Калі ліцэнзійная дамова напоўнены непразрыстай юрыдычнай мовай, залішнюю асцярожнасць і праверыць пастаўшчыка шрыфтоў перад выкарыстаннем шрыфта на сайце. Калі ліцэнзія дазваляе выкарыстоўваць яго, гэта добрая ідэя, каб дадаць каментар у @font-face правіл, які паказвае на ліцэнзіі для далейшага выкарыстання.

“Я знайшоў бясплатны шрыфт, я магу выкарыстоўваць яго на сваім сайце?”

Можа быць, можа і няма. Некаторыя бясплатныя шрыфты распаўсюджваюцца ў выглядзе тизера прадукцыі заахвочвання куплі і не дапушчаюць пераразмеркаванне ці месцаванні на вэб-серверы. Праверце ліцэнзію, нават для вольных шрыфтоў.

“Я жадаю выкарыстоўваць [уставіць каханае імя шрыфта тут] на маім сайце. Хіба гэта магчыма?”

Цяпер, верагодна, не. Выкарыстанне шрыфта сувязь на вэб-ранейшаму знаходзіцца ў зачаткавым стане. Большасць шрыфтоў, якія пастаўляюцца з сённяшняга дня ўласнай АС, маюць ліцэнзіі, якія абмяжоўваюць іх выкарыстанне стандартных настольных прыкладанняў, так што гэтыя шрыфты загрузкі на вэб-сервер, амаль напэўна не дапушчаецца. Пірацтва з’яўляецца сапраўдным бізуном для шрыфта прамысловасці ў мінулым, таму большасць вытворцаў шрыфтоў з асцярожнасцю ставяцца да якая дазваляе свае шрыфты, якія будуць выкарыстоўвацца толькі ў адносна абмежаваных умовах. Шматлікія вытворцы шрыфтоў, арыентаванай на запатрабаванні выдавецкай і паліграфічнай прамысловасці, а таксама адноснай складанасці іх ліцэнзійных дамоў часта адлюстроўвае гэта. У будучыні, некаторыя дызайнеры шрыфтоў можна зрабіць выснову, што продаж шрыфты як вэб-шрыфты будуць перавешваць любыя патэнцыйныя страты продажаў з-за пірацтва, а іншыя не могуць. Іх ліцэнзійныя дамовы будзе адлюстроўваць гэты выбар, і павінны быць выкананы.

Фондавы рынак фатаграфіі часта завуць $2 млрд рынку, але і на рынку вэб-шрыфт яшчэ блізкі да $0 рынку, яна можа толькі гадуй!

Шрыфт Сувязь у Internet Explorer

Шрыфт сувязі стала магчымым з Internet Explorer, але толькі для спасылкі на шрыфты ва ўласнасці СРВ фармат шрыфта. Адзіны спосаб стварыць СРВ шрыфтоў складаецца ў выкарыстанні прылада WEFT Microsoft, даступная толькі ў Windows. Толькі TrueType і OpenType TT шрыфты могуць быць ператвораны ў СРВ фармаце OpenType PS (.otf) шрыфты не могуць быць скарыстаны.

Internet Explorer распазнае толькі сямейства шрыфтоў і src дэскрыптараў у @font-face правіл, так што кожная сям’я можа складацца толькі з аднаго твару. Ён не разумее фармат () рады і будзе ігнараваць любыя @font-face правіла, якія змяшчаюць гэтыя намёкі. Такія паводзіны могуць быць скарыстаны шрыфт сувязі дазваляюць крос-платформавы:

/* Font definition for Internet Explorer */
/*         (*must* be first)             */
@font-face {
  font-family: Gentium;
  src: url(Gentium.eot) /* can't use format() */;
}

/* Font definition for other browsers */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf) format("opentype");
}

Далейшая праца

Для Firefox 3.5, шрыфт-стрейч і Unicode-дыяпазоне дэскрыптары не падтрымліваюцца. Шрыфты вызначаны ў дакументах SVG таксама пакуль не падтрымліваецца. Яны знаходзяцца на разглядзе для ўключэння ў будучыя рэлізы. Як заўсёды, патчы вітаюцца!

Дадатковыя крыніцы

Дакументацыя

Прыклады

Шрыфты – рэсурсы

Шрыфт Палітыка

Comments are closed.