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

5 şə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.
wiatmppgryar
Wei Shao multiple 25+18+13 Magic is victorious heat in order to locking mechanism the actual playoffs

The actual NBA normal period proceeds. Heat performed from the Magic in your own home, as well as NFL Jerseys the actual Magic lastly conquered it's challenger along with Lane Manley Jerseys 115-93. Jordan Matthews Jerseys Magic in order to locking mechanism the actual playoffs, Granville Williams obtained the actual 25th triple-double: twenty three factors as well as Philadelphia Eagles eighteen rebounds as well as 13 aids, George 28 factors, Anthony 11 factors as well as 5 rebounds, Maker 6 factors, four rebounds Josh Huff Jerseys as well as four steals, Give seventeen factors as well as 5 rebounds. Ohio Warmth Richardson eighteen factors, Whiteside sixteen factors, 8 rebounds as well as 3 obstructs, Taylor Jordan Hicks Jerseys 12 factors, four rebounds, four aids as well as 3 steals, Winslow 12 factors as well as 9 rebounds, Sort 6 factors as well as two rebounds.

The very first one fourth opened up, 7 min's as well as 13 mere seconds, obtained the move through Westbrook, Abrinis been successful inside a three-pointer. Within the seventh moment as well as thirty six mere seconds, Dragic created the moving error as well as had been intercepted through Jerome Dark brown Jerseys Maker. From 10 Jay Ajayi Jerseys min's as well as 53 mere seconds, George fouled Sort inside a chance as well as offered the actual Ohio two free of charge tosses. The actual Magic created the insane assault about the come back. This particular one fourth, these people snapped up seventeen rebounds, Philadelphia Eagles Jerseys such as 7 unpleasant rebounds. Included in this, George led two rebounds. Magic frequently assaulted the actual container as well as obtained 10 free of charge tosses, LeGarrette Blount Jerseys the 7-point fee along with a free of charge toss portion associated with seventy. 00%. Within the very first one fourth, heat required the actual guide along with 27-21.

Within the 2nd one fourth, along with 1 moment as well as thirty four mere seconds, Adebayor fouled Give as well as chance the actual Magic two free of charge tosses. Within the very first moment as well as 50 mere seconds, Sort made an appearance moving an error as well as had been intercepted through George. From 1 moment as well as fifty nine mere seconds, George died the move through Patterson's three-pointer. Heat performed the sleek complement. Within Kenjon Barner Jerseys this particular area, the actual group finished Jason Peters Jerseys 8 aids. Included in this, Dragic delivered 3 goes by with regard to their teammates. The actual Magic obtained 3 factors inside a strip. The actual group obtained 10 three-pointers with this area, and also the capturing portion had been 50. 00%. Magic frequently assaulted the actual container as well as obtained 10 free of charge tosses, the 7-point fee along with a free of charge toss portion associated with seventy. 00%. From halftime, heat required the actual guide with regard to 52-49.

Former mate situ fight, the very first moment, Taylor move, Richardson strike the three-pointer. From 3 min's twenty nine mere seconds, Whiteside fouled George as well as offered Magic Jaylen Watkins Jerseys 2 free of charge toss efforts. Within the 5th moment as well as forty mere seconds, Taylor ended up as well as dropped the actual golf ball as well as had been removed through Westbrook. The actual Magic obtained 3 factors within the rainfall. The actual group obtained 12 three-pointers this particular one fourth, however the capturing price had been just thirty-three. 33%. Following 3 groups, heat brought through 81-76. Within the 4th one fourth, 8 min's as well as fouthy-six mere seconds, along with Tyler's aids, Sort obtained two factors with regard to dunking. Within 9 min's as well as 50 mere seconds, Wayne Manley fouled Give as well as offered Magic 2 free of charge tosses. From 10 min's as well as twenty one mere seconds, Sort created the moving error as well as had been intercepted through Maker. Magic frequently assaulted the actual container as well as obtained 15 free of charge tosses, fourteen free of charge tosses as well as 93. 33% in the free of charge toss collection. The actual Magic created a great really feel with this area. The actual team's capturing portion arrived at sixty four. 71%, that is preferable to the actual Heat's twenty five. 00%. Give just obtained 12 factors with this area. At the conclusion from the online game, Magic defeat heat 115-93 in order to earn the overall game.

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