სტანდარტული ბრაუზერის შრიფტები. უსაფრთხო შრიფტები

ეს სია შეიცავს ყველა მიმდინარე Windows ოპერაციული სისტემისთვის საერთო შრიფტებს (ფაქტობრივად, Windows 98-დან) და მათ ეკვივალენტებს Mac OS-ში. ასეთ შრიფტებს ზოგჯერ უწოდებენ "ბრაუზერის უსაფრთხო შრიფტებს" ( ბრაუზერის უსაფრთხო შრიფტები). ეს არის პატარა საცნობარო წიგნი, რომელსაც ვიყენებ ვებ გვერდების შექმნისას და ვფიქრობ, რომ თქვენთვისაც გამოგადგებათ.

თუ თქვენ ახალი ხართ ვებ დიზაინის სფეროში, შეიძლება ფიქრობთ მსგავსი რამ: „რატომ უნდა შემოვიფარგლო შრიფტების ასეთი მცირე ნაკრებით? მე მაქვს ლამაზი შრიფტების უზარმაზარი კოლექცია!” ფაქტია, რომ ვიზიტორთა ბრაუზერს შეუძლია მხოლოდ იმ შრიფტების ჩვენება, რომლებიც დაინსტალირებულია მისიოპერაციული სისტემა ( დაახლ. მთარგმნელი:ამჟამად, უკვე შესაძლებელია პრაქტიკულად ნებისმიერი შრიფტის გამოყენება CSS 3-ისა და მისი ახალი საკუთრების გამოყენებით გვერდების დიზაინის დროს. @font-face; თუმცა, ყველა ბრაუზერი ჯერ არ უჭერს მხარს ამ ფუნქციას), რაც იმას ნიშნავს ყოველითქვენი გვერდის სტუმარი უნდა იყოს თქვენს მიერ არჩეული შრიფტების მფლობელი. ამიტომ, თქვენ უნდა გამოიყენოთ მხოლოდ შრიფტები, რომლებიც ხელმისაწვდომია თითოეულ ოპერაციულ სისტემაში. საბედნიეროდ, CSS-ს აქვს საკუთრება @font-family, რაც ამარტივებს ამ ამოცანას.

სია

@font-ოჯახის მნიშვნელობა ფანჯრები მაკი ოჯახი
Arial, Helvetica, sans-serif არიალი Arial, Helvetica sans-serif
"Arial Black", გაჯეტი, sans-serif Arial Black Arial Black, გაჯეტი sans-serif
„Comic Sans MS“, კურსორი Comic Sans MS Comic Sans MS 5 კურსორი
„კურიერი ახალი“, კურიერი, მონოსპეისი კურიერი ახალი Courier New, Courier 6 მონოსივრცე
საქართველო, სერიფ საქართველო 1 საქართველოს სერიფი
ზემოქმედება, ნახშირი, sans-serif Გავლენა ზემოქმედება 5, ნახშირი 6 sans-serif
"Lucida Console", მონაკო, მონოსპეისი ლუსიდა კონსოლი მონაკო 5 მონოსივრცე
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode ლუსიდა გრანდე sans-serif
„პალატინო ლინოტიპი“, „წიგნი ანტიკვა“, პალატინო, სერიფ Palatino Linotype, Book Antiqua 3 პალატინო 6 სერიფი
ტაჰომა, ჟენევა, სანსერიფი თაჰომა ჟენევა sans-serif
"Times New Roman", Times, serif Times New Roman ჯერ სერიფი
"Trebuchet MS", Helvetica, sans-serif Trebuchet MS 1 ჰელვეტიკა sans-serif
ვერდანა, ჟენევა, sans-serif ვერდანა ვერდანა, ჟენევა sans-serif
სიმბოლო სიმბოლო 2 სიმბოლო 2 -
ვებდინგები ქსელები 2 ქსელები 2 -
Wingdings, "Zapf Dingbats" ფრთები 2 Zapf Dingbats 2 -
"MS Sans Serif", ჟენევა, sans-serif MS Sans Serif 4 ჟენევა sans-serif
"MS Serif", "New York", serif MS Serif 4 ნიუ-იორკი 6 სერიფი

1 Georgia და Trebuchet MS შრიფტები გამოდის Windows 2000/XP-ით და შედის IE ფონტის პაკეტში (და მართლაც მოყვება Microsoft-ის ბევრ აპლიკაციას), ამიტომ ისინი დაინსტალირებულია Windows 98-ის ბევრ კომპიუტერზე.

2 Symbol შრიფტები ნაჩვენებია მხოლოდ Internet Explorer-ში სხვა ბრაუზერებში, ისინი ჩვეულებრივ იცვლება სტანდარტული შრიფტით (თუმცა, მაგალითად, Symbol font ნაჩვენებია Opera-ში, ხოლო Webdings Safari-ში).

3 Book Antiqua შრიფტი თითქმის იდენტურია Palatino Linotype; Palatino Linotype-ს გააჩნია Windows 2000/XP, ხოლო Book Antiqua-ს გააჩნია Windows 98.

4 გთხოვთ, გაითვალისწინოთ, რომ ეს შრიფტები არ არის TrueType, არამედ bitmap, ამიტომ ისინი შეიძლება ცუდად გამოიყურებოდეს ზოგიერთ ზომებში (ისინი შექმნილია 8, 10, 12, 14, 18 და 24 pt 96 DPI-ზე).

5 ეს შრიფტები მუშაობს მხოლოდ Safari-ში სტანდარტულ სტილში, მაგრამ არ მუშაობს თამამად ან დახრილზე. Comic Sans MS ასევე მუშაობს თამამად, მაგრამ არა დახრილებით. Mac-ის სხვა ბრაუზერები, როგორც ჩანს, კარგად ახდენენ შრიფტის დაკარგული თვისებების ემულაციას (მადლობა Christian Fecteau-ს რჩევისთვის).

6 ეს შრიფტები დაინსტალირებულია Mac-ზე მხოლოდ კლასიკური ინსტალაციის საშუალებით

ეკრანის ანაბეჭდები

  • Mac OS X 10.4.8, Firefox 2.0, ClearType ჩართულია (მადლობა Juris Vecvanags-ს ეკრანის ანაბეჭდისთვის)
  • Mac OS X 10.4.4, Firefox 1.5, ClearType ჩართულია
  • Mac OS X 10.4.11, Safari 3.0.4, ჩართულია ClearType (მადლობა Nolan Gladius-ს სკრინშოტისთვის)
  • Mac OS X 10.4.4, Safari 2.0.3, ClearType ჩართულია (მადლობა ერიკ ზავესკის სკრინშოტისთვის)
  • Windows Vista, Internet Explorer 7, ClearType ჩართულია
  • Windows Vista, Firefox 2.0, ClearType ჩართულია (მადლობა Michiel Bijl-ს სკრინშოტისთვის)

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

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

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

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

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

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

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

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

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

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

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

კლანის გვარები საკვანძო სიტყვებია და არ საჭიროებს ბრჭყალებში ჩასმას.

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

მაგრამ ეს არც ისე მარტივია. მოდი უფრო დეტალურად გათხრა.

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

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

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

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

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

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

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

  1. არიალი
  2. Arial Black
  3. Comic Sans MS
  4. კურიერი ახალი
  5. საქართველოს
  6. Გავლენა
  7. Times New Roman
  8. Trebuchet MS
  9. ვერდანა

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

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

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

კირილიცას მხარდამჭერი შრიფტები

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

ქვემოთ მოცემულია შრიფტების შესაბამისობის ცხრილი.

ფანჯრები MacOS Unix/Linux წინაპართა ოჯახი
Arial Black Helvetica C.Y. Nimbus Sans L სანსერიფი
არიალი Helvetica C.Y. Nimbus Sans L სანსერიფი
Comic Sans MS მონაკო CY * (იხილეთ ქვემოთ) კურსორი
კურიერი ახალი * (იხილეთ ქვემოთ) Nimbus Mono L მონოკოსმოსი
საქართველოს * (იხილეთ ქვემოთ) საუკუნის სასკოლო წიგნი ლ სერიფ
Გავლენა ნახშირი C.Y. * (იხილეთ ქვემოთ) სანსერიფი
Times New Roman Times C.Y. ნიმბუს რომან No9 ლ სერიფ
Trebuchet MS Helvetica C.Y. * (იხილეთ ქვემოთ) სანსერიფი
ვერდანა ჟენევა C.Y. DejaVu Sans სანსერიფი

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

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

სხეული ( შრიფტი-ოჯახი: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )

სხეული (

შრიფტი - ოჯახი: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif;

ეს ჩანაწერი ნიშნავს, რომ თუ მომხმარებელს აქვს Arial შრიფტი (და Windows-ის ყველა მომხმარებელს და Mac OS X-ის ყველა მომხმარებელს აქვს), მაშინ გვერდი გამოჩნდება ამ შრიფტით. თუ მომხმარებელს არ აქვს ეს შრიფტი, მაშინ რუსულენოვანი Mac OS 9 მომხმარებლის გვერდი ზუსტად იქნება ნაჩვენები სტანდარტული სისტემის შრიფტით Helvetica CY, ხოლო Unix/Linux მომხმარებლისთვის ის ნაჩვენები იქნება Nimbus Sans L შრიფტით. , რომელიც დაინსტალირებულია Unix/Linux-ის მომხმარებელთა 90%-ზე. თუ Unix/Linux-ის მომხმარებელი იმ 10%-შია, რომელსაც არ აქვს ეს შრიფტი, მაშინ გვერდი გამოჩნდება სერიფური შრიფტით, რომელიც ნაგულისხმევად არის დაყენებული ვებ გვერდების სანახავად.

გარდა იმისა, რომ ცხრილი ითვალისწინებს Unix/Linux ფონტებს, ასევე არის რაღაც უცნაური CY ხატულა ჩვეულებრივი Helvetica-ს შემდეგ. მოდით გავარკვიოთ რა არის ეს!

Mac OS X-ის გამოშვებამდე ამ სტრიქონს შემდეგი მნიშვნელობა ჰქონდა: Windows-ის მომხმარებლებისთვის ჩვენ ვაჩვენებთ გვერდს Arial-ში, Mac OS 9-ის მომხმარებლებისთვის სტანდარტული Helvetica შრიფტით, დანარჩენს კი სისტემაში ვხედავთ გვერდს. sans-serif შრიფტი, რომელიც კონფიგურირებულია ბრაუზერში ნაგულისხმევად. მაგრამ კიდევ ერთხელ, მნიშვნელოვანი ნიუანსი! სტანდარტული Mac OS 9 Helvetica შრიფტი არ აქვს კირილიცას! რუსულენოვანი გვერდისთვის ეს ნიშნავდა შემდეგს: Windows-ის მომხმარებლებისთვის ჩვენ ვაჩვენებთ Arial გვერდს, Mac OS 9-ის მომხმარებლებისთვის - სტანდარტული Helvetica შრიფტით, რომელიც აჩვენებს წაუკითხავ ინფორმაციას, ხოლო დანარჩენი იხილეთ გვერდი sans-serif სისტემით. ბრაუზერში ნაგულისხმევად კონფიგურირებული შრიფტი.

Mac OS 9-ის მომხმარებლებისთვის ამ ნაკრების სწორად ჩვენებისთვის, არაცირილიზებული Helvetica-ს ნაცვლად, აზრი აქვს მიუთითოთ იგივე სტანდარტული Mac OS 9 შრიფტი Helvetica CY, რომელიც შეიცავს კირილიცას.

მმართველების კითხვა შეიცვალა Mac OS X-ის გამოსვლის შემდეგ. ახლა არის ერთი საერთო სტანდარტული შრიფტი, რომელიც მითითებულია Windows/Mac OS X-ისთვის. და თუ გვინდა, რომ Mac OS 9-ის მომხმარებლებმა დაინახონ დიზაინერის განზრახვა, შრიფტის ხაზში უნდა ჩავრთოთ კირილიცას შემცველი შრიფტი.

ასე რომ, სანამ არ არსებობს უსაფრთხო შრიფტები, არსებობს შრიფტების უსაფრთხო ოჯახები. მათ ასევე უწოდებენ შრიფტის CSS სტეკები. სტანდარტული Windows/Mac OS X შრიფტების გარდა, ეს ხაზები ასევე შეიძლება შეიცავდეს ექვივალენტურ შრიფტებს Mac OS 9-ის სტანდარტული ნაკრებიდან (რომელიც ნაგულისხმევად არ შეიცავს „უსაფრთხო“ შრიფტებს) და საერთო Unix/Linux შრიფტებს.

ნებისმიერი განლაგების დიზაინერი ადრე თუ გვიან ხვდება მომენტს, როდესაც დიზაინერი იყენებს შრიფტს განლაგებაში, რომელიც არ შედის „უსაფრთხო“ შრიფტების სიაში; მაგრამ ეს ჯერ კიდევ არ არის განგაშის მიზეზი! მაგალითად, დიზაინერები ძალიან ხშირად იყენებენ Tahoma შრიფტს განლაგებებზე, რომელიც არ შედის ამ სიაში. შრიფტების სწორად აგებული ხაზი ხსნის არა მხოლოდ Tahoma-ს, არამედ სხვა შრიფტების გამოყენების შესაძლებლობას. დიზაინერების მზარდი რაოდენობა სარგებლობს ამ შესაძლებლობით და კომპეტენტურმა განლაგების დიზაინერმა უნდა იცოდეს ამის შესახებ.

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

ფანჯრები MacOS წინაპართა ოჯახი
ლუსიდა კონსოლი მონაკო მონოკოსმოსი
Lucida Sans Unicode ლუსიდა გრანდე სანსერიფი
თაჰომა ჟენევა C.Y. სანსერიფი

რა მოხდება, თუ კირიული ანბანი არ არის?

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

ფანჯრები MacOS Unix/Linux წინაპართა ოჯახი
Arial Black გაჯეტი Nimbus Sans L სანსერიფი
არიალი ჰელვეტიკა Nimbus Sans L სანსერიფი
Comic Sans MS მონაკო TSCu_Comic კურსორი
კურიერი ახალი კურიერი Nimbus Mono L მონოკოსმოსი
საქართველოს * (იხილეთ ქვემოთ) საუკუნის სასკოლო წიგნი ლ სერიფ
Გავლენა ნახშირი რეხა სანსერიფი
Times New Roman ჯერ ნიმბუს რომან No9 ლ სერიფ
Trebuchet MS ჰელვეტიკა გარუდა სანსერიფი
ვერდანა ჟენევა DejaVu Sans სანსერიფი

Arial, Courier New და Times New Roman შრიფტებისთვის სახაზოების შექმნისას უმჯობესია მიუთითოთ ჯერ Unix/Linux ფონტი, შემდეგ კი Mac OS. ეს გამოწვეულია Linux X11 ძირითადი შრიფტების ნაკრების გარკვეული უხამსობით.

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

ფანჯრები MacOS Unix/Linux წინაპართა ოჯახი
ლუსიდა კონსოლი მონაკო - მონოკოსმოსი
Lucida Sans Unicode ლუსიდა გრანდე გარუდა სანსერიფი
პალატინოს ლინოტიპი პალატინო გარუდა** სანსერიფი
თაჰომა ჟენევა კალიმათი სანსერიფი

Unix/Linux-ის სვეტში ტირე მიუთითებს, რომ ამ ოპერაციული სისტემების მომხმარებლები, სავარაუდოდ, დაინახავენ ნაგულისხმევ შრიფტს გვერდზე.

** ამ სტრიქონში აზრი აქვს Garuda შრიფტის განთავსებას Palatino-მდე (იხ. განმარტება ზემოთ).

დასკვნები:

  1. აბსოლუტურად უსაფრთხო შრიფტები არ არსებობს. შემდეგი შრიფტები შეიძლება ჩაითვალოს პირობითად უსაფრთხო:
    • არიალი
    • Arial Black
    • Comic Sans MS
    • კურიერი ახალი
    • საქართველოს
    • Გავლენა
    • Times New Roman
    • Trebuchet MS
    • ვერდანა
  2. უსაფრთხო CSS სტეკები, რომლებიც ითვალისწინებენ შრიფტებში კირიული ანბანის მხარდაჭერას, შეგიძლიათ იხილოთ სტატიაში.
  3. თუ კირიული ანბანის მხარდაჭერა არ არის მნიშვნელოვანი გვერდზე, ჩვენ ვიყენებთ სტატიიდან CSS სტეკებს.
ეს სია შეიცავს ყველა მიმდინარე Windows ოპერაციული სისტემისთვის საერთო შრიფტებს (ფაქტობრივად, Windows 98-დან) და მათ ეკვივალენტებს Mac OS-ში. ასეთ შრიფტებს ზოგჯერ უწოდებენ "ბრაუზერის უსაფრთხო შრიფტებს" ( ბრაუზერის უსაფრთხო შრიფტები). ეს არის პატარა საცნობარო წიგნი, რომელსაც ვიყენებ ვებ გვერდების შექმნისას და ვფიქრობ, რომ თქვენთვისაც გამოგადგებათ.

თუ თქვენ ახალი ხართ ვებ დიზაინის სფეროში, შეიძლება ფიქრობთ მსგავსი რამ: „რატომ უნდა შემოვიფარგლო შრიფტების ასეთი მცირე ნაკრებით? მე მაქვს ლამაზი შრიფტების უზარმაზარი კოლექცია!” ფაქტია, რომ ვიზიტორთა ბრაუზერს შეუძლია მხოლოდ იმ შრიფტების ჩვენება, რომლებიც დაინსტალირებულია მისიოპერაციული სისტემა ( დაახლ. მთარგმნელი:ამჟამად უკვე შესაძლებელია პრაქტიკულად ნებისმიერი შრიფტის გამოყენება გვერდების და მისი ახალი საკუთრების დიზაინის დროს @font-face; თუმცა, ყველა ბრაუზერი ჯერ არ უჭერს მხარს ამ ფუნქციას), რაც იმას ნიშნავს ყოველითქვენი გვერდის სტუმარი უნდა იყოს თქვენს მიერ არჩეული შრიფტების მფლობელი. ამიტომ, თქვენ უნდა გამოიყენოთ მხოლოდ შრიფტები, რომლებიც ხელმისაწვდომია თითოეულ ოპერაციულ სისტემაში. საბედნიეროდ, CSS-ს აქვს საკუთრება @font-family, რაც ამარტივებს ამ ამოცანას.

სია

@font-ოჯახის მნიშვნელობა ფანჯრები მაკი ოჯახი
Arial, Helvetica, sans-serif არიალი Arial, Helvetica sans-serif
"Arial Black", გაჯეტი, sans-serif Arial Black Arial Black, გაჯეტი sans-serif
„Comic Sans MS“, კურსორი Comic Sans MS Comic Sans MS 5 კურსორი
„კურიერი ახალი“, კურიერი, მონოსპეისი კურიერი ახალი Courier New, Courier 6 მონოსივრცე
საქართველო, სერიფ საქართველო 1 საქართველოს სერიფი
ზემოქმედება, ნახშირი, sans-serif Გავლენა ზემოქმედება 5, ნახშირი 6 sans-serif
"Lucida Console", მონაკო, მონოსპეისი ლუსიდა კონსოლი მონაკო 5 მონოსივრცე
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode ლუსიდა გრანდე sans-serif
„პალატინო ლინოტიპი“, „წიგნი ანტიკვა“, პალატინო, სერიფ Palatino Linotype, Book Antiqua 3 პალატინო 6 სერიფი
ტაჰომა, ჟენევა, სანსერიფი თაჰომა ჟენევა sans-serif
"Times New Roman", Times, serif Times New Roman ჯერ სერიფი
"Trebuchet MS", Helvetica, sans-serif Trebuchet MS 1 ჰელვეტიკა sans-serif
ვერდანა, ჟენევა, sans-serif ვერდანა ვერდანა, ჟენევა sans-serif
სიმბოლო სიმბოლო 2 სიმბოლო 2 -
ვებდინგები ქსელები 2 ქსელები 2 -
Wingdings, "Zapf Dingbats" ფრთები 2 Zapf Dingbats 2 -
"MS Sans Serif", ჟენევა, sans-serif MS Sans Serif 4 ჟენევა sans-serif
"MS Serif", "New York", serif MS Serif 4 ნიუ-იორკი 6 სერიფი

1 Georgia და Trebuchet MS შრიფტები გამოდის Windows 2000/XP-ით და შედის IE ფონტის პაკეტში (და მართლაც მოყვება Microsoft-ის ბევრ აპლიკაციას), ამიტომ ისინი დაინსტალირებულია Windows 98-ის ბევრ კომპიუტერზე.

2 Symbol შრიფტები ნაჩვენებია მხოლოდ Internet Explorer-ში სხვა ბრაუზერებში, ისინი ჩვეულებრივ იცვლება სტანდარტული შრიფტით (თუმცა, მაგალითად, Symbol font ნაჩვენებია Opera-ში, ხოლო Webdings Safari-ში).

3 Book Antiqua შრიფტი თითქმის იდენტურია Palatino Linotype; Palatino Linotype-ს გააჩნია Windows 2000/XP, ხოლო Book Antiqua-ს გააჩნია Windows 98.

4 გთხოვთ, გაითვალისწინოთ, რომ ეს შრიფტები არ არის TrueType, არამედ bitmap, ამიტომ ისინი შეიძლება ცუდად გამოიყურებოდეს ზოგიერთ ზომებში (ისინი შექმნილია 8, 10, 12, 14, 18 და 24 pt 96 DPI-ზე).

5 ეს შრიფტები მუშაობს მხოლოდ Safari-ში სტანდარტულ სტილში, მაგრამ არ მუშაობს თამამად ან დახრილზე. Comic Sans MS ასევე მუშაობს თამამად, მაგრამ არა დახრილებით. Mac-ის სხვა ბრაუზერები, როგორც ჩანს, კარგად ახდენენ შრიფტის დაკარგული თვისებების ემულაციას (მადლობა Christian Fecteau-ს რჩევისთვის).

6 ეს შრიფტები დაინსტალირებულია Mac-ზე მხოლოდ კლასიკური ინსტალაციის საშუალებით

ეკრანის ანაბეჭდები

  • Mac OS X 10.4.8, Firefox 2.0, ClearType ჩართულია (მადლობა Juris Vecvanags-ს ეკრანის ანაბეჭდისთვის)
  • Mac OS X 10.4.4, Firefox 1.5, ClearType ჩართულია
  • Mac OS X 10.4.11, Safari 3.0.4, ჩართულია ClearType (მადლობა Nolan Gladius-ს სკრინშოტისთვის)
  • Mac OS X 10.4.4, Safari 2.0.3, ClearType ჩართულია (მადლობა ერიკ ზავესკის სკრინშოტისთვის)
  • Windows Vista, Internet Explorer 7, ClearType ჩართულია
  • Windows Vista, Firefox 2.0, ClearType ჩართულია (მადლობა Michiel Bijl-ს სკრინშოტისთვის)

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

სისტემა, სტანდარტული, უსაფრთხო შრიფტები

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

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

მაგრამ პრობლემა ის არის, რომ სხვადასხვა ოპერაციულ სისტემას აქვს დაინსტალირებული შრიფტების სხვადასხვა ნაკრები. თქვენ შეგიძლიათ ნახოთ მოწოდებული შრიფტების ნაკრები ოპერაციულ სისტემასთან ერთად Windows და Mac OS-ის ოფიციალურ გვერდებზე. Unix/Linux-ში კი სტანდარტული ნაკრები საერთოდ არ არის.

იმისათვის, რომ ინტერნეტ გვერდი გამოჩნდეს დიზაინერის იდეის შესაბამისად, CSS-ში დაინსტალირდა შრიფტის თვისება სახელწოდებით font-family.

შრიფტი-ოჯახის საკუთრება

font-family საკუთრება არის შრიფტების ოჯახები, რომლებიც დაჯგუფებულია გარკვეული მახასიათებლებით.

ზოგადი ოჯახები:

  • serif - შრიფტები ბოლოებში სერიფებით;
  • sans-serif - sans-serif fonts;
  • კურსორი - დახრილი შრიფტები;
  • ფანტაზია - დეკორატიული შრიფტები;
  • monospace - monospace შრიფტი (იგივე სიგანის ასოებით).

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

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

უბრალოდ მიჰყევით ლოგიკას და ყველაფერი ნათელი გახდება.

ტექსტი (შრიფტი-ოჯახი: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )

ვნახოთ რა ეწერა:

  • OS Windows - Arial;
  • OC Mac OS - Helvetica CY;
  • OC Unix/Linux - Nimbus Sans L;
  • გენერიკული ოჯახი - sans-serif.

უსაფრთხო შრიფტები ე.წ

OS Windows-ზე დაყრდნობით, შედგენილია რამდენიმე უსაფრთხო შრიფტის სია.

  1. არიალი
  2. Arial Black
  3. Comic Sans MS
  4. კურიერი ახალი
  5. საქართველოს
  6. Გავლენა
  7. Times New Roman
  8. Trebuchet MS
  9. ვერდანა

ყველა ეს შრიფტი დაინსტალირებულია Mac OS X-ზე, Windows-ზე და Unix/Linux-ის ბევრ მომხმარებელზე, რომლებსაც აქვთ დაინსტალირებული ძირითადი შრიფტები ვებ პაკეტისთვის.

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

შესაბამისობის ცხრილი და შრიფტების მიკუთვნება კონკრეტულ ოჯახს:

ფანჯრებიMacOSUnix/Linuxწინაპართა ოჯახი
Arial BlackHelvetica C.Y.Nimbus Sans Lსანსერიფი
არიალიHelvetica C.Y.Nimbus Sans Lსანსერიფი
Comic Sans MSმონაკო CY* (იხილეთ ქვემოთ)კურსორი
კურიერი ახალი* (იხილეთ ქვემოთ)Nimbus Mono Lმონოკოსმოსი
საქართველოს* (იხილეთ ქვემოთ)საუკუნის სასკოლო წიგნი ლსერიფ
Გავლენანახშირი C.Y.* (იხილეთ ქვემოთ)სანსერიფი
Times New RomanTimes C.Y.ნიმბუს რომან No9 ლსერიფ
Trebuchet MSHelvetica C.Y.* (იხილეთ ქვემოთ)სანსერიფი
ვერდანაჟენევა C.Y.DejaVu Sansსანსერიფი

* შრიფტების დაკავშირებისას შეგიძლიათ უსაფრთხოდ დაეყრდნოთ მას. ცხრილი მხარს უჭერს კირილიცას და რუსულ ანბანს.
მე თვითონ ავიღე ცხრილი ამ სტატიაში.

სისტემის შრიფტების დაკავშირება საიტთან

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

შრიფტების დაკავშირება CSS ფაილში

თუ დაკავშირება გჭირდებათ ძირითადი შრიფტი მთელი დოკუმენტისთვის, თქვენ უბრალოდ უნდა დაამატოთ შემდეგი კოდი სტილის ფურცელში:

ტექსტი ( შრიფტი-ოჯახი: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* დააკავშირეთ შრიფტი მთელ დოკუმენტთან */ შრიფტის ზომა: 16 პიქსელი; /* დამატებით დააყენეთ შრიფტის ზომა */ შრიფტი -weight: 400 /* დააყენეთ შრიფტის წონა, ან 400-ის ნაცვლად დააყენეთ მნიშვნელობა ნორმაზე */ )

სათაურებისთვის შრიფტის მინიჭება H1, H2, H3, H4, H5, H6, (აქ იგივეა, ჩვენ უბრალოდ დავაყენეთ თამამი მნიშვნელობა სათაურების ხაზგასასმელად):

H1,h2,h3,h4,h5,h6( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* დააკავშირეთ შრიფტი სათაურებთან */ font-weight: 600; / * დააყენეთ შრიფტის წონა, ან 600-ის ნაცვლად დააყენეთ მნიშვნელობა თამამად */ )

ჩვენ ვანიჭებთ შრიფტს მხოლოდ აბზაცებს:

P( შრიფტი-ოჯახი: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* შრიფტის დაკავშირება აბზაცებთან, შეიძლება გამოყენებულ იქნას li სიებში, div ბლოკებზე, ფორმებსა და სხვა ელემენტებზე */ font-weight : ნორმალური;

რომ მივანიჭოთ შრიფტი მხოლოდ კონკრეტულ აბზაცს, ან დაბლოკოთ, ჯერ ამ ბლოკს უნდა მიაკუთვნოთ კლასი HTML დოკუმენტში

აქ არის აბზაცი მორგებული შრიფტით

და CSS ცხრილში ჩაწერეთ შემდეგი კოდი:

შრიფტი (შრიფტი-ოჯახი: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* ჩვენ ვუკავშირდებით შრიფტს გარკვეულ აბზაცებთან, შეიძლება გამოვიყენოთ ცალკეულ li სიებში, div ბლოკებზე, ფორმებსა და სხვა ელემენტებზე */ შრიფტის წონა: /* დააყენეთ შრიფტის წონა, ან 600-ის ნაცვლად, დააყენეთ მნიშვნელობა: 16px, დამატებით დააყენეთ შრიფტის ზომა */

ახლა, თითოეულ ტეგს - html ელემენტს .font კლასით (დაარქვით როგორც გინდათ) მიენიჭება Arial შრიფტი, ნორმალური (400), გამბედაობა და 16 პიქსელი ზომით.
ანალოგიურად, შეგიძლიათ სხვადასხვა შრიფტები მიანიჭოთ li სიებს, ცხრილებს, მთლიან div ბლოკებს, ცალკეულ სიტყვებს ან ფრაზებს.

შრიფტების დაკავშირება HTML დოკუმენტში

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

სათაურში შრიფტების ჩათვლით, ტეგებს შორის . ამისათვის დაამატეთ შემდეგი კოდი html დოკუმენტში:

აქ არ გავიმეორებ. ყველაფერი მსგავსია CSS ფაილში კავშირთან.

შრიფტების შიდა დაკავშირება, პირდაპირ საიტის ელემენტებზე. ნება მომეცით მოგცეთ რამდენიმე მაგალითი:

შრიფტის დაკავშირება აბზაცთან

აქ არის აბზაცი ტექსტით

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

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

აი ლინკი

ანალოგიურად, ჩვენ ვანიჭებთ შრიფტებს ნებისმიერ html ტეგს.

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

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



გაქვთ შეკითხვები?

შეატყობინეთ შეცდომას

ტექსტი, რომელიც გაეგზავნება ჩვენს რედაქტორებს: