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

წარმოიდგინეთ რომ გვაქვს შემდეგი ამოცანა:
ვებ-გვერდზე მაგალითისათვის index.html გვაქვს ორი სხვადასხვა ტიპის ტექსტი:
ტექსტი პირველი:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
ტექსტი მეორე:
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
რომელიც უნდა დავწეროთ ორი სხვადასხვა სახის შრიფტით (font), სწორედ ამისათვის გამოიყენება ე.წ. მიმაგრებული ვებ შრიფტები (font) ანუ embedding web fonts.
მათი პოვნა შეიძლება სხვადასხვა სპეციალურ ვებ-გვერდებზე არსებულ მონაცემთა ბაზებში, მაგალითად ერთერთი ასეთი ვებ-გვერდია: https://www.google.com/fonts , სადაც განთავსებული უამრავი სახეობის და ოჯახის შრიფტი (font), რომელთა გამოყენებაც ჩვენ შეგვიძლია ჩვენს ვებ-გვერდზე ტექსტების უფრო დახვეწილად თუ თვალსაჩინოდ დასაწერად.
ასევე შეიძლება გაგიჩნდეთ კითხვა: აქ თუ ვერ ვიპოვე ჩემთვის სასურველი შრიფტი (font) მაშინ როგორ მოვიქცე?
ამისათვის საჭიროა შეხვიდეთ სპეციალური შრიფტის (font) კონვერტაციის ფუნქციით აღჭურვილ ვებ-გვერდზე http://www.fontsquirrel.com/tools/webfont-generator და მოახდინოთ ლოკალური ფოლდერიდან თქვენთვის სასურველი შრიფტის (font) კონვერტაცია.
სამუშაო მაგიდაზე შევქმნათ ფოლდერი სახელით testsite:
2015-01-23 01_10_33-
გავხსნათ ეს ფოლდერი და ამ ფოლდერის შიგნით შევქმნათ ჩვენი სატესტო ვებ-გვერდის გამშვები ფაილი  სახელით index.html
2015-01-23 01_10_33-

ასევე ფოლდერი სახელით css:
2015-01-23 01_10_33-
css ფოლდერის შიგნით, კი შევქმნათ ფაილი სახელით, style.css:
2015-01-23 01_10_33-
გავხსნათ ტექსტის რედაქტორ პროგრამაში, ეს ორივე ფაილი და მასში დავწეროთ შემდეგი:
2015-01-23 01_10_33-

http://jsfiddle.net/wholehat/0m08Lu6p/
გავხსნათ ბრაუზერის საშუალებით ფაილი, index.html
2015-01-23 01_10_33-
როგორ ვხედავთ, გვაქვს ორი სხვადასხვა აბზაცი, სხვადასხვა ტექსტით, ეხლა კი შევიდეთ https://www.google.com/fonts ვებ-გვერდზე:
2015-01-23 01_10_33-
ვიპოვოთ ჩვენთვის სასურველი შრიფტი (font) ჩვენს მიერ სატესტო ვებ-გვერდზე დაწერილი პირველი აბზაცისათვის, მაგალითად შრიფტი (font) სახელით Pacifico :
2015-01-23 01_52_43-Google Fonts
იმისათვის რომ მოვახდინოთ ამ შრიფტის (font) ინტეგრაცია ჩვენს სატესტო ვებ-გვერდზე, დავაკლიკოთ შემდეგ იკონკას:
2015-01-23 01_10_33-
გადავალთ შემდეგ გვერდზე:
2015-01-23 01_10_33-
ამავე გვერდზე ვიპოვოთ ფორმა ნომერი 3:
2015-01-23 01_10_33-
ფორმა Standart -იდან გადავრთოთ, @import tab -ზე:
2015-01-23 01_10_33-
მასში არსებული ტექსტი:
@import url(http://fonts.googleapis.com/css?family=Pacifico);
დავაკოპიროთ ჩვენს style.css ფაილში:
2015-01-23 02_07_17-C__Users_Eldar_Desktop_testsite_css_style.css - Sublime Text
ვიპოვოთ ფორმა ნომერი 4:
2015-01-23 01_10_33-
მასში არსებული შრიფტის (font) -ის სახელი:
font-family: ‘Pacifico’, cursive;
დავწეროთ ჩვენს პირველ აბზაცზე მინიჭებული კლასის აღწერაში style.css ფაილში:
898-323-1
http://jsfiddle.net/wholehat/do0drL3j/
შევინახოთ ცვლილებები და გავხსნათ index.html ფაილი ვებ-ბრაუზერში:
2015-01-23 01_10_33-
როგორც ხედავთ პირველი აბზაცი დავწერეთ ჩვენთვის სასურველი შრიფტით (font), რომელიც შევარჩიეთ https://www.google.com/fonts ვებ-გვერდზე.
ეხლა კი მეორე აბზაცი დავწეროთ ისეთი ფონტით რომელიც წარმოვიდგინოთ რომ ვერ ვიპოვეთ https://www.google.com/fonts -ზე არსებულ შრიფტების (font) მონაცემთა ბაზაში.
მაგალითისათვის შევიდეთ უფასო შრიფტების (font) http://www.1001freefonts.com/ ზე:
2015-01-23 01_10_33-
ვიპოვოთ ჩვენთვის სასურველი შრიფტი (font) და გადმოვიწეროთ ის ჩვენს კომპიუტერში და შევინახოთ სამუშაო მაგიდაზე:
2015-01-23 01_10_33-
2015-01-23 02_35_18-
ამის შემდეგ შევიდეთ შრიფტის (font) კონვერტაციის ვებ-გვერდზე
http://www.fontsquirrel.com/tools/webfont-generator
მოვახდინოთ მისი კონვერტაცია:
პირველი:
ავირჩიოთ შრიფტი (font) ჩველო ლოკალური ფოლდერიდან:
2015-01-23 01_10_33-
2015-01-23 01_10_33-
მეორე:
ავირჩიოთ EXPERT… რეჟიმი
2015-01-23 01_10_33-
მესამე:
ამავე გვერდზე ვიპოვოთ ფორმა CSS:
2015-01-23 01_10_33-
მოვნიშნოთ Base64 Encode და CSS Filename ველში ჩავწეროთ ჩვენთვის სასურველი ამ შრიფტის (font) ნებისმიერი სახელი (იმისათვის რომ განვასხვავოთ ეს შრიფტი (font) სხვა ჩაშენებული შრივტებისაგან, ხშირ შემთხვევაში აქ შრიფტის სახელს ვწერთ):
2015-01-23 01_10_33-
მესამე:
დავეთანხმოთ ვებ-გვერდის სამომხმარებლო შეთანხმებას და გადმოვიწეროთ შრიფტის (font) კონვერტირებული არქივი, შევინახოთ ის სამუშაო მაგიდაზე:
2015-01-23 01_10_33-
2015-01-23 01_10_33-

2015-01-23 01_10_33-
მეოთხე:
გავხსნათ ჩვენი სატესტო ვებ-გვერდის ფოლდერი სახელით testsite:
2015-01-23 01_10_33-
შემდეგ გავხსნათ მასში არსებულ ფოლდერი css და შევქმნათ ფოლდერი სახელით fonts:
2015-01-23 01_10_33-
fonts ფოლდერში, შევქმნათ ფოლდერი, რომელსაც დავარქმევთ შრიფტის (font) სახელს:
2015-01-23 01_10_33-
ფოლდერში სახელით GatsbyFLF -ში, ჩვენს მიერ კონვერტირებული შრიფტის (font) არქივიდან გადმოვიტანოთ შემდეგი ფაილები:
2015-01-23 01_10_33-
შენიშვნა:
ფაილების სახელებს ნუ მიაქცევთ ყურადღებას, ისინი შეიძლება ყოველი გადმოწერის დროს იყოს სხვადასხვა, ყურადღება მიაქციეთ გაფართოებებს:
.eot
.svg
.ttf
.woff
.woff2
ამის შედეგად გავხსნათ, ჩვენი სატესტო ვებ-გვერდის, style.css ფაილი და მასში დავწეროთ შემდეგი:
2015-01-23 01_10_33-


@font-face {
font-family: ‘gatsbyflfregular’;
src: url(‘fonts/GatsbyFLF/fontgatsbyflf.eot’);
src: url(‘fonts/GatsbyFLF/gatsbyflf.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/GatsbyFLF/gatsbyflf.woff2’) format(‘woff2’),
url(‘fonts/GatsbyFLF/gatsbyflf.woff’) format(‘woff’),
url(‘fonts/GatsbyFLF/gatsbyflf.ttf’) format(‘truetype’),
url(‘fonts/GatsbyFLF/gatsbyflf.svg#gatsbyflfregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}


დავაკოპიროთ ხაზი:
font-family: ‘gatsbyflfregular’;
და ჩავწეროთ ის,  ჩვენს მეორე აბზაცზე მინიჭებული კლასის აღწერაში style.css ფაილში:
2015-01-23 01_10_33-
შევინახოთ ყველა ცვლილება და გავხსნათ ჩვენი სატესტო ვებ-გვერდის გამშვები ანუ index.html ფაილი, ვებ-ბრაუზერის დახმარებით:
2015-01-23 01_10_33-
როგორც ვხედავთ, მეორე აბზაცის ტექსტიც დავწერეთ ლოკალურ ფოლდერში შენახული დაკონვერტირებული შრიფტით (font).
ასევე არსებობს მეორე მეთოდი, კონვერტირებული ლოკალური შრიფტის (font) ინტეგრაციისა ვებ-გვერდზე:
გავხსნათ გადმოწერილი შრიფტის (font) კონვერტირებული არქივი, რომელიც შენახული გვაქვს სამუშაო მაგიდაზე:
2015-01-23 01_10_33-
და მასში მოთავსებული ფაილი, სახელით:
GatsbyFLF.css
გადავიტანოთ ჩვენი სატესტო ვებ-გვერდის ფოლდერში სახელით css:
2015-01-23 01_10_33-

მოვახდინოთ GatsbyFLF.css ფაილის იმპორტი, style.css ფაილში:

2015-01-23 01_10_33-

გავხსნათ GatsbyFLF.css ფაილი, ტექსტის რედაქტორ პროგრამაში:

2015-01-23 01_10_33-

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

2015-01-23 01_10_33-

შევინახოთ ცვლილებები და index.html ფაილი გავხსნათ ვებ-ბრაუზერში:

2015-01-23 01_10_33-

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

Advertisements

კომენტარის დატოვება

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / შეცვლა )

Twitter picture

You are commenting using your Twitter account. Log Out / შეცვლა )

Facebook photo

You are commenting using your Facebook account. Log Out / შეცვლა )

Google+ photo

You are commenting using your Google+ account. Log Out / შეცვლა )

Connecting to %s