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

სერვისი

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

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

გარეგნობა

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

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

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

შესაძლებლობა

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

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

რჩეულები

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

ხედი

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

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

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

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

კავშირი

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

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

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

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

პოპულარული ვარიანტები

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

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

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

ცუდი სკრიპტი ასევე არის ბლოგების ვარიანტი. დახრილი ტიპი რთულია დიდი რაოდენობით ტექსტის წაკითხვა, მაგრამ მას შეუძლია ხაზი გაუსვას მთავარ იდეას. სტილი ბაძავს ხელწერას. Jura normal 400 საინტერესო ვარიანტია კირიული ანბანისთვის. ავტორი ირწმუნება, რომ ეს არის ევროსტილი Sans Serif ოჯახიდან. ის მართლაც ძალიან კარგად გამოიყურება და რამდენიმე ვარიაცია აქვს.

მასალის სპონსორი.
კონდიციონერები ონლაინ მაღაზიაში 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-ის გამოყენება ვებსაიტზე

ბევრს არ დავწერ და კიდევ დიდხანს მოგიყვან 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;)

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

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

მოგესალმებით, ძვირფასო მკითხველებო. დღეს ვისაუბრებთ 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(namet) .woff") ფორმატი("woff"), url("Font_file_name.ttf") ფორმატი("truetype"), url("Font_file_name.svg#DSNoteRegular") ფორმატი("svg"); შრიფტის წონა: ნორმალური; შრიფტი - სტილი: ნორმალური)

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

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

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

1.სტანდარტი

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

2. @IMPORT

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

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

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

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

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

ფაილის ფორმატები

შრიფტების დასაკავშირებლად გამოიყენება პროგრამული უზრუნველყოფის ჩასმა CSS-ში, ე.წ. @-rule. ასე რომ, შიგნით უმარტივესი ფორმა@font-face არის ასეთი დეკლარაცია. ეს ასე გამოიყურება:

/* გამოაცხადეთ შრიფტი */ @font-face ( font-family: "Font name"; src: url("path/to/it"); ) /* გამოიყენეთ შრიფტი */ p ( font-family: "Font" სახელი ", Arial)
TTF ან OTF - ჩვენთვის ნაცნობი შრიფტის ფაილი, რომელიც გადმოწერილია სერვერიდან საიტის ნახვისას;

WOFF არის დაუცველი OTF ან TTF წყაროს არქივი, ალბათ ყველაზე მნიშვნელოვანი ფორმატი, რომელსაც უჭერს მხარს ყველაზე პოპულარული ბრაუზერები და WOFF-ში ფაილები ჩვეულებრივ 2–2,5-ჯერ მსუბუქია, ვიდრე ორიგინალი;

EOT - TT OpenType-ის მიერ დანერგილი არქივი, რომელსაც აქვს უსაფრთხოების მექანიზმები, რომლებიც საჭიროა ძველი ბრაუზერების მხარდასაჭერად. Internet Explorer(IE8-დან დაწყებული, გარდა TrueType მოსახვევებისა, მხარდაჭერილია PostScript-იც);

SVG - Safari ბრაუზერის მხარდასაჭერად.

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

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot? #iefix") ფორმატი ("embedded-opentype"), url(namet) .woff") ფორმატი("woff"), url("Font_file_name.ttf") ფორმატი("truetype"), url("Font_file_name.svg#DSNoteRegular") ფორმატი("svg"); შრიფტის წონა: ნორმალური; შრიფტი - სტილი: ნორმალური)
თუ გსურთ ფაილის ნაცვლად დაშიფრული კოდის გამოყენება, ამ შემთხვევაში გვეხმარება base64, რომელიც მუშაობს იმავე პრინციპით სურათებით, მაგრამ ძველი IE-სთვის base64 არ არის დამუშავებული.

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); ) @font-face (font-family: "Font_name_any"; src: url(data:font/woff;charset= utf-8;base64,DATA) ფორმატი("woff"), url(data:font/truetype;charset=utf-8;base64,DATA) ფორმატი("truetype"), url("Font_file_name.svg#Font_file_name") ფორმატი ("svg");

ჩაშენებული OpenType?

როგორც თქვენ შენიშნეთ, IE-ს დანამატის შრიფტებს აქვთ ხაზი შემდეგი პარამეტრით:

Src: url("Font_file_name.eot?#iefix") ფორმატი ("embedded-opentype")
კლასიკურ ვერსიაში ეს უნდა მოგვენიშნა:

Src: url("Font_file_name.eot") ფორმატი ("embedded-opentype")
მაგრამ როდესაც დაამატებთ "?" შრიფტის ფორმატის შემდეგ ვაიძულებთ ბრაუზერს არ წაიკითხოს შემდგომი ინსტრუქცია - format("embedded-opentype"). Internet Explorer მხარს უჭერს შრიფტების ჩანერგვას ეგრეთ წოდებული საკუთრების ჩაშენებული OpenType სტანდარტის მეშვეობით, დაწყებული IE 4.0 ვერსიით. ის იყენებს ციფრული უფლებების მართვის ტექნიკას, რათა თავიდან აიცილოს ლიცენზირებული შრიფტების კოპირება.

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

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

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

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

3. სხვა გამოსავალი არის Javascript-ის გამოყენებითტექსტის ჩანაცვლება VML-ით (Internet Explorer-ისთვის) ან SVG-ით (ყველა სხვა ბრაუზერისთვის).

სხვა რა პრობლემები შეიძლება წარმოიშვას?

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

ფლეშის ეფექტი

FOIT ეფექტი ბრაუზერებში, როგორიცაა Safari, Chrome, Opera, Firefox, ახასიათებს ტექსტის დამალვას მაქსიმუმ 30 წამით, სანამ უარს იტყვის შრიფტის მიღებაზე, რის შემდეგაც დაყენებულია ნაგულისხმევი შრიფტი.

მაგალითი იმისა, თუ როგორ იტვირთება შრიფტი:

და მაინც, 2,7 წამი დიდი დროა!

რა შეიძლება გაკეთდეს?

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

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

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

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

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

ვცადოთ

ანალიზი

სტანდარტული კავშირი Google-ისგან

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

ვებ შრიფტის ჩამტვირთავი Google-ისგან

Web Font Loader არის JavaScript ბიბლიოთეკა გაფართოებული API მუშაობისთვის, ბიბლიოთეკა, რომელიც გვაძლევს მეტ კონტროლს შრიფტების ჩატვირთვაზე, ვიდრე სტანდარტული Google Fonts API. სკრიპტი საშუალებას გვაძლევს გამოვიყენოთ მრავალი შრიფტი, ჩატვირთოთ ისინი თანმიმდევრულად ან ასინქრონულად. სტანდარტული კავშირისგან განსხვავებით, სუსტი კავშირები აჩვენებს ტექსტს სტანდარტული შრიფტით, სანამ შრიფტი არ ჩაიტვირთება.
ჩატვირთვის მთლიანი დრო: 1132 ms

FontFaceObserver

FontFaceObserver არის JavaScript ბიბლიოთეკა (5kb), ეგრეთ წოდებული ჩამტვირთავი, რომელიც თავსებადია ნებისმიერი ვებ შრიფტის სერვისთან. სკრიპტი საშუალებას გვაძლევს შეგვატყობინოთ, ჩატვირთულია თუ არა შრიფტი, საშუალებას გვაძლევს თვალყური ადევნოთ მოვლენას ჩატვირთვის შემდეგ და ფონტის ჩატვირთვამდე. მთლიანი ჩატვირთვის დრო: 159 ms

სკრიპტის გამოყენება.

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

თავად ნახეთ:

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

მაგრამ როგორ დააკავშიროთ ნებისმიერი შრიფტი საიტთან და გამოიყენოთ ისინი სადაც გინდათ?

ამ სტატიაში მე მე გაჩვენებ 3 გზას, რომლითაც შეგიძლიათ თქვენს ვებსაიტს დაუკავშიროთ ნებისმიერი, ყველაზე მრავალფეროვანი და არასტანდარტული შრიფტი. და არ აქვს მნიშვნელობა რომელ CMS-ს იყენებთ: WordPress, Joomla, Drupal თუ Open Cart.

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

თქვენ შეისწავლით:

მეთოდი ნომერი 1. შრიფტების სწრაფად დაკავშირება WordPress საიტთან (სირთულე: ⭐ ⭐ ⭐)

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

მაგალითად:

გსურთ შეცვალოთ თქვენი სტატიის სათაურის შრიფტი. ამისათვის:

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

2. გადადით ტიპოგრაფიის განყოფილებაში.

3. აირჩიეთ ელემენტი, რომლის შრიფტიც გსურთ შეცვალოთ (სათაურები, აბზაცები):

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

მეთოდი No2. გამოიყენეთ Google Fonts-ის ძალა
(სირთულე: ⭐ ⭐ ⭐ ⭐)

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

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

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

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

ნაბიჯი 3. წარმოვიდგინოთ, რომ მოგწონთ Roboto შრიფტი. დააჭირეთ "+" ხატულას:

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

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

მორგების ჩანართზე გადასვლით შეგიძლიათ აირჩიოთ სტილი და ენა. რაც შეეხება სტილებს, გირჩევთ აირჩიოთ სტანდარტული ნაკრები - ნორმალური (400), დახრილი (400 დახრილი), თამამი (700) და დახრილი-მამამი (მამამი 700 დახრილი):

მაგრამ თუ თქვენ გჭირდებათ მხოლოდ თამამი სტილი (სათაურებისთვის), აირჩიეთ მხოლოდ ეს.

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

საიტის ჩატვირთვის სიჩქარის შენელების თავიდან ასაცილებლად, აირჩიეთ რაც შეიძლება ნაკლები შრიფტის სტილი.

ნაბიჯი 5. დაბრუნდით Embed განყოფილებაში და აირჩიეთ @IMPORT ჩანართი. შემდეგი, დააკოპირეთ კოდის ხაზი, რომელიც შეიცავს "@import" და ჩასვით იგი თქვენი საიტის CSS ფაილის პირველ სტრიქონზე:

თუ თქვენ გაქვთ WordPress საიტი, CSS ფაილი სავარაუდოდ აქ მდებარეობს: wp_content/themes/"Yourtheme"/css/...სავარაუდოდ, იქნება Fonts ფაილი CSS საქაღალდეში, სადაც უნდა გადაიტანოთ ჩაშენებული კოდი Google-იდან:

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

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

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

მაგალითად:

ყველა აბზაცს Roboto შრიფტის მისაცემად, დავწერ შემდეგს: p ( font-family: Roboto;)

მეთოდი ნომერი 3. პერსონალური შრიფტის კავშირი CSS-ის გამოყენებით (სირთულე: ⭐ ⭐ ⭐ ⭐ ⭐)

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

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

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

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

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

ნაბიჯი 2. მარჯვენა მენიუში, ენების განყოფილებაში აირჩიეთ კირილიცა.

ნაბიჯი 3. იპოვნეთ შესაფერისი შრიფტი. ყურადღება მიაქციეთ სტილის რაოდენობას.

მაგალითად, თუ არის 4 სტილი, დაიწერება 4 სტილი:

შრიფტის სტილის აღნიშვნა - ნორმალური (400/რეგულარული), დახრილი (დახრილი), სქელი (700/მუქი), სქელი დახრილი (700 დახრილი).

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

ნაბიჯი 6. გადადით Webfont Kit განყოფილებაში. აირჩიეთ ყველა შრიფტის ფორმატი და დააწკაპუნეთ Download @FONT-FACE KIT. თუ მხოლოდ 1-2 ფორმატია ხელმისაწვდომი, პრობლემა არ არის.

შრიფტების დასაკავშირებლად ვიყენებთ @Font-face

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

დადებითი:

• CSS-ის საშუალებით შეგიძლიათ დააკავშიროთ ნებისმიერი ფორმატის შრიფტები: ttf, otf, woff, svg.
• შრიფტის ფაილები განთავსდება თქვენს სერვერზე - თქვენ არ იქნებით დამოკიდებული მესამე მხარის სერვისებზე.

მინუსები:

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

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

ნაბიჯი 1. გადმოწერილი შრიფტის ფაილების გადატანა თქვენს ვებსაიტზე. ეს შეიძლება გაკეთდეს თქვენი ჰოსტინგის მართვის პანელის ან FTP-ის საშუალებით.

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

ნაბიჯი 2. ჩაწერეთ შემდეგი ჩანაწერი CSS ფაილის დასაწყისში:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") ფორმატი("eot"),
url("../fonts/WebFont.woff") ფორმატი("woff"),
url("../fonts/WebFont.ttf") ფორმატი ("truetype"),
url("../fonts/WebFont.svg#webfont") ფორმატი("svg");
შრიფტის წონა: ნორმალური;
შრიფტის სტილი: ნორმალური;
}

სადაც MyWebFont არის შრიფტის სახელი, ხოლო src თვისების მნიშვნელობა (მონაცემები ბრჭყალებში ფრჩხილებში) არის მათი მდებარეობა (ნათესავი ბმულები). თითოეული სტილი ცალკე უნდა მივუთითოთ.

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

ნაბიჯი 3. დახრილის დამატებისას დაწერეთ შემდეგი:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") ფორმატი("eot"),
url("../fonts/WebFont-Italic.woff") ფორმატი("woff"),
url("../fonts/WebFont-Italic.ttf") ფორმატი ("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") ფორმატი("svg");
შრიფტის წონა: ნორმალური;
შრიფტის სტილი: დახრილი;
}

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

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

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") ფორმატი("eot"),
url("../fonts/WebFont-Bold.woff") ფორმატი("woff"),
url ("../fonts/WebFont-Bold.ttf") ფორმატი ("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") ფორმატი("svg");
შრიფტის წონა: თამამი;
შრიფტის სტილი: ნორმალური;
}

სადაც ჩვენ ვაყენებთ font-weight თვისებას თამამად.

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

ნაბიჯი 5. თამამი დახრილი სტილის დასამატებლად, შეიყვანეთ შემდეგი:

@font-face(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") ფორმატი("eot"),
url("../fonts/WebFont-Italic-Bold.woff") ფორმატი("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") ფორმატი ("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") ფორმატი("svg");
შრიფტის წონა: თამამი;
შრიფტის სტილი: დახრილი;
}

კარგი, ეს ყველაფერი :) თქვენ ახლახან დაამატეთ შრიფტის 4 სტილი თქვენს ვებსაიტს.

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

როგორ დააკავშიროთ შრიფტები საიტებისთვის სხვადასხვა CMS-ზე

არ აქვს მნიშვნელობა რა ძრავზეა თქვენი საიტი (WordPress, Joomla, Drupal, Opencart) - თუ გაქვთ წვდომა CSS ფაილი, შეგიძლიათ დააკავშიროთ შრიფტები Google Fonts-ის მეშვეობით ან თქვენს სერვერზე ატვირთვით Fontsquirrel-ის მეშვეობით.

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

და ასევე:

გამოიწერეთ ჩემი ბიულეტენირათა არ გამოტოვოთ სასარგებლო და საინტერესო ბლოგის პოსტები.