რუსული შრიფტები ვებ დიზაინისთვის. უსაფრთხო შრიფტები. ახლა დროა გააუმჯობესოთ თქვენი რობოტების დიზაინი ვებ შრიფტების გამოყენებით

ტექსტი არის მსოფლიოში ინფორმაციის გადაცემის მთავარი საშუალება და, შედეგად, ვებსაიტის ერთ-ერთი ყველაზე მნიშვნელოვანი კომპონენტი. ასეთ სიტუაციაში ბუნებრივი და ლოგიკური ჩანს, რომ საიტის ნებისმიერი ავტორიტეტის მოვალეობაა უზრუნველყოს, რომ მისი ტექსტები არ იყოს ძალიან ინფორმატიული და დამღლელი, არამედ კარგად გამოიყურებოდეს. ამ მიზნით, თანამედროვე ვებ დიზაინისა და განლაგების ტექნოლოგიები უზრუნველყოფს ინსტრუმენტების დიდ არსენალს. დღეს ჩვენ ვისაუბრებთ მათგან ყველაზე მნიშვნელოვანზე - შრიფტზე და მისი დიზაინის მახასიათებლებზე საიტებზე.

შრიფტი- არა მხოლოდ დეკორატიული ელემენტი საიტზე. ტექსტის ვიზუალიზაციის უტილიტარული ფუნქციის გარდა, ღვინო თამაშობს ესთეტიკურ და ფსიქოლოგიურ როლს და გავლენას ახდენს კლიენტთან ურთიერთობის ყველა ასპექტზე. თამამი შრიფტი, რომელიც წააგავს ესთეტიურად სასიამოვნო საიტს, იკითხება მარტივი და სასიამოვნო, ხოლო გაურკვეველი ან ცუდად შერჩეული შრიფტი კითხვას აქცევს ტესტად და ართმევს მკითხველს უსიამოვნო გრძნობებს. ორიგინალური შრიფტის გადაწყვეტილებების შერჩევის რამდენიმე მაგალითი არაკომერციული ორგანიზაციების ვებსაიტების დიზაინში:

ახლა, თუ საიტზე ლამაზი შრიფტების გამოყენების დადებითი ეფექტი ჩვენთვის აშკარა ხდება, კვების მიზეზი არის დამნაშავე. "მაშ, როგორ იყენებთ არასტანდარტულ შრიფტებს თქვენს ვებსაიტზე?". ამის გარკვევის გასაღები მდგომარეობს კომპიუტერული შრიფტების რაციონალური მუშაობის პრინციპში.

კომპიუტერის შრიფტი- ფაილი ერთი ფორმატით, რომელიც აღწერს ასოებისა და სიმბოლოების ერთობლიობას, რომელიც გამოიყენება პროგრამის ან ოპერაციული სისტემის მიერ ეკრანზე სიმბოლოების საჩვენებლად. ეს, ვიკიპედიის პერიფრაზით რომ ვთქვათ, შეიცავს რამდენიმე საკვანძო ასპექტს, რომლებიც მნიშვნელოვანია ჩვენი პატივისცემისთვის ვებსაიტზე შრიფტებთან მუშაობისას.

1. სიმღერის ფაილის ფორმატი. ფაილი არის შრიფტით ისე, რომ მისი შეცვლა შესაძლებელია იმ პროგრამის მიერ, რომელშიც ჩვენ ვმუშაობთ, რომელიც შეიძლება იყოს "სინქრონული პროგრამის" ფორმატში. კომპიუტერის შრიფტის ფორმატებში არის ნიმუში, რომელიც ავტომატურად წარმოშობს შეუსაბამობის პრობლემას. მნიშვნელოვანია ყურადღება მიაქციოთ შრიფტის არჩევანს, რადგან თქვენზე გავლენას არ ახდენს პროგრამა, რომელშიც ტექსტი ნახულია.
2. Vikorist OS პროგრამა. შრიფტის ფაილი ფიზიკურად უნდა იყოს ხელმისაწვდომი სისტემისთვის, რათა მისი გამოყენება შესაძლებელი იყოს ტექსტის საჩვენებლად. ინტერნეტის გონებაში ეს არატრივიალური საიდუმლოა. მიუხედავად იმისა, რომ საიტი ნახულია მრავალ სხვადასხვა კომპიუტერზე, ჩვენ არ შეგვიძლია დავადანაშაულოთ ​​ის ფაქტი, რომ მათ არ აქვთ საჭირო შრიფტები.
3. ასოებისა და სიმბოლოების ნაკრების აღწერა. ჩვენ უნდა დავრწმუნდეთ, რომ შრიფტი შეიცავს გლიფებს, რომლებიც აღწერს ნაჩვენები ტექსტის ყველა სიმბოლოს. მაგალითად, თუ ვცდილობთ რუსული ტექსტის სხვა შრიფტად გადაქცევას, როგორიცაა კირილიცას გლიფები, ვერაფერს ვიპოვით.
4. სიმბოლოების ჩვენების პარამეტრი. აუცილებელია პროგრამის ინფორმირების საშუალება, რომელიც გულისხმობს ტექსტის განხილვას, იმ ნაწილების შესახებ, რომლებიც შეიძლება იყოს გამოსახული სხვადასხვა შრიფტით.

ახლა, რადგან ჩვენ ნათლად გვესმის ვებსაიტებზე შრიფტების გამოყენებასთან დაკავშირებული პრობლემები, ვნახოთ, როგორ უმკლავდება მათ მიმდინარე ვებ განლაგება.

მოძებნეთ შრიფტი თქვენი ვებსაიტისთვის

ყველაზე მნიშვნელოვანი რაც უნდა გავაკეთოთ არის ვიცოდეთ და აირჩიოთ შესაბამისი შრიფტი და გადავიდეთ:

• იგი მხარს უჭერს საჭირო ენას (Zokrema, რუსული)
• შრიფტის ლიცენზია საშუალებას იძლევა გამოიყენოს იგი ვებსაიტზე

საიდანაც ჩვენ შეგვიძლია დაგვეხმაროს სხვადასხვა ონლაინ ბიბლიოთეკებით, როგორც კომერციული, ისე არაკომერციული შრიფტებით და დავეხმაროთ მათ პოვნაში, განხილვასა და ტესტირებაში.

• MyFonts არის უმსხვილესი ონლაინ შრიფტის ბიბლიოთეკა, რომელიც უზრუნველყოფს ხელით საძიებო სისტემას დეტალური ინფორმაცია თითოეული შრიფტის წარმოშობისა და ოფციების არჩევის ან არჩევის შესაძლებლობით.
• Google Webfonts- Google-ის მიერ შექმნილი თავისუფლად ხელმისაწვდომი შრიფტების ბიბლიოთეკა, ამ კოლექციიდან ყველა შრიფტი თავისუფლად ხელმისაწვდომია ნებისმიერ საიტზე და Google ასევე გთავაზობთ მარტივ ინტერფეისს მათი ინსტალაციისთვის.
• Adobe Edge Web Fonts არის მსგავსი სერვისი Adobe-სგან, რომელიც უზრუნველყოფს ფართოდ ხელმისაწვდომი შრიფტების დიდ კატალოგს, მათ შორის ძიებასა და ტესტირებას და მათი ვებსაიტში ჩასმის შესაძლებლობას.
• free.type.org.ua - თავისუფლად შეფერილი შრიფტების კოლექცია კირილიცას შეხებით.

Yakshcho დასახელებულ შრიფტში Yogo Kirilichna აშკარად არ არის ჩართული (კოლექცია, Museo Sans Cyrillic), შემდეგ Scho გარემონტებულია Piditrimsi Movie, Simal Submiss, Scho Masive, Abo, უხვი, ზოგიერთი ონლაინ ბიბლიოთეკა უზრუნველყოფს ამ შესაძლებლობას; ალტერნატიულად, შეგიძლიათ გამოიყენოთ შრიფტის ტესტირების სერვისები, მაგალითად:

• Typetester - შრიფტების ტესტირება და ნიველირება, ტესტის ტექსტის დათვალიერებით პარამეტრებით, რომლებიც საჭიროებს კონფიგურაციას, როგორიცაა წერტილის ზომა, მწკრივების ინტერვალი და ა.შ.
• Wordmark - მარტივი სერვისი კომპიუტერზე დაინსტალირებული შრიფტების შესამოწმებლად, სატესტო ფრაზის ჩვენებით, როგორც შეყვანისას

შრიფტის გამოყენება შესაძლებელია საიტზე მხოლოდ იმ შემთხვევაში, თუ ამის საშუალებას იძლევა დიზაინერისგან ან სააგენტოსგან მიღებული სალიცენზიო ხელშეკრულება (EULA). შრიფტების ბევრი გამყიდველი (მათ შორის კირილიცა, მაგალითად, ParaType) იძლევა ასეთ ლიცენზიას. როგორც ადგილობრივი სააგენტოდან შრიფტის ვებ ლიცენზიის შეძენის ალტერნატივა, არსებობს Web Font Embedding Services. მათ ასევე აქვთ შრიფტების ბიბლიოთეკა, რათა მათ კლიენტებს მისცენ შესაძლებლობა დააკონფიგურირონ შრიფტები და შეიძინონ ისინი თავიანთი ვებსაიტებიდან ყოველთვიური გადასახადით (შესყიდვის სერვისების მიმოხილვა). მათ შორის ყველაზე პოპულარულია:

თუმცა, ყველა ეს სერვისი, თავისი ორიენტაციის გამო, პირველ რიგში ორიენტირებულია საზღვარგარეთის (რომელიც იყენებს ლათინურ ანბანს) ბაზარზე და მცირეა შრიფტების რაოდენობა, რომლებიც მხარს უჭერენ კირილიცას. ამ სერვისების გამოწერის ფასი მაღალია და შეიძლება იყოს აკრძალული კონკრეტული არაკომერციული პროექტისთვის. ამის ღირსეული ალტერნატივაა თავისუფლად გაფართოებული შრიფტების გამოყენება, მაგალითად Google Webfonts ან Adobe Edge Web Fonts, რომლებიც უკვე გამოიგონეს და ასევე გამოქვეყნებულია რამდენიმე დიზაინერისა და სააგენტოს მიერ (მოხსენება შრიფტების ლიცენზირების პრობლემის შესახებ. ვებ გამოქვეყნებულია სტატიაში A List Apart).

შრიფტის ფორმატები ვებისთვის

არსებობს დესკტოპის და ვებ შრიფტის არაერთი ფორმატი, რომლებიც განსხვავებულად მოქმედებენ სხვადასხვა სისტემაში და შესაფერისია სხვადასხვა ამოცანებისთვის. ჩვენი ასობით ვებსაიტი იყენებს უახლეს ფორმატებს:

TTF- TrueType არის კომპიუტერული შრიფტების ფორმატი, რომელიც შეიქმნა Apple-ის მიერ 1980-იანი წლებიდან და ამჟამად გამოიყენება Apple-ისა და Microsoft-ის მიერ ოპერაციულ სისტემებში. შრიფტის ფაილები შეიძლება გაფართოვდეს .ttf.

OTF- OpenType არის ფაილის ფორმატი შრიფტებისთვის, რომლებიც შემუშავებულია ერთობლივად Microsoft-ისა და Adobe-ის მიერ მათ ოპერაციულ სისტემებზე გამოსაყენებლად. OpenType-ს აქვს უფრო მეტი დამუშავების ძალა ვიდრე TrueType და მხარს უჭერს უფრო დიდი სიმბოლოების კომპლექტს პატარა ფაილის ზომაში. Cross-platform OpenType მიიღწევა შრიფტის Windows და Mac OS ვერსიების ერთ ფაილში ჩართვის გზით. შრიფტის ფაილები შეიძლება გაფართოვდეს .ttfან კიდევ ოტფ.

EOT- Embedded OpenType - კომპაქტური შრიფტის ფორმატი, რომელიც ნაწილდება OpenType ვებსაიტებზე, შემუშავებული Microsoft-ის მიერ. ასეთი შრიფტების ფაილები შეიძლება გაფართოვდეს .ეოტ. ჩაშენებული OpenType ფორმატი საკუთრებაშია და მხარდაჭერილია Internet Explorer ბრაუზერის მიერ.

WOFF- Web Open Font Format - შეკუმშული OpenType ან TrueType შრიფტის ფორმატი, კონტეინერის გამოსახულების ჩათვლით, რომელიც შეიცავს ორიგინალ შრიფტებს OpenType ან TrueType ფორმატში. ამ შემთხვევაში, გამომავალი შრიფტები შეკუმშულია გადაცემის გასაადვილებლად და თან ახლავს მრავალი მონაცემი, რომელსაც შეუძლია შრიფტის შესახებ ინფორმაციის დამატება.

SVG- Scalable Vector Graphics - მასშტაბური ვექტორული გრაფიკის განლაგების ენა, რომელიც შეიძლება გამოყენებულ იქნას შრიფტის აღსაწერად და გამოსაყენებლად.

ვებსაიტები განიხილება სხვადასხვა ბრაუზერში, რომლებიც ასევე მუშაობენ სხვადასხვა ოპერაციულ სისტემაზე (Windows, Mac OS, Linux, Android, iOS და ა.შ.). მორგებული შრიფტით, ჩვენ შეგვიძლია უზრუნველვყოთ მისი გამოჩენა უმეტეს (იდეალურად ყველა) სიტუაციაში. ვინაიდან ეს ვარიანტები არ არის სრულყოფილად მრავალპლატფორმული, მათი კორექტირება მოუწევს იმავე მიზნის მისაღწევად. მიზანშეწონილია აირჩიოთ ფორმატების კომბინაცია საიტზე ჩასართავად: TTF, WOFF, EOT, SVG. იქნება TTF ან OTF შრიფტი, შეგიძლიათ გადაიყვანოთ იგი, vikoryst, მაგალითად, Fontsquirrel გენერატორი - სერვისი, რომელიც საშუალებას გაძლევთ შემოიტანოთ შრიფტი და გადაიყვანოთ იგი საჭირო ფორმატებში. გარდა ამისა, ის ქმნის CSS კოდს, რომელიც შეიძლება გამოყენებულ იქნას საიტზე შრიფტების შემდგომი ინსტალაციისთვის.

თუ იყენებთ Google ბიბლიოთეკას ან Adobe Edge-ს, არ უნდა ინერვიულოთ ფორმატებზე. კომპანიების მიერ მოწოდებული პროგრამული სერვისი უზრუნველყოფს შრიფტის მხარდაჭერას უმეტეს ტიპებში.

ვებსაიტზე შრიფტების დამატება

საიტის შინაარსისთვის შრიფტების შექმნის შესაძლებლობა (ისევე, როგორ ვქმნით სურათებს ან ვიდეოებს) უზრუნველყოფილია ჩემი CSS სტილებით, რომლებიც პასუხისმგებელნი არიან გვერდის ყველა ელემენტის დიზაინზე, ტექსტის ჩათვლით. ამ ტექნოლოგიის განვითარების ადრეულ ეტაპზე შესაძლებელი იყო იმის მითითება, თუ რომელი შრიფტია პასუხისმგებელი იმავე ან სხვა ელემენტების გარეგნობის დამახინჯებაზე. თუმცა ითქვა, რომ ეს შრიფტი იყო კორისტუვაჩის კომპიუტერზე დაყენების ბრალი. როგორც კონკრეტული შრიფტის ხელმისაწვდომობისგან „დაზღვევის“ ვარიანტი, შესაძლებელი იყო რამდენიმე შრიფტის დაყენება „პრიორიტეტის“ მიხედვით, რათა სისტემამ თანმიმდევრულად აირჩია ძიება და აირჩია პირველი ნაპოვნი ვარიანტი სიაში. ამ მიდგომამ საფუძველი ჩაუყარა კონცეფციას უსაფრთხო ვებ შრიფტებისთვის(web save fonts) - შრიფტების ნაკრები, რომლებიც ფართოდ არის დაინსტალირებული კომპიუტერის მომხმარებლების კომპიუტერებზე, როგორიცაა, მაგალითად, შედის OS-ის ინსტალაციის პაკეტში ან უბრალოდ სარგებლობს მათი დიდი პოპულარობით.

ასეთი შრიფტების „სიგანის“ შესახებ სტატისტიკის მიღება შესაძლებელია დამატებითი სერვისის cssfontstack.com-ის გამოყენებით, რომელიც ასევე ხელს უწყობს თითოეული მათგანისთვის „უსაფრთხოების“ შრიფტების თანმიმდევრობის შექმნას.

როგორც ჩანს, იმ პერიოდის ვებ ინსტრუმენტების ყველა შესაძლებლობა კონცენტრირებული იყო ათეულობით შრიფტში, რომლებიც შედიოდა "უსაფრთხო" კომპლექტში. CSS-ის შემუშავებით შესაძლებელი გახდა საიტზე შრიფტების „დანერგვა“. მოათავსეთ შრიფტის ფაილი სხვა საიტთან ერთად სერვერზე და გამოიყენეთ იგი შაბლონის კოდში, რათა ბრაუზერმა მიიზიდოს საიტის ნახვა და ამით გახდეს ხელმისაწვდომი მომხმარებლის კომპიუტერში გამოსაყენებლად. დამატებითი @font-face დირექტივის გამოყენებით, ის მხარდაჭერილია უფრო მიმდინარე ბრაუზერების მიერ და წარმოდგენილია მეტ საიტებზე. ასევე, თუ აირჩევთ, არ დაგავიწყდეთ მიუთითოთ შრიფტის „უსაფრთხოების“ ვარიანტები, რომლებიც შეიძლება იყოს ხელმისაწვდომი იმ შემთხვევებში, როდესაც მთავარი შრიფტი რაიმე მიზეზით მიუწვდომელია. ოტიე, მიმდინარეობს შრიფტის შექმნა, შეცვლილი ოფიციალურ სერვერზე.

1. ჩვენ ვიცით საჭირო შრიფტი TTF ან OTF ფორმატისთვის, ვამოწმებთ, რომ ის მხარს უჭერს ჩვენთვის საჭირო ენას.
2. Wikorist's Fontsquirrel გენერატორი შრიფტების კონვერტაციისთვის სხვადასხვა ვებ ფორმატში.

1. გენერატორმა უნდა შექმნას @font-face-package, რომელშიც შედის ფონტის ფაილები (ისინი უნდა განთავსდეს სერვერზე, შაბლონის სხვა ელემენტებთან ერთად) და მოამზადოს @font-face წესები, რომელიც უნდა იყოს მოთავსებულია სტილის ფაილის დასაწყისშივე ჩემს საიტზე, ხელახლა კონვერტაციის შემდეგ, რათა სწორად იყოს მითითებული შრიფტის ფაილების მიმართულებები.

@font-face ( font-family: 'myfont'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iefix') ფორმატი ('embedded-opentype'), url('myfont-webfont.woff') ფორმატი('woff'), url('myfont-webfont.ttf') ფორმატი('truetype'), url('myfont-webfont.svg#myfont') ფორმატი('svg '); შრიფტის წონა: ნორმალური; შრიფტის სტილი: ნორმალური;

2. სტილში მითითებულია, რომ ზოგიერთი ელემენტი ექვემდებარება შრიფტის გამოყენებას ჩვეულებრივი CSS სინტაქსის გარდა.

შესაძლებელია განიცადოთ დაშლის ეფექტი. ჩვენც შეგვიძლია ცოტა ვაპატიოთ საკუთარ თავს Vikorist და მესამე მხარის სერვისი შრიფტების იმპორტისთვის, მაგალითად Google Webfonts.

1. ჩვენ ვირჩევთ შრიფტს ბიბლიოთეკიდან და ვამოწმებთ მას, რომ მხარი დაუჭიროს ჩვენთვის საჭირო ენას.
2. „შვედური ვიქტორიანული“ რეჟიმში, ჩვენ ვირჩევთ გამოსახულების ჩვენთვის საჭირო ვარიანტს და პერსონაჟთა ნაკრების მხარდაჭერას. რაც უფრო მეტი ვარიანტი გვინდა გამოვიყენოთ, მით უფრო მნიშვნელოვანია შრიფტის ფაილი და მით უფრო მნიშვნელოვანი იქნება ჩვენთვის დაინტერესება. ასე რომ, ნუ არჩევთ ხარბს.
3. ჩვენ ვაკოპირებთ კოდს, რომელიც გენერირებულია სისტემის მიერ და ჩასვით მას საიტის შაბლონის კოდში ტეგებს შორის სხვა შეტყობინებების წინ .cssფაილები.
4. სტილში აშკარაა, რომ ზოგიერთი ელემენტის ბრალი არის შრიფტის გამოყენების გაუგებრობაში, ჩვეულებრივი CSS სინტაქსის გარდა, ისევე როგორც პირველ რიგში.

არასტანდარტული შრიფტების გამოყენების შესაძლებლობისთვის გადასახდელი ფასი პროდუქტიულობის დაკარგვაა - საიტი უფრო ხალხმრავალი გახდება და მას მეტი გამოთვლითი რესურსი დასჭირდება. ამიტომ, არ არის რეკომენდებული ბევრი არასტანდარტული შრიფტის გამოყენება ერთ გვერდზე და ასევე მათი შეფუთვა მთავარ ტექსტში, რომელიც გარშემორტყმულია მიმდებარე დიზაინის ელემენტებით, როგორიცაა სათაურები ან ნავიგაციის ელემენტები (მოხსენება პროდუქტიულობის პრობლემის შესახებ. ბოროტად გამოყენებული შრიფტები შეგიძლიათ წაიკითხოთ Habré-ზე).

საიტებზე ვებ შრიფტების პრაქტიკული გამოყენების შესახებ ჩვენი დისკუსიის დასასრულს - არის მრავალი საიტი, რომელიც მთავარ როლს ანიჭებს ვებ შრიფტებს

• თარგმანი

ახლა დროა გააუმჯობესოთ თქვენი რობოტების დიზაინი ვებ შრიფტების გამოყენებით

ვებ შრიფტების უსაფრთხოდ გამოყენების თავისუფლება ყველა სადენიანი ოპერაციული სისტემაზე შესაძლებელი გახდა სამი ძირითადი, შესაძლოა უშუალო, ტექნოლოგიური ფაქტორის დიდი გავლენის გამო: ბრაუზერებში @font-face წესების ფართოდ დანერგვა; ისეთი „შრიფტის ურჩხულების“ გამოჩენა, როგორიცაა Typekit და Fontdeck; ახალი შრიფტის ფორმატის შექმნა - დაარქივებული WOFF ფონტის ფაილი.

* ამ შრიფტებიდან რამდენიმე არის კირილიცას, ამიტომ ეს არჩევანი უფრო შესაფერისია „აუტერსორსებისთვის“. ვიმედოვნებთ, რომ ზოგიერთი მათგანი მალე გამოჩნდება და არანაკლებ შრიფტები სლოვენური ენებისთვის კირილიცაზე.ტეგების დამატება

განლაგების განლაგების დაწყებისას აუცილებელია CSS-ში გულდასმით მიუთითოთ ის შრიფტები, რომლებიც გამოყენებული იქნება გვერდზე. ყველაზე ხშირად, სხვადასხვა შრიფტით, დიზაინერი აკრიფებს არა მხოლოდ გვერდის ძირითად ტექსტს, არამედ სხვადასხვა სათაურებს, ლოგოებსა და მონოგრამებს:

კარგმა დიზაინერმა, ისევე როგორც კარგმა განლაგების დიზაინერმა, იცის, რომ ბრაუზერს შეუძლია გამოიყენოს დიზაინერის კომპიუტერზე დაინსტალირებული იგივე შრიფტები გვერდის საჩვენებლად. შემდეგ შრიფტები შეიძლება ჭკვიანურად დაიყოს ორ კატეგორიად:

1. შრიფტები, რომლებიც ადვილად შეიძლება იყოს ნაჩვენები დეველოპერების უმეტესობის მიერ.
2. შრიფტები, რომლებიც ხელმისაწვდომია მხატვართა დიდი ჯგუფისთვის ყოველდღე.

თუ დიზაინერმა გამოიყენა სხვა კატეგორიის შრიფტები დიზაინისთვის, მაგალითად, ლოგო ან დიდი სტატიკური სათაურები, შეგიძლიათ უსაფრთხოდ გამოიყენოთ ტექნიკა. ამ მეთოდის სტაგნაციის ნაკლებობა არის მოუქნელობა. თუ შეცვლით ტექსტს, მოგიწევთ სურათის გადამუშავება და CSS-ის შეცვლა (მაგალითად, თუ ახალი სურათის ზომა არ ემთხვევა ძველს).

შეიძლება ითქვას, რომ სტაგნაციის საშიშროება ტექსტის ცვლილების სანდოობაშია. ამიტომ, მაგალითად, შეუძლებელია მოთხრობის ბინძური ტექსტის თავიდან აცილება არასტანდარტული შრიფტების გამოყენებით! კომპეტენტურ დიზაინერს არ შეუძლია ამის გამოსწორება. და თუ დიზაინერი გამწვანებაში მოხვდა, Garniy ბეჭდვის დიზაინერს უბრალოდ სურს გამოასწოროს თავისი შეცდომა - განლაგებაში შეცვალეთ ეს შრიფტი რაც შეიძლება მსგავსი სტანდარტული.

როგორ განვასხვავოთ პირველი ჯგუფის შრიფტები სხვაგან? ნათელია, რომ თქვენ არ შეგიძლიათ დამალოთ პირდაპირ თქვენს კომპიუტერში დაინსტალირებული შრიფტების აკრეფა! მოდით ერთად.

სტანდარტული შრიფტები

სტანდარტული შრიფტები არის შრიფტების ნაკრები, რომლებიც დამონტაჟებულია ერთდროულად ოპერაციულ სისტემასთან. ოპერაციული სისტემის ნაწილები განსხვავებულია და მათი შრიფტის ნაკრები განსხვავებულია. Windows-ის სხვადასხვა ვერსიისთვის სტანდარტული შრიფტების სია შეგიძლიათ იხილოთ, მაგალითად, სტატიაში სტანდარტული Windows შრიფტები და Mac OS-ის სტანდარტული შრიფტების სია გვერდზე Fonts, რომლებიც მოყვება Mac OS-ს. რადგან არსებობს Unix/Linux ოპერაციული სისტემები, მათ აქვთ შრიფტების ერთი ნაკრები. Linux-ის ბევრი მომხმარებელი იყენებს DejaVu შრიფტის კომპლექტს, განსაკუთრებით Ubuntu-ზე, რომელიც დაინსტალირებულია კულისებში. http://www.codestyle.org-ის სტატისტიკის საფუძველზე, Unix/Linux-ის ბევრ მომხმარებელს ასევე აქვს დაინსტალირებული URW, Free და სხვა შრიფტების ნაკრები. ამ სტატისტიკის საფუძველზე, Unix/Linux-ის მომხმარებელთა 60%-ზე მეტი იყენებს Core შრიფტებს ვებ შრიფტისთვის, რომელიც დაყენებულია მათ კომპიუტერებზე, რომელიც 2002 წლამდე ოფიციალურად ხელმისაწვდომი იყო Microsoft-ის ვებსაიტზე უფასო ჩამოტვირთვისთვის.

იმისათვის, რომ გვერდი გამოჩნდეს ისე, როგორც დიზაინერმა განიზრახა, მიუხედავად ოპერაციული სისტემისა, CSS-ში შესაძლებელია მიუთითოთ რამდენიმე შრიფტი, რომელიც კომაში იქნება გამოსახული.

ეს ძალა განსაზღვრავს შრიფტის გვარების და/ან ზოგადი გვარების პრიორიტეტულ სიას. CSS2 სპეციფიკაციაზე დაყრდნობით, არსებობს ორი ტიპის შრიფტის ოჯახის სახელები:

1. შერჩევის შრიფტის ოჯახის სახელი. მაგალითად, „Times new Roman“, „Arial“ და სხვა. შრიფტის ოჯახების სახელები, რომლებიც ხელს შეუწყობს ხარვეზების გადალახვას, დამნაშავეა თათებში ჩავარდნაში. ვინაიდან ბალიშები ყოველდღიურია, შრიფტის სახელამდე და მის შემდეგ ნებისმიერი ინტერვალი იგნორირებულია და შრიფტის სახელის შუაში არსებული ადგილების ნებისმიერი თანმიმდევრობა გარდაიქმნება ერთ სივრცეში.
2. საოჯახო (ფონური) ოჯახი. სპეციფიკაციას აქვს შემდეგი ზოგადი ოჯახები:
   • serif - შრიფტები ბოლოებზე სერიფებით;
   • sans-serif - sans-serif შრიფტი;
   • cursive - შრიფტი დახრილი სურათებისთვის;
   • ფანტაზია - დეკორატიული შრიფტები;
   • monospace - monospace შრიფტი (იგივე სიგანის ასოებით).
   საგვარეულო გვარების სახელები საკვანძო სიტყვებია და არ არის სავალდებულო ძირში დაწოლა.

ამრიგად, დიზაინისთვის აღებულია სტანდარტული შრიფტი OS Windows-დან, ანალოგიური არჩეულია Mac OS-ისთვის და Unix/Linux-ისთვის, მითითებულია შრიფტების ორიგინალური სამშობლო და ის მზად არის.

მაგრამ ეს არც ისე მარტივია. მოდი ჩავუღრმავდეთ მოხსენებას.

ვეძებთ უსაფრთხო შრიფტებს

ინტერნეტში ისტორიულად არსებობდა ისეთი კონცეფცია, როგორიცაა "უსაფრთხო" ვებ შრიფტები. უსაფრთხო შრიფტს შეიძლება ეწოდოს შრიფტი, რომელიც სტანდარტულია ყველა ოპერაციულ სისტემაში. სამართლიანობის ასეთი ბანაკის ნარჩენები სიკვდილით დაიკარგება აბსოლუტურად უსაფრთხო შრიფტები არ არსებობს!

ზოგიერთ შრიფტს შეიძლება ეწოდოს უსაფრთხო გარკვეული დაცვით.

"უსაფრთხო" შრიფტების აღნიშვნის საფუძველი იყო ყველაზე პოპულარული Windows ოპერაციული სისტემის შრიფტები, რომლებიც ასევე გამოიყენება სხვა ოპერაციულ სისტემებში. ასეთი რესურსის მაგალითია Web font-ის პაკეტის Core fonts, რომელიც, როგორც თქვენ ალბათ მიხვდით, ჩამოტვირთა Unix/Linux-ის უამრავმა მომხმარებელმა სტატისტიკის საფუძველზე.

ეს პაკეტი მოიცავს შემდეგ შრიფტებს: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. ყველა სუნი მხარს უჭერს კირიულ ანბანს, რაც მნიშვნელოვანია RuNet-ისთვის.

შრიფტების ნაკრები, რომელიც შედის Mac OS X-ის სტანდარტულ ინსტალაციაში (ამ OS-ს აქვს ყველაზე დიდი გაფართოება სტანდარტული Mac OS სისტემებს შორის) მოიცავს ყველა შრიფტს ვებ ნაკრებისთვის Core შრიფტებში.

ამრიგად, Windows შრიფტებზე დაყრდნობით, რომლებიც გამოიყენება სხვა ოპერაციულ სისტემებში, ჩამოყალიბდა ეგრეთ წოდებული "უსაფრთხო" ვებ შრიფტების ახალი სია:

• არიალი
• Arial Black
• Comic Sans MS
• კურიერი ახალი
• საქართველოს
• Გავლენა
• Times New Roman
• Trebuchet MS
• ვერდანა

Webdings შრიფტი შეცდომაში შეჰყავს ხატების აკრეფისას, ასე რომ თქვენ არ შეგიძლიათ გამოიყენოთ იგი შინაარსისთვის. Andale Mono არ საჭიროებს ფართო გამოყენებას, რადგან ის არ არის შესაფერისი ეკრანიდან ტექსტის ყოველდღიური წასაკითხად და არ არის ხელმისაწვდომი Windows-ის ყველა მომხმარებლისთვის.

ყველა ეს შრიფტი ხელმისაწვდომია ყველა Windows, Mac OS X და, რაც მთავარია, Unix/Linux სისტემებზე (მათ, რომლებმაც დააინსტალირეს Core შრიფტები ვებ პაკეტისთვის).

მაგრამ რაც შეეხება მას? ვისურვებდი, რომ დიზაინერის იდეაზე ერთზე მეტმა საუკეთესო ადამიანმა მოახდინოს გავლენა!

ამის შესახებ წაიკითხეთ პუბლიკაციის სხვა ნაწილში.

ამ განყოფილების პირველი ნაწილი ეძღვნება CSS შრიფტების შესწავლას. ამ გვერდზე თქვენ შეისწავლით თუ როგორ უნდა ჩართოთ შრიფტები CSS-მდე, რა არის ვებ ფონტები და როგორ ვიმუშაოთ მათთან, რა ფონტის ფორმატები არსებობს, როგორ გამოიყენება Google Fonts. მოდით შევხედოთ CSS შრიფტის დაკავშირების მარტივ გზას:

P (შრიფტი-ოჯახი: Verdana; )

ეს პატარა კოდი ნიშნავს, რომ ყველა ტეგამდე

Verdana შრიფტი გამკაცრდა. font-family კომპლექტების ძალა ადგენს რომელი შრიფტი ან შრიფტი იქნება გამოყენებული. მომხმარებლის ბრაუზერში ჩვენების სწორი სტილი დამოკიდებულია თქვენს კომპიუტერზე დაინსტალირებული ამოცანის შრიფტის ტიპზე. თუ თქვენს კომპიუტერში გაქვთ ყოველდღიური შრიფტი Verdana, თქვენი ბრაუზერი აჩვენებს შრიფტს და დააინსტალირებს პარამეტრებს.

დღესდღეობით, დიზაინერებს მოუწიათ დამატებითი გამოყენებისთვის სათადარიგო შრიფტების განსაზღვრა, რადგან მომხმარებლის კომპიუტერი არ იქნებოდა მთავარი. შესაძლებელია, რომ გსურთ ტექსტის ფორმატირება Verdana შრიფტით და სარეზერვო ასლის სახით დააინსტალიროთ Trebuchet MS, Geneva ან ნებისმიერი სხვა sans-serif შრიფტი. დარეგისტრირდით ამ გზით:

P (შრიფტი-ოჯახი: Verdana, "Trebuchet MS", ჟენევა, sans-serif;)

ამ კოდის დამუშავებამდე ბრაუზერმა დაუყოვნებლივ უნდა შეამოწმოს Verdana შრიფტის ხელმისაწვდომობა მომხმარებლის კომპიუტერზე. როგორც ახლანდელი შრიფტი, ტეგების ნაცვლად

გამოჩნდება ამ შრიფტით. თუ შრიფტი ყოველდღიურია, ბრაუზერი შეამოწმებს არის თუ არა შრიფტი სიაში – Trebuchet MS. ვინაიდან ეს შრიფტი იგივე ტიპისაა, დამოწმებულია ორიგინალური შრიფტის - Geneva-ს არსებობა. თუ მომხმარებლის კომპიუტერს არ აქვს Geneva, ბრაუზერი შეარჩევს სხვა ხელმისაწვდომ sans-serif შრიფტს და აჩვენებს მასში არსებულ ტექსტს.

პატივისცემის აღდგენა:კოდში ჩავწერეთ ბალიშებში Trebuchet MS შრიფტის სახელი. აუცილებელია შრიფტის სახელწოდების გამოყენება ორმაგი ან ერთი ფეხით, თუ მასში არის გასუფთავება.

ამ შრიფტების შესახებ შეგიძლიათ წაიკითხოთ სერიფებით (serif) და გარეშე (sans-serif) ვიკიპედიის გვერდზე.

ვებ შრიფტი

შრიფტების შერჩევის უკეთესი ხერხის გადატანას დიდი მინუსი აქვს - თქვენ შეზღუდული ხართ შრიფტების რაოდენობით. თქვენ კმაყოფილი დარჩებით მხოლოდ ამ ვარიანტებით, რადგან, სავარაუდოდ, კომპიუტერების უმეტესობა დაინსტალირებულია.

როგორ შეგიძლიათ გაზარდოთ შრიფტების არჩევანი, რომ გვერდის დიზაინი ინდივიდუალური გახდეს და ორიგინალობა შემატოთ? ვებ ფონტები გვეხმარება. წაიკითხეთ ქვემოთ მოცემული განყოფილება და გაიგებთ, როგორ გაუმკლავდეთ მათ.

თუმცა ბრაუზერში საჭირო შრიფტის გამოსატანად გვჭირდება ეს შრიფტი კომპიუტერზე დაინსტალირებული. მოქმედების მიღება ადვილია. CSS-მდე შრიფტების დაკავშირების ეს მეთოდი დიზაინერებს უხსნის შესაძლებლობების ფართო სპექტრს. გავიხსენოთ კოვზი თაფლი თაფლის კასრში: უპირველეს ყოვლისა, ბრაუზერს არ აქვს იგივე ფორმატის მხარდაჭერა შრიფტისთვის (რაც გამოიწვევს შრიფტის არ ჩვენებას) და სხვა გზით, რადგან ფაილი შრიფტი შეიცავს დიდ მნიშვნელობას, შეგიძლიათ დაეხმაროთ საინტერესო მხარეს.

ფორმატების მხარდაჭერა

როგორ გავუმკლავდეთ ფაილის ფორმატთან შეუთავსებლობის პრობლემას? შეხედეთ ცხრილს, სადაც ნაჩვენებია ყველაზე პოპულარული შრიფტის ფორმატები და რომელი ბრაუზერები მხარს უჭერენ მათ:

Შენიშვნა:შეგიძლიათ იპოვოთ უახლესი ინფორმაცია შრიფტის ფორმატების მხარდაჭერის შესახებ ვებსაიტზე caniuse.com. საძიებლად, თქვენ უნდა შეიყვანოთ ფორმატის სახელი (მაგალითად, ttf).

თუ თქვენ მიმართავთ თანამედროვე ბრაუზერებს, მოგიწევთ გამოიყენოთ TTF შრიფტის ფორმატი - ყველაზე ფართო და ყველაზე პოპულარული. და ბოლოს, თუ ერთი შრიფტისთვის რამდენიმე ფორმატი გჭირდებათ, შეგიძლიათ სწრაფად გამოიყენოთ სპეციალური ონლაინ გადამყვანები ერთი ფორმატიდან მეორეზე და შემდეგ დააკავშიროთ ყველა ფაილი მისი მეშვეობით. ამ გზით, ბრაუზერს შეუძლია შეარჩიოს შრიფტის ფორმატი, რომელშიც ის მუშაობს.

ჩვენ ვაერთიანებთ ვებ შრიფტს @font-face-ის გამოყენებით

მაგალითად, თქვენ განათავსებთ თქვენს უნიკალურ შრიფტს სახელწოდებით MyUniqueFont TTF ფორმატში და გსურთ, რომ ვებგვერდის მთავარი ტექსტი გამოჩნდეს ამ შრიფტით. პირველი, რაც უნდა გააკეთოთ, არის შრიფტის ფაილის კოპირება საქაღალდეში, სადაც განთავსებულია ყველა სხვა ფაილი საიტზე. არეულობის თავიდან ასაცილებლად, შეგიძლიათ შექმნათ საქაღალდე სპეციალურად შრიფტებისთვის და მას, მაგალითად, შრიფტებს უწოდოთ.

@font-face ( font-family: MyUniqueFont; src: url ("fonts/MyUniqueFont.ttf"); )

font-family-ის ძალა ამ შემთხვევაში განსხვავებულ როლს ასრულებს: ჩვენ ასევე ვანიჭებთ სახელს შრიფტს, ასე რომ ჩვენ შეგვიძლია გამოვიყენოთ ეს სახელი სტილის დაწერისას:

P (შრიფტი-ოჯახი: MyUniqueFont;)

მეორე სტრიქონი მიუთითებს ფაილის შრიფტისკენ მიმავალ გზაზე. ჩვენს აპლიკაციაში MyUniqueFont.ttf ფაილი მდებარეობს შრიფტების საქაღალდეში. თქვენი URL შეიძლება განსხვავდებოდეს.

Google ფონტები

Google აადვილებს ნებისმიერი შრიფტის Google Fonts კოლექციასთან დაკავშირებას. ყველაფერი რაც თქვენ უნდა გააკეთოთ იმისათვის, რომ დაიწყოთ თქვენთვის შესაფერისი მორგებული შრიფტის გამოყენება არის აკრიფოთ შრიფტი Google-ში, შემდეგ დააკოპიროთ ამ შრიფტის სპეციალური შეტყობინება და დაამატოთ იგი თქვენს ვებ დოკუმენტში.

Შენიშვნა: Google-ის შრიფტების მთელი კოლექცია ხელმისაწვდომია ვებგვერდზე Google ფონტები. გვერდზე შეგიძლიათ სწრაფად გამოიყენოთ სხვადასხვა ფილტრები შრიფტების მოსაძებნად კატეგორიის, პროდუქტის, ანბანის მიხედვით.

Google ფონტთან დაკავშირების პროცედურა აღწერილია ქვემოთ. იმის გასაგებად, თუ რა ხდება, აირჩიეთ შრიფტი Google Fonts გვერდიდან და გახსენით ის სწრაფი გამოყენების ღილაკზე დაწკაპუნებით.

ნაბიჯი 1: აირჩიეთ სურათი

არჩეული შრიფტის გვერდზე ნახავთ დასაჯდომის ვარიანტს, ასევე სიჩქარის ნიშანს, რაც არაფერს ნიშნავს, ვიდრე შრიფტის სითხე. რაც უფრო მეტ სტილს აირჩევთ შრიფტისთვის, მით მეტი დრო დაგჭირდებათ მის სტილისთვის. ამიტომ რეკომენდირებულია აირჩიოთ მხოლოდ იმ გამოსახულების ვარიანტები, რომელთა გამოყენებასაც აპირებთ.

Croc 2: აირჩიეთ ანბანი

შემდეგ გვერდზე შეგიძლიათ აირჩიოთ სიმბოლოების ნაკრები: ლათინური, კირილიცა და ა.შ. შრიფტიდან გამომდინარე, მასში ანბანის ყველა ვარიანტი შეიძლება არ იყოს ხელმისაწვდომი. წინა პუნქტის მსგავსად, უბრალოდ მონიშნეთ სასურველი ანბანის საპირისპირო ველი.

Krok 3: დაამატეთ კოდი საიტზე

პირველი მეთოდი არის იმის უზრუნველყოფა, რომ HTML კოდი გაიგზავნება Google სერვერზე და შრიფტის იმპორტი. თქვენ უნდა დააკოპიროთ კოდის დასრულებული ნაწილი და განათავსოთ იგი ტეგებს შორის თქვენს HTML დოკუმენტში. კონდახი:

...

კიდევ ერთი გზაა შრიფტის დაკავშირება დამატებით @import დირექტივასთან. დასრულებული კოდი შეგიძლიათ იხილოთ სხვა ჩანართში, პუნქტი 3, არჩეული Google შრიფტის გვერდზე. ეს უნდა დაემატოს თქვენი სტილის ფურცლის საფუძველს (წინააღმდეგ შემთხვევაში ფაილი არ იქნება იმპორტირებული). კოდი ასე გამოიყურება:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

პირველი მეთოდის თავისებურება მდგომარეობს იმაში, რომ თქვენ უნდა დაამატოთ შენიშვნები შრიფტს ყოველი გვერდის სათაურზე, სადაც აპირებთ მის რედაქტირებას. ამის გაკეთება მარტივია მცირე რაოდენობის გვერდებზე, მაგრამ პრობლემურია დიდი რესურსებისთვის. კიდევ ერთი ხელით გზა არის ის, რომ კოდი შეიძლება განთავსდეს არსებული სტილის ფურცლის თავზე და შემდეგ ყველა გვერდი, რომლებთანაც არის დაკავშირებული ეს ცხრილი, შეარჩევს საჭირო შრიფტს, რაც საჭიროა დამატებითი @import დირექტივის მიხედვით.

Croc 4: შექმენით სტილი

წამყვანი ხაზების შემდეგ, შეგიძლიათ დაიწყოთ შრიფტის გამკაცრება. როგორ დავწეროთ ეს CSS წესი, თქვენ უკვე დაწერეთ:

P (შრიფტი-ოჯახი: "Roboto", sans-serif; )

ვინაიდან პირველ ეტაპზე თქვენ შეარჩიეთ გამოსახულების რამდენიმე ვარიანტი (მაგალითად, დაამატეთ თამამი შრიფტის ვარიანტი Bold 700), შემდეგ მესამე ეტაპზე კოდი ოდნავ შეიცვლება:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

შრიფტს თამამი გამოსახულების მისაცემად, ჩაწერეთ CSS სტილი ასე:

P (შრიფტი-ოჯახი: "Roboto", sans-serif; შრიფტის წონა: 700; )

Შენიშვნა: Google Fonts-ში შრიფტის სიმკვრივის აღსანიშნავად გამოიყენება მხოლოდ გონებრივი ერთეულები, რომლებიც მერყეობს 100-დან 900-მდე. ამრიგად, ნორმალური სურათი (ხაზების უკან) უდრის 400-ს (ნორმალური), ხოლო სტანდარტული თამამი გამოსახულება უდრის 700-ს. (გაბედული).

Google Fonts სერვისის ძირითადი უპირატესობებია:

• გამოყენების სიმარტივე (შეგიძლიათ გამოიყენოთ სერვისი, როგორც დამწყები, და ყველა საჭირო კოდი გენერირებულია ავტომატურად - არ არის საჭირო მისი კოპირება);
• შრიფტების ხელმისაწვდომობა (არ არის საჭირო მათთვის გადახდა);
• ყველა შრიფტის ფორმატის გადაცემა (ეს ნიშნავს, რომ ბრაუზერს შეუძლია დანიშნოს იგივე შრიფტის ფორმატი, რომლითაც მუშაობს).

სერვისის ნაკლოვანებებს შორის არის შრიფტების მრავალფეროვნება, განსაკუთრებით კირილიცა. საუბრის წინ ინტერნეტში არის სხვა მსგავსი სერვისები, მაგალითად TypeKit (ფასიანი).

ჩანთები

დღეს ჩვენ გვაქვს უამრავი ვარიანტი ორიგინალური და არასტანდარტული შრიფტების ვებ გვერდებთან დასაკავშირებლად. თითოეულ ამ მეთოდს აქვს თავისი დადებითი და უარყოფითი მხარეები. რომელი ვარიანტი უკეთესია, ვიდრე ალტერნატივა, თქვენ თავად უნდა გადაწყვიტოთ. ყველაზე ხშირად საჭიროა სიტუაციაზე დამოკიდებული დარჩენა და სხვადასხვა სიტუაციებში შეიძლება იყოს განსხვავებული მიდგომები. ამ ეტაპზე, თქვენ უბრალოდ უნდა იცოდეთ როგორ შეცვალოთ შრიფტები CSS-ში.