Екран 15 - Система на динамични и интегрирани шрифтове.
Интегрирането на шрифтове в HTML страница е изключително удобство за всички създатели на Web страници. В практиката често се налагаше текстови фрагменти да се представят в графичен вид в стремежа на автора да създаде желана от него визия. Системата на динамични или внедрени шрифтове (Embedded fonts) предполага HTML страницата да бъде изобразена при клиента с определените от автора шрифтове, независимо от навигатора, защото шрифта се предоставя заедно с прехвърлянето на съдържанието на страницата при клиента.
Основни шрифтови формати.
|
|
|
|
| Embedded OpenType | TrueType, OpenType | От Internet Explorer 4.х |
| TrueDoc | TrueType, PostScript Type 1 | От Netscape Navigator 4.03, Internet Explorer 4.x (само за Windows) |
От таблицата е видно, че TrueType шрифтовете се явяват общи за внедрените шрифтови формати и Web браузърите.
CSS1 и динамичните шрифтове
Системата на динамични шрифтове е дефинирана като разширение на шрифтовите
описатели в CSS1. Това включва едно множество
от шрифтови дескриптори, чрез които използваният шрифт се описва с неговите
индивидуални характеристики и адрес от който може да бъде изтеглен. Работната
спецификацияна W3C, описваща динамичните шрифтове се намира
на адрес:
| http://www.w3.org/TR/WD-font |
Шрифтът се описва в секцията за стилова спецификация чрез своите дескриптори,
които се унаследяват при използване на съответните форматни спецификации
за изобразяване на текстови елементи. Общият формат за описание на шрифтова
спецификация е следният:
| @font-face { <font description> } |
където <font description> съдържа списък от дескриптори:
| descriptor: value;
descriptor: value; [...] descriptor: value; |
Системата на динамични шрифтове се представя при Internet Explorer като интегрирани шрифтове - OpenType, докато при Netscape Navigator като динамични шрифтове - TrueDoc. Двете технологии се различават и съвместяването им е затруднено. Това в някаква степен компрометира една много практична идея.
Интегрирането на шрифт към HTML страница се осъществява посредством
команда @font-face в секцията за стилов формат:
| <STYLE TYPE="text/css">
<!-- @font-face { font-family: font-family-name; font-style: font-style-name; font-variant: font-variant-name; font-weight: value; font-size: value src: local(font-name); url(URL); format: (Font Type); } //--> </STYLE> |
Стиловата дефиниция за интегриране на шрифта се указва с сeкцията <HEAD> ... </HEAD> на HTML документа.
| <STYLE TYPE="text/css">
<!-- @font-face { font-family: "CableCyr"; src: url(fonts/cablecyr); format: (opentype); } //--> </STYLE> |
В този пример се прехвърля шрифт с име CableCyr от директория fonts и шрифта е от тип OpenType (Microsoft).
Връзката със стиловата дефиниция се извършва посредством HTML командата <FONT FACE="Font-Name"> ... </FONT> при извеждане на конкретен текст в полето на документа.
Следващият пример илюстрира визуализацията на текст в полето на документа
с избран от автора шрифт. Атрибутът local в параметъра src:
осигурява използването на локалното копие на шрифта, ако той е налице при
клиента, в противен случай се зарежда от указания URL адрес:
| <html>
<head> <title>OpenType & TrueDoc</title> <style TYPE="text/css"> <!-- @font-face { font-family: "cabelcyr"; src: local (cablecyr); url(fonts/cabelcyr); format: (opentype); } //--> </style> </head> <body> <font face="CabelCyr">Текстът в полето на документа е изведен по системата на динамичните шрифтове, със шрифт определен от автора. Отсъствието на шрифта при клиента не е пречка за изобразяване на текста в избрания стил. Дефиницията в стиловата секция предизвиква автоматичното зареждане на шрифта в машината на клиента.</font> </body> </html> |
Визуализация на кода след интерпретация: (Екран 15)
Проектантите и авторите на Web страници трябва да прибягват към тази техника само в онези случаи, в които това действително се налага. Големината на изпозваният шрифт влияе на времето на зареждане на HTML страницата при клиента. Действително, "ефектните" шрифтове обикновено са с по-голям обем от "стандартните".
Средства за създаване на Web Embedding Fonts.
За преобразуване на шрифтове в Embedded OpenType format фирмата Microsoft предоставя програмно средство свободно за използване (freeware)WEFT(Web Embedding Fonts Tool). Продуктът е лесен за инсталиране и ползване. С негова помощ се създава своеобразна база данни на наличните в системата инсталирани шрифтове с индикация за всяка фамилия дали е подходяща за преобразуване в Embedded OpenType. Резултатът от работата на продукта е файл с разширение .eot и автоматично обновяване на HTML страницата, използваща този шрифт, с необходимите скриптови елементи. За всеки изпозван шрифт в страницата се създава отделен файл, който трябва да бъде прехвърлен от сървъра към клиента заедно със съдържанието й. Тук липсва ефекта на прогресивно изобразяване, което се отразява на времето за зареждане на страницата. Фактът, че не се използва оригиналния шрифт с неговите пълни достойнства, а негово преобразувано отражение влошава в известна степен качеството на изобразявания текст. По този начин, от друга страна, се защитава шрифта, т.е. потребителят не може в последствие да го използва за свои цели. Нещо повече, продуктът позволява записване в .eot файла само на използваните в страницата символи.
Средства за създаване на TrueDoc Fonts.
За създаване на динамични TrueDoc шрифтове, съвместими с навигаторите на Netscape, на пазара на програмни продукти се предлагат две помощни средства.
Двата продукта работят по подобен начин при създаване на TrueDoc format. За всеки символ от шрифта се създава образ, който се записва във файл с разширение .pfr (portable font resource) и се свързва със съответния HTML документ. При потребителя браузърът, със съответен декодер на символните образи, превръща всеки образ в елемент от динамичен шрифт за изобразяване на текста. За разлика от технологията Embedded OpenType, където по мрежата се прехвърля преобразуван шрифт, за TrueDoc се предава информация за образа на символа.
 |
 |
 |