Вграждане на шрифтове в уеб страници

Safari 3.1 и Firefox 3.5 поддържат вграждане на шрифтове в уеб страници само с помощта на CSS. Звучи като нова ера в уеб типографията. Рай на земята. Реших да си сменя шрифта на блога и стана ясно, че не всичко е толкова розово.

Първият проблем е лицензирането. Повечето комерсиални шрифтове забраняват разпространението под каквато и да е форма. Така на разположение остават само безплатните шрифтове и тези, чиито лицензи специално позволяват вграждане. Излишно е да казвам, че и в двете категории хубавите шрифтове са малко. Със сигурност в следващите години ситуацията с лицензирането на шрифтове ще се промени, но няма да е днес. Или утре.

Вторият проблем е кирилицата. Дори да си намерите удобен за вграждане шрифт, шансът да поддържа кирилица е минимален. Шансът хубавият ви кирилски шрифт да разрешава вграждане също е минимален.

С малко зор, намерих два подходящи шрифта:

Пример за GentiumGentium

Свободен шрифт, чиято цел е да помогне добрата типография да достигне до повече езици. Красив, серифен, поддържа кирилица. Хубаво. Освен кирилица, обаче, Gentium поддържа и още вагон езици. Резултатът е 356 КБ файл.

След много орязване (и работа с програмата с най-ужасен интерфейс) на другите кодировки и на ударени букви и лигатури, стигнах до Gentium Latin-Cyrillic. Само 120 КБ. Свободни шрифтове FTW! Производният шрифт нямаше да е законен, ако Gentium не беше пуснат под Open Font License.

Сваляне на Gentium Latin-Cyrillic

Пример за Graublau Sans Web BoldGraublau Sans Web
Безплатен, sans-serif, поддържа кирилица. 40 КБ. Специално правен за вграждане в уеб като по-малкия брат на Graublau Sans Pro. В бъдеще все по-често ще виждаме web версии на pro шрифтове.

Това бяха двата шрифта от мен. Ако знаете за още, моля споделете ги.

Вграждането на практика

Като експеримент, реших да използвам Graublau Sans Web за текста в блога, а Graublau Sans Web Bold за заглавията.

CSS правилата са прости:

@font-face {
    font-family: GraublauWeb;
    font-style: normal;
    font-weight: normal; 
    src: url(fonts/GraublauWeb.otf);
} 
@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    font-style: normal;
    src: url(fonts/GraublauWebBold.otf);
}

Пътят към шрифтовете трябва да е или абсолютен, или относителен спрямо CSS файла. Ако пътят е абсолютен, файлът трябва да се намира на същия домейн като страницата.

Интересно е, че в Safari текстът не се показва, докато шрифтът не се изтегли. Във Firefox пък, докато файлът се тегли, текстът се вижда с някой вграден шрифт и после се сменят, което дразни.

Накрая

Сега му е времето да си поиграете с типографията в уеб. Още ѝ е рано за сериозна употреба, но поне бъдещето ѝ е светло.

12 коментара по “Вграждане на шрифтове в уеб страници”:

  1. Марио Пешев

    Много добра новина! Дори да се стандартизира след година в повечето браузъри, пак би имало положителен ефект. Уеб програмирането ще живне още малко.

  2. Иван

    М, супер. Полезно!

  3. Отговор с публикация:  ApoApostolov: Интересно: Вграждане на шрифтове в уеб .. - edno23.com

  4. КойСъмАз?

    Вграждане на шрифтове в уеб страници
    http://www.microsoft.com/typography/web/embedding/

    1997 година, Internet Explorer 4

    FREE Web Embedding Fonts Tool
    http://www.microsoft.com/typography/WEFT.mspx

  5. Кирил

    Ники,

    не знам до колко Graublau е „правен за вграждане,“ но при мен, на Windows с включен Cleartype, страницата изглежда ужасяващо. Изглежда или Firefox има проблем с рендването, или шрифтът е неподходящ за екран при малка големина.

  6. николай

    Прав си, Кириле, наистина е ужасно. Проблемът на Graublau Web е по-скоро, че не изглежда добре в малките размери на шрифта. Пробвай да увеличиш страницата и ще видиш, че има значително подобрение.

    Върнах се на Georgia за текста на публикациите. Ще ми трябва друг шрифт за дребните размери.

  7. Гонзо

    Ето няколко линка към шрифтове, позволяващи font-linking:

    http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_@font-face_embedding – Това няма как да не си го намерил.

    http://openfontlibrary.org/media/people/gluk – някои от шифтовете на гтози поляк имат и кирилица, а имаше и няколко други с кирилца в сайта, по-скоро декоративни.

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

    @КойСъмАз?, ти пробвал ли си да ползваш WEFT? По-неудобна програма отдавна не бях срещал. А EOT няма какво да го дискутираме.

  8. николай

    И Fonts available for @font-face embedding ги гледах и тези на поляка също. Нищо използваемо не намерих.

    Нямам нищо против това да си купя някой шрифт. Студиото на Лебедев има прекрасни шрифтове, но не разрешават вграждане.

  9. netsurfer

    Защо да не разрешават вграждане?
    A purchased font can be employed in any commercial or non-commercial project including
    ▪ websites;

  10. николай

    Виж по-долу:

    It is prohibited to:


    publish the font online allowing it to be downloaded by unauthorized users

  11. Станислав Кирилов

    Предполагам, че това би ви помогнало до някаква степен:
    http://www.mikeindustries.com/blog/sifr/ Flash+JS+CSS2

    Но все още сме далеч от това да започнем да, четем цели текстове, които не са на web-safe font, но поне с типографията във заглавията може да си играем.

  12. Тихомир

    Ровейки се в нета, бях си буукмаркнал тази страница, подаднах на нещо подобно – блогът на Гонзо. Съответно в статията му.

    http://greatgonzo.net/pages/533.html

    Има много добра колекция от шрифтове, поддържащи кирилица.

    Поздравления за полезната информация.

Твоят коментар