ვლად მერჟევიჩი

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

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

h1 (შრიფტი-ოჯახი: SuperPuperFont;)

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

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

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

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

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

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

მაგიდაზე. 1 ჩამოთვლილია ბრაუზერის ვერსიები და მათ მიერ მხარდაჭერილი შრიფტის ფორმატები.

ჩანართი 1. მხარდაჭერილი ფორმატები

ფორმატი	Internet Explorer	ქრომი	ოპერა	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

ყველაზე მხარდაჭერილი ფორმატი არის TTF. IE 9.0 ვერსიისა და iOS-ის გარდა, ყველა ბრაუზერს ეს მშვენივრად ესმის. ასე რომ, თუ თქვენ გაქვთ შრიფტი ამ ფორმატში და ხელმძღვანელობთ თანამედროვე ბრაუზერები, შემდგომი ქმედება არ არის საჭირო. საკმარისია შემდეგი კოდის სტილში ჩაწერა (მაგალითი 1).

მაგალითი 1: TTF-ის დაკავშირება

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

პირველ რიგში, ჩვენ ვტვირთავთ თავად შრიფტის ფაილს @font-face წესის გამოყენებით. მის შიგნით ვწერთ შრიფტების ოჯახის სახელს font-family პარამეტრის საშუალებით და ფაილისკენ მიმავალ გზას src-ის მეშვეობით. შემდეგი, გამოიყენეთ შრიფტი, როგორც ყოველთვის. ასე რომ, თუ ჩვენ გვჭირდება სათაურის შრიფტის დაყენება, მაშინ h1 სელექტორისთვის, როგორც ნაჩვენებია მაგალითში, ჩვენ ვაყენებთ font-family თვისებას ჩატვირთული შრიფტის სახელით. IE-ს უფრო ძველი ვერსიებისთვის, ჩვენ ჩამოვთვლით მძიმით გამოყოფილი სარეზერვო ასლებს. IN ამ საქმესსათაურის შრიფტი იქნება "Comic Sans MS", რადგან IE8 და ქვემოთ არ აქვს TTF ფორმატის მხარდაჭერა.

ამ მაგალითის შედეგი ნაჩვენებია ნახ. ერთი.

ბრინჯი. 1. სათაური გადმოწერილი შრიფტით

რა მოხდება, თუ უიმედოდ გჭირდება მორთული შრიფტი IE8-ში? საბედნიეროდ, @font-face საშუალებას გაძლევთ ერთდროულად შეიტანოთ მრავალი შრიფტის ფაილი. სხვადასხვა ფორმატში. ბრაუზერს მხოლოდ შესაბამისი უნდა აირჩიოს. ამრიგად, უნივერსალური გადაწყვეტა, რომელიც მუშაობს ყველა ბრაუზერში, მთავრდება არსებული TTF ფორმატის EOT-ად გადაქცევით და შემდეგ ორივე ფაილის ჩათვლით.

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

მივდივართ ამ საიტზე, ვტვირთავთ TTF ფაილს და ვაწკაპუნებთ ღილაკზე "Convert TTF to EOT", რის შემდეგაც მიღებულ ფაილს ვინახავთ შრიფტების საქაღალდეში. სტილში, რჩება პატარა ხრიკის გაკეთება და სხვადასხვა ბრაუზერის მიღება, რომ ჩამოტვირთოთ შრიფტი სწორი ფორმატით. ამისათვის დაამატეთ ორი src პარამეტრი. პირველი მიუთითებს EOT ფაილზე და არის IE-ს ძველი ვერსიებისთვის. მეორე src პარამეტრი უნდა შეიცავდეს ორ მძიმით გამოყოფილ მისამართს, რომელთაგან ერთი მიუთითებს TTF ფაილზე. ფაქტია, რომ IE ვერსია 8.0 და უფრო ახალგაზრდა არ ესმის მძიმით src პარამეტრში და, შესაბამისად, უგულებელყოფს მთელ პარამეტრს. შეიძლება არსებობდეს მართლწერის რამდენიმე ვარიანტი, მაგალითად, გაიმეორეთ url, მიუთითეთ შრიფტის სახელი ლოკალური პარამეტრის შიგნით, ან თუნდაც დაწეროთ არარსებული შრიფტი. თუ ბრაუზერმა ვერ იტვირთება ასეთი შრიფტი, მაშინ ის გადავა სიის მეორეზე და ჩვენ სწორად გვაქვს დაწერილი. მისაღები მართლწერა.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

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

მაგალითი 2: EOT-ის დაკავშირება

HTML5 CSS3 IE Cr Op Sa Fx

პოლიტიკური პროცესის თანამედროვე ელემენტი

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

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

Google ვებ ფონტები

მოსახერხებელი სერვისი, რომელიც ზრუნავს სხვადასხვა შრიფტის ფორმატებისა და ბრაუზერის ვერსიების მხარდაჭერის რუტინაზე, შეგიძლიათ იხილოთ აქ: www.google.com/webfonts. მიუხედავად იმისა, რომ კოლექციაში შედარებით ცოტა განსხვავებული შრიფტია (რამდენიმე ათეულია), ისინი ყველა შერჩეულია ძალიან მაღალი ხარისხის და უფასო საიტებზე გამოსაყენებლად.

შრიფტის არჩევამდე გადართეთ Script მნიშვნელობა კირილიკაზე, შემდეგ ნახავთ ფონტების ჩამონათვალს, რომლებიც მხარს უჭერენ რუსულ ენას (ნახ. 2).

ბრინჯი. 2. Google Web Fonts-ში შრიფტების არჩევა

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

ბრინჯი. 3. გვერდზე დატვირთული ფონტები

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

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

2. @import წესის მეშვეობით. ჩადეთ ეს ხაზი თქვენს CSS ფაილში ზედა.

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

3. JavaScript-ის საშუალებით.

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

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

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

სერვისის ერთ-ერთი მთავარი უპირატესობა ის არის, რომ შრიფტები ინახება TTF, EOT, WOFF, SVG ფორმატებში და იტვირთება ბრაუზერის შემოწმების შემდეგ. ასე რომ, EOT ფორმატი ხელმისაწვდომი იქნება მხოლოდ IE-ს ძველი ვერსიებისთვის.

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

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // ნაჩვენებია ჩემი ესკიზის ზომა?>

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

როგორ ჩავრთოთ შრიფტი Google Fonts-დან

ნაბიჯი 1 - აირჩიეთ შრიფტი

სერვისი Google ფონტებიაქვს ვებ შრიფტების დიდი ნაკრები, რომელიც შეიძლება დაუკავშირდეს პროექტს ერთი ხაზით და დაუყოვნებლივ გამოიყენოს CSS სტილები. სანახავად მხოლოდ კირილიცას შრიფტების შესარჩევად, Script პარამეტრში მარცხნივ ფილტრში აირჩიეთ Cyrillic (კირილიცას) ან Cyrillic Extended (გაფართოებული კირილიცისთვის). ამის შემდეგ, კირილიცას მხარდამჭერი შრიფტები ნაჩვენები იქნება მარჯვნივ.

სწრაფი გამოყენებისთვის დააჭირეთ ღილაკს სწრაფი გამოყენება.

ნაბიჯი 2 - დააყენეთ შრიფტის პარამეტრები

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

ნაბიჯი 3 - კოდი შრიფტის დასაკავშირებლად

მას შემდეგ, რაც ჩვენ ავიღებთ კოდის ხაზს ჩვენს საიტთან დასაკავშირებლად. სტანდარტული ვარიანტი - მესამე მხარის css ფაილის დაკავშირება html-დან, @import ჩანართზე - იქნება ხაზი css ფაილის საშუალებით დასაკავშირებლად და მესამე ვარიანტი Javascript-ისთვის. ამის შემდეგ, კავშირი მზად არის და შეგიძლიათ გამოიყენოთ ეს შრიფტი განლაგებაში. ქვემოთ მოყვანილი ბლოკი აჩვენებს მაგალითს, თუ როგორ უნდა მიმართოთ შრიფტს: font-family: "Open Sans", sans-serif;

ჩვენ ვაყენებთ სიგანეს შრიფტის წონა: 300 პარამეტრი; ან შრიფტის წონა: 400; შრიფტის წონა: 800 დახრილი - შრიფტის სტილის მეშვეობით: დახრილი; .

გამოყენების მაგალითი

შედეგად, თუ ჩვენ ვირჩევთ შრიფტის ჩართვას CSS-ში @import-ის საშუალებით, ჩვენი CSS ფაილი ასე გამოიყურება:

/* შრიფტის კავშირი*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700 italic,300&subset=cyrillic-ext,latin); /* სათაურის სტილის განსაზღვრა h1 */ h1( /* აირჩიეთ დაკავშირებული შრიფტი "Open Sans", როგორც შრიფტი */ font-family: "Open Sans", sans-serif; /* დააყენეთ შრიფტის ზომა 300-ზე, რომელიც შეესატყვისება Light-ს - თხელი ზომისთვის*/ შრიფტის წონა: 300;)

მოგესალმებით ძვირფასო მკითხველებო. დღეს ჩვენ ვისაუბრებთ google fonts-ზე (google web fonts), როგორ გადმოვწეროთ და დაუკავშირდეთ საიტს.

მე მივდივარ საიტზე www.google.com/fonts/, ფილტრში მარჯვნივ, აირჩიეთ: 1. სასურველი კატეგორია, 2. საჭიროების შემთხვევაში, დაალაგეთ ისინი და 3. აირჩიეთ ენა, რომელიც გვჭირდება (თუ გჭირდებათ რუსული შრიფტი მარცხენა მენიუში, აირჩიეთ კირილიკა).

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

ჩამოსატვირთად დააჭირეთ ღილაკს ჩამოტვირთვა.

გადმოწერილი შრიფტის დაკავშირება

დააკოპირეთ არქივში არსებული შრიფტები /fonts საქაღალდეში, რომელიც უნდა იყოს იმავე დირექტორიაში, როგორც თქვენი HTML საიტის /css საქაღალდე.

გადმოწერილი შრიფტების სტანდარტული კავშირიასე გამოიყურება

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") ფორმატი("embedded-opentype"), url_file(namet) .woff") ფორმატი("woff"), url("FontFileName.ttf") ფორმატი("truetype"), url("FontFileName.svg#DSNoteRegular") ფორმატი("svg"); შრიფტის წონა: ნორმალური; შრიფტი -სტილი: ნორმალური;)

ჩემს შემთხვევაში კავშირი ასე გამოიყურება

/* შრიფტის ჩართვის კოდი /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") ფორმატში ("truetype"); font- სტილი: ნორმალური; შრიფტის წონა: ნორმალური;)

თქვენი არჩეული შრიფტის საიტთან დასაკავშირებლად გადადით ჩანართზე ჩანერგვა, იქ ნახავთ დაკავშირების 2 გზას:

1 სტანდარტი

ეს კოდი უნდა დაემატოს განყოფილებას თქვენი HTML დოკუმენტი.

2. @IMPORT

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

Მნიშვნელოვანი. კავშირის მეთოდის მიუხედავად, გამოიყენეთ შემდეგი CSS წესები ამ ოჯახების დასადგენად: font-family: 'Roboto', sans-serif; მეტი ამის შესახებ ქვემოთ.

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

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

როგორ დავაკავშიროთ Google Fonts საიტზე

Წავიდეთ Google სერვისიჩაწერეთ შრიფტი ამ ბმულზე და აირჩიეთ ჩვენთვის საჭირო შრიფტი.
შრიფტების შერჩევა შესაძლებელია ფილტრის საშუალებით. ანუ ჩვენ ვაყენებთ პარამეტრებს და ამით სერვისი პოულობს შრიფტებს შერჩეული პარამეტრებით.

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

თქვენ ასევე უნდა აირჩიოთ კირილიცა, თუ თქვენი საიტი რუსულ ენაზეა: ცირილიცა (კირილიცა) ან ცირიკული გაფართოებული (კირილიცა გაფართოებული).

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

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

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

კიდევ უფრო დაბალი, შეგიძლიათ აირჩიოთ შრიფტის საიტზე დაყენების სამი ვარიანტიდან ერთი: standart, @import ან javascript.

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

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

შემდეგ ვხსნით style.css style ფაილს, ვპოულობთ შესაცვლელი შრიფტს და ვწერთ ახალს. უბრალოდ შეიყვანეთ ახალი შრიფტის სახელი. ჩვენ ჩავსვით Google Fonts შრიფტი ბრჭყალებში, მაგალითად, font-family: "Aladin",Arial,Helvetica,Sans-serif.

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

______________________
გაკვეთილი 204. მაგრამ დანამატის გარეშე

მასალის სპონსორი.
კონდიციონერები ონლაინ მაღაზიაში http://www.technodom.kz/catalog/konditsionery. კონდიციონერები - საუკეთესო საქონელი, გასესხება, დიდი არჩევანი, უნაკლო მომსახურება.

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

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

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

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

Cufon და @font-face

ადრე, მე უკვე დავწერე იმის შესახებ, რომლითაც შეგიძლიათ დაუკავშიროთ არასტანდარტული შრიფტები საიტს. ახლა კი მოდით შევხედოთ უფრო მარტივ გზას - ეს არის @font-face წესი css-ში და თავად შრიფტის ჩატვირთვა Google Fonts-ის შრიფტების მაღაზიიდან.

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

ნებისმიერ შემთხვევაში, Cufon და @font-face ანელებს საიტის ჩატვირთვას, თუმცა არა მნიშვნელოვნად.

Google Fonts-ის გამოყენება ვებსაიტზე

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

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

შრიფტის არჩევა საცავში

რომ არ შემეშინდეს, აგიხსნით - საცავი საცავია, მაგრამ ბურჟუაზიულად :). ასე რომ, მოდით წავიდეთ http://www.google.com/fonts/და მოძებნეთ თქვენთვის შესაფერისი შრიფტი:

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

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

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

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

ქვემოთ მოცემულია პანელი „დისპლეის ტიპის“ არჩევით, აირჩიეთ ლათინური (ლათინური) და კირილიცა (კირილიცა), რომელიც მოგვცემს შესაძლებლობას გამოვხატოთ როგორც ლათინური, ასევე კირილური ასოები:

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

გახსენით თქვენი css ფაილი და ჩაწერეთ სტრიქონი, რომელიც მოგვცა Google-მა:

ესე იგი, Google Fonts-დან ფონტი დავაკავშირეთ საიტზე, ახლა როგორ გამოვიყენოთ?

გამოყენება CSS-ში

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

h1, h2, h3 (შრიფტი-ოჯახი: 'Cuprum', sans-serif;)

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

სულ ეს იყო, გმადლობთ ყურადღებისთვის და მალე გნახავთ.