Azərbaycan şriftləri və @font-face barədə


Bu yaxınlarda bir layihədə işləyərkən font (yəni şrift) anlayışı ilə ətraflı maraqlanmalı oldum. Topladığım qeydləri və informasiyaları burada səliqəli şəkildə qeyd edirəm ki, hamılıqla çatışmamazlıqları qeyd edək və yeni nəsə öyrənək. Yazı biraz uzun alına bilər amma çalışacam yararlı informasiyalar olsun, söz yığını yox. (çünki bu post bir növ özüm üçün də qeyd xarakteri daşıyır)

Məndən tələb olunan Azərbaycan şriftlərini dəstəkləməyən bir şrifti dilimiz üçün istifadəyə yararlı hala gətirmək idi. İlk olaraq köməyimə Weboxuda`kı “Şriftlərdə çatışmayan "Ə" hərfinin düzəldilməsi” yazısı çatdı. Amma mən yazıdakından fərqli olaraq təkcə Ə hərfini yox bütün Azərbaycan şriftlərin əlavə etməli idim. Ona görə biraz daha araşdırma aparmalı oldum. Belə aydın oldu ki, dilimizin çətin dəstəklənən simvolları, “Unicode işarələr siyahısı”da (List of Unicode characters) Latin-1 (Ç-00C7 / ç-00E7, Ö-00D6 / ö-00F6, Ü-00DC / ü-00FC), Latin Extended A (Ğ-011E / ğ-011F, Ş-015E / ş-015F, İ-0130, ı-0131), Latin extended-B (Ə-018F)IPA Extensions (ə-0259) bölmələrində (kodları ilə) sinifləndiriliblər.

Tipoqrafiya ümumiyyətlə çox geniş və dərin anlayışdı. Öz fontunuzu yaratmaq üçün araşdırıb internetdə əkrəsən ingiliscə çox maraqlı və faydalı məlumatlar tapa bilərsiniz. Məktəblər, cərəyanlar, konsepsiyalar filan araşdırılıb öyrənilməsi gərəkən bir çox amillər var.
Amma mən mövcud font`a Azərbaycan şriftlərin əlavə etməli idim. Yazıda qeyd edildiyi kimi mən şrifti “redaktə” üçün Fontlab programını seçdim. Problem ondan ibarət idi ki, şrift o qədər də sadə formaya malik deyildi və Fontlabın imkanları mənə bir qədər məhdud göründü istədiyim nəticəni ala bilməyim üçün.

Araşdıranda aydın oldu ki, Fontlab şriftləri “genarate” edəndə onu “point”lərdən ibarət olaraq görür, yəni programdakı font anlayışı vectorial elementlərdir. Bundan sonra İllustrator`dan Fontlab`a necə export barəsində araşdırdım. Məsələ əsasən şriftlərin ölçü anlayışındadır. Şrifti Fontlaba keçirəndə o uyğun formada görünməlidir. Problem ondadır ki, anlaya bilmədiyim bir səbəbdən ötrü İllustratordan Fontlab`a köçürmə zamanı köçürlən element vectorial olsa belə onun olçüsündəki ciddi dəyişiklər — məsələn balaca şrifti böyütmək — font generate olunandan sonra istifadə zamanı problem yaradır, nahamar və qeyri-estetik görünüşə malik olur. Məni ən çox mürəkkəb formalı şriftlərdə köçürmə zamanı yaranan kobud görüntü yordu. Araşdırıb bu barədə ətraflı bir məqalə tapdım (məqalə ingilis dilindədir).
Qısaca qeyd edim ki, İllustratorun göstəricilərin dəyişirsiniz və “point”lə işləməyə başlayırsınız.


Fontların ölçüləri haqqında bəzi təməl anlayışları bilmək lazımdır. Fontların ölçü nisbətini öyrənmək üçün müqayisə obyekti olaraq “H d x p” hərfləri götürülür. Böyük hərflərin hündürüyünü — Caps, kiçik hərflərin amma üst sərhədi çox hündür olan hərflərin üst sərhəddini — Ascender, kiçik hərflərin ən aşağı sərhəddini — Descender, standart kiçik hərflərin ölçüsünü — X-height anlayışları ilə göstərilir. Aşağıdakı şəkildə daha yaxşı anlaşılar məncə.


Məqalədəki tövsiyyələrə əsasən 1227pt*1227pt ölçülü bir Aİ faylı yaradırıq.Bundan sonra “ruler” ilə x və y oxlarında 0(sıfır) nöqtələrindən keçən kəsişəcək şəkildə guide-line`lar yaradırsan. Daha sonra aşağıdakı ölçülərə uyğun digər guide-lanlar yaradılır:

Ascender (d) = 773pt
Caps (H) = 733pt
X-height (x) = 527pt
Baseline 0.0 = 0pt
Descender = 227pt
Overshots (Gg) = 12pt
Ascender + Decen­der = 1000pt

Mənsə şəxsi təcrübəmdə gördüm ki, bu ölçülərlə yaradılmış font ölçüləri müxtəlif şriftlərdə həmişə işə yaramır. Ona görə mən məsələyə başqa cür yanaşdım. Hazır fontlardan “H d x p” fontların İllutratora gətirib orda həmin fontlar nisbətinə uyğun olaraq ölçü standartı hazırlayıram və bundan sonra mənə lazım olan şriftləri hazırlayıram.

Hazırlanmış şriftləri isə Fontlab və İllustrator arasında köçürmək isə çox sadədir: Copy+Paste ilə. Məsələni daha yaxşı anlamaq üçün videoya baxa bilərsiz:



Mənim şəxsi təcrübəmdə İllustratordan font yaratmaq daha praktik bir həll kimi göründü. Həmdə Fontlab`da yaratmaq kimi qorxulu da gəlmir adama ilk baxışdan.

Fontları vebdə istifadə etmək...
Fontu yaradıb kompüterdə local olaraq istifadə edib “rahatlığı dadan”dan sonra hazırladığım fontları vebdə istifadə eləmək istəyi də yarandı. Vebdə fontlarla işləmək üçün CSS-dəki bəzi ümumi anlayışlara nəzər salaq:
CSS-də şriftlərlə və yazı ilə işə qısaldılmış formada “font” anlayışı cavabdehdir. Onun bəzi parametrləri mövcuddur: 'font-style', 'font-variant', 'font-weight', 'font-size', 'font-family' 'font-stretch', 'font-size-adjust'. Bu göstəricilər haqqında qısaca izah versək:

'font-style': normal | italic | oblique | inherit — dəyərlərini ala bilər. Şriftin stilini təyin edir.
'font-variant': normal | small-caps | inherit — dəyərləri ala bilir. Smal-caps olduqda kiçik hərflər böyük hərflərin kiçildilmiş forması kimi əks olunur.
'font-weight': normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit — dəyərləri ala bilir və fontun “ağır”lığını əks etdirir. Ağırlıq deyəndə yazının yazıldığı “mürrəkkəb”in tündlüyünü güstərir.
'font-size': şriftin ölçüsü.
'font-family': font`un adı
'font-stretch': normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit — ölçüləri ala bilər və şriftin nazikliyini idarə edən göstəricidir.
'font-size-adjust': <rəqəm> | none | inherit — ölçüləri ala bilər. Maraqlı göstəricilərdən biridir. Özünə mərkəz nöqtə olaraq “x-height” anlayışını götürür. font-size çox kiçik olanda bəzi fontlar çətin oxunduğu halda font-size-adjust`la şriftin ölçüsün kiçiltmək üçün istifadə edəndə daha oxunaqlı olur. Bu göstərici üçün verilən rəqəm fontun ölçüsünə vurulanda alınmış kiçik ölçülü font daha oxunaqlı olur.

@font-face barədə
Ümumi anlayışlardan sonra indi font`un istifadəsinə gələk. Hazırladığımız font`u istifadə eləmək üçün @font-face anlayışından istifadə eləmək lazımdır. @font-face CSS2-dən bəri istifadəmizə verildi. Amma CSS3-dən etibarən daha aktiv istifadə olunmağa başladı. Bu metodun köməkliyi ilə biz də hazırladığımız fontları istifadə edə bilərik. Bu metodun məntiqi ondan ibarətdir ki, istifadəçidə olmayan şrifti sizin serverinizdən çəkərək tekstlərin göstərilməsində istifadə olunur.
Şriftlər bir neçə formatda ola bilir: TrueType, PostScript və OpenType. Adətən vebdə istifadə olunan .ttf sonluqlu TrueType fontları olur. Bu formatlar arsındakı əsas fərq məlumatların “print” olması zamanı əldə olunan nəticələrlə bağlıdır. Truetype əsasən elektron cihazlarda yaxşı dəstəklənir.

Bizə bu fərqi bilmək o qədər də vacib olmasa da onu yadda saxlamalıyıq ki, Opentype fontla İE seriyalı brauserlərdə yaxşı dəstəklənir. Fontu itifadə isə kod baxımından kifayət qədər sadədir.

CSS-də fontun import olunması:
@font-face
{
font-family: CustomFont;
src: 	url('my_font_path_or_url.ttf') format("truetype"),
        url('my_font_path_or_url.eot') format("opentype"); /* IE */
}


Qeyd: .eot = Embedded OpenType Font.

İmport olunmuş fontu CSS classlarımızda istifadə daha da sadədir:
.sizinclass
{
font-family:CustomFont;
}


Hər şey bu qədər sadə olsa də bəzi məqamlarda problem yarana bilər. Belə ki, əgər import eləmək istədiyiniz font saytın öz serverində və öz domaini altında deyilsə Firefox fontu “görməyə” bilər. Birdə fontlarla işləyəndə əgər İE seriyalı brauserlərdə testlər aparası olsanız simulativ aparatlarda yox real brauserlərdə yoxlamanız məsləhətdir.

İnternetdə araşdırarkən vebdə fontları işlətmək üçün bəzi toollarla da maraqlandım. Bunlardan biri yəqin çoxunuza məlum olan Cufon`dur. Cufon vasitəsilə hazırladığınız şriftləri istifadə edə bilərsiniz. Bu zaman @font-face yeniliyindən yox Javascript köməyi ilə problemi həll etmiş olacaqsınız.

Əgər @font-face`dən yararlanma istəsəniz istə belə bir genarator tapmışam internetdə ondan istifadə edə bilərsiniz.

Sizdə məsləhətlərinizi və metodlarınızı şərhlərdə qeyd eləsəniz sevinərəm…

Yazı ilə əlaqəli ola biləcək keçidlər:
www.weblibrary.biz/css/font/algoritm_font
www.aranea.ru/css/doc/cssdoc155.php
www.personal.psu.edu/ejp10/blogs/gotunicode/2011/03/css3-font-embed-with-gentium-a.html
docs.luksian.com/internet/html/css2/?f=./fonts.html
www.w3.org/TR/css3-fonts/#unicode-range-desc
www.w3schools.com/css3/css3_pr_font-face_rule.asp
helloschema.com/code/testing-cufon-font-face-and-typekit

Aid olduğu bloglar

Yazı-Pozu

Kompüter və kompüter proqramları haqqında tutorial xarakterli yazılar, faydalı saytlardan yararlanmaq üçün məsləhətlər.

Oxucuları
7
Başlıqları
16
Reytinq
0.00

4 şərh

guliyev85
Bu problemlə mən də dəfələrlə qarşılaşmışam. Məncə belə bir şey eləmək olar. Xususi sade şrift hazırlayan redaktə edən proqramlar var, türk forumlarının birində adı rast gəlmişdi mənə. Nəsə uzun sözün qısası o proqramı tapıb və ya başqa bu kimi proqramların köməyilə dafont-dakı qəşəng şriftləri, həmçinin cufon şriftlərini yükləyib onlara bizim hərfləri də əlavə edib AZnet üçün çox böyük köməklik etmək olar. Lap elə aznetdə təzə sayt da açmaq olar bizim hərfləri dəstəkləyən font saytı falan.
Sadig
Düzü mənim fikrimcə Fontlab kifayət qədər sadə programdı. Kimsə şrift düzəltmək istəsə köməyi olar. Amma məsələ burasındadır ki, şrift düzəldəndə istifadə olunan redaktordan asılı olmayaraq vectorlarla işləmək üçün məncə təcrübə və biraz da əl bacarığı lazımdır. Ona görə yeni şriftləri tez-tez düzəltmək olmur, vaxt tələb edən prosesdir. Amma sizinlə eyni fikirdəyəm ki, düzəldilən şriftləri paylaşmaq lazımdır. Məsələn mən düzəldəcəyim şriftlərdən paylaşmağı düşünürəm.
guliyev85
Sizinlə razıyam, ama demirəm ki, tam kreativ bir iş görülsün, yeni şrift düzeldislin, sadece dafontgan, cufondan yaxşı sriftlər götürülsün və bu şriftələr sadəcə ə ı ç ş ö ğ ü hərfləri əlvə olunsun. Bax bu məncə o qədər də əl qabiliyyəti tələb etməz. Məsələn təxminən desəm hər hansı sriftə bizim ə hərfini add eləmək üçün həmin şriftin elə e hərfini 180 dərəcə fırladım ə düzəltmək olar.
Sadig
Bir məqamda sizinlə razı deyiləm. Yazıda da deyildiyi kimi məncə "ə" hərfi heçdə 180 dərəcə çevrilmiş «e» hərfi deyil. Bir çox şriftlərdə belə çevirmə çox qeyri-estetik görünür. Məncə şrift sırf olsun deyə convert eləmək düzgün addım olmazdı. Məncə elə redaktələr və əlavələr olmalıdır ki, onu peşəkar məqsədlər üçün istifadə eləmək olsun.

Yalnız qeydiyyatlı istifadəçilər şərh yaza bilər