Categories
сметачи

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

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 replies on “Вграждане на шрифтове в уеб страници”

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

Ники,

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.