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

თავად ნახეთ:

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

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

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

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

Ისწავლი:

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

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

Მაგალითად:

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

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

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

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

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

მეთოდი ნომერი 2. გამოიყენეთ 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/... CSS საქაღალდეში, სავარაუდოდ, იქნება Fonts ფაილი, სადაც უნდა გადაიტანოთ ჩაშენებული კოდი 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 შრიფტის სტილი თქვენს საიტზე.

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

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

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

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

Ისევე, როგორც:

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

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

შრიფტის ჩართვის უმარტივესი გზაა მისი ჩაწერა სტილის ფურცელში:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, sans-serif ;)

აქ 'PF Din CompPro' არის შრიფტის სახელი და შემდეგ შეგიძლიათ მიუთითოთ ეს შრიფტი საიტის საჭირო ელემენტებისთვის, და fonts/pfdintextcomppro-medium-webfont.ttf არის გზა თქვენი შრიფტისკენ, რომელიც არის შრიფტების საქაღალდეში. მნიშვნელოვანია, რომ სახელში არ იყო სივრცეები შრიფტის ფაილში, უმჯობესია შეცვალოთ ისინი ტირეებით.

ეს არის უმარტივესი გზა, მაგრამ ის უბრალოდ არ მუშაობს ყველა ბრაუზერში და ეს დიდი პრობლემაა.

თითოეულ ბრაუზერს აქვს საკუთარი შრიფტის ფორმატების მხარდაჭერა:
ნამდვილი ტიპიშრიფტები Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOTშრიფტები Internet Explorer 4+-ისთვის
WOFFშრიფტები Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVGფონტები iPad-ისთვის და iPhone-ისთვის

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

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

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") ფორმატი("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") ფორმატი("svg"); შრიფტის წონა: ნორმალური; შრიფტის სტილი: ნორმალური; ) body( font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif;)

ამ პარამეტრებით, შრიფტები ნაჩვენებია ყველა ბრაუზერში, მათ შორის საყვარელ IE-7-8-9-ში.

თუ თქვენ იყენებთ არასტანდარტულ შრიფტებს კირიულისთვის, ანუ რუსული სიმბოლოებისთვის და საიტზე არასწორად არის ნაჩვენები შრიფტი, მაშინ შეიძლება დაგვეხმაროს ფონტის გენერირება გაფართოებული პარამეტრებით, გვერდზე http://www.fontsquirrel.com/tools /webfont-generator ჩამოტვირთეთ თქვენი შრიფტი და აირჩიეთ "ექსპერტის" პარამეტრები. ბევრი პარამეტრია, ყველაფერი არ ვიცი, მაგრამ კარგად წაიკითხე და აირჩიე რაც გჭირდება და კირილიცის მხარდასაჭერად Subsetting ბლოკში აირჩიეთ: Custom Subsetting განყოფილება ... და მონიშნეთ კირიულის ჩეკი და ასევე მონიშნეთ თქვენთვის საჭირო ენები და ფორმატები.

აი მაგალითი იმისა, რაც მივიღე:

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

ბევრი იტანჯება საიტის შექმნისას. ხშირ შემთხვევაში, საიტი მოითხოვს არასტანდარტული შრიფტის ან იეროგლიფის გამოყენებას. თქვენ ჩამოტვირთავთ მშვენიერ შრიფტს და იწყებთ გვერდის გაშლას, მაგრამ ყველა მომხმარებელს არ აქვს ასეთი შრიფტები. ზოგიერთს არ უხერხულია და უბრალოდ ქმნის გრაფიკულ ფაილს მათთვის საჭირო შრიფტის გამოყენებით, მაგრამ დამატებითი გრაფიკა ყოველთვის არ ჯდება გვერდზე და ბევრს მაინც აქვს საკმარისი. მაგრამ არსებობს ერთი შესაფერისი გამოსავალი! ეს გამოსავალი არის CSS ტექნოლოგიის (Cascading Style Sheets) ან უბრალოდ "Cascading Style Sheets" გამოყენება. ჩვეულებრივ, CSS შედის შექმნილ ფაილში, გვერდზე, მაგრამ შეგიძლიათ შექმნათ CSS ფაილი (.css) ცალკე და დააკავშიროთ იგი ტეგს შორის ჩასმით. ამგვარად:

და CSS-ის დახმარებით, ჩვენ უნდა ავტომატურად გადმოვწეროთ და დავაინსტალიროთ True Type Font (.ttf) ფონტის ფაილი, მაგრამ ინსტალაცია მოხდება მხოლოდ იმ შემთხვევაში, თუ მომხმარებლის კომპიუტერი ვერ აღმოაჩენს საჭირო შრიფტს. პირველ რიგში უნდა მივუთითოთ შრიფტის მდებარეობა. ამისათვის ჩვენ ვწერთ ტეგებს შორის დაᲘსე:

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

მართალი გითხრათ, ამის გაკეთება უფრო ადვილი და სწორია:

მიუხედავად იმისა, რომ ვებ შრიფტები მხარდაჭერილია ბრაუზერების უმეტესობის მიერ, ისინი თავიდანვე გაფუჭებულია Opera-ში. ზოგიერთ სისტემაზე ისინი საერთოდ არ მუშაობენ, მათზე, რომლებიც მუშაობენ, გვერდების გადატვირთვისას შეიძლება მუშაობდნენ ან არ მუშაობდნენ:

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

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

გავხადოთ ვებ ლამაზი!

Google აღმოაჩენს ბრაუზერს და გამოსცემს მოქმედ CSS-ს და შრიფტს.