ვებსაიტზე ახალი შრიფტის დამატება არ არის უმარტივესი ამოცანა. სად ავირჩიოთ, ჩამოტვირთოთ და როგორ დავამატოთ შრიფტი ვებსაიტს CSS-ში? ამ სტატიაში ჩვენ გაჩვენებთ ერთ-ერთს ყველაზე მოსახერხებელიშრიფტის საიტზე დაყენების და დაკავშირების გზები.
როგორ ჩავრთოთ შრიფტი ვებსაიტზე CSS-ში
მაგალითად, ჩვენ გვაქვს შრიფტი რალევეი.ttfდა ჩვენ გვინდა გამოვიყენოთ ის ყველა სათაურში ( h1) ჩვენი ვებსაიტის. ამისათვის შეასრულეთ შემდეგი ნაბიჯები:
h1 ( font-family: "RalewayRegular"; }
ახლა ყველა 1-ლი დონის სათაური საიტზე ნაჩვენებია ჩვენთვის საჭირო შრიფტით.
თუ გსურთ რამდენიმე შრიფტის (ან მათი სტილის) დაკავშირება, უბრალოდ დაამატეთ ისინი წინა შრიფტის ქვეშ:
@შრიფტი-სახე { font-family: "RalewayRegular"; src: url ("../fonts/RalewayRegular.ttf")ფორმატი ( "სინამდვილე"); შრიფტის სტილი: ნორმალური; შრიფტის წონა: ნორმალური; } @შრიფტი-სახე{ font-family: "RalewayBold"; src: url ("../fonts/RalewayBold.ttf")ფორმატი ( "სინამდვილე"); შრიფტის სტილი: ნორმალური; შრიფტის წონა: ნორმალური; }
თქვენ შეიძლება შეამჩნიეთ, რომ არსებობს სხვადასხვა შრიფტის ფორმატები - .ttf, .woff, .eot, .svgდა ა.შ. ასევე არსებობს ფორმატი თანამედროვე ბრაუზერებისთვის. woff2, მაგრამ ამაზე ერთ-ერთ შემდეგ სტატიაში ვისაუბრებთ. როგორც წესი, თითოეული შრიფტი ერთდროულად შედის 3 ფორმატში. ეს კეთდება ისე, რომ შრიფტი სწორად იყოს ნაჩვენები ყველა ბრაუზერში, მათ შორის. და ძველები. ეს ასე გამოიყურება:
@შრიფტი-სახე { font-family: "RalewayRegular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") ფორმატი ("embedded-opentype"), url( "../fonts/RalewayRegular/RalewayRegular.woff") ფორმატი ( "ვუფ"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") ფორმატი ( "სინამდვილე"); შრიფტის სტილი: ნორმალური; შრიფტის წონა: ნორმალური; }
აქ მოჰყვება ყურადღება მიაქციეთ კავშირის წესრიგს - ეს მნიშვნელოვანია!
ჩვენ არ შევალთ დეტალებში, უბრალოდ გახსოვდეთ ამ დიზაინის გარეგნობა.
თუ თქვენ გაქვთ შრიფტი მხოლოდ ერთ ფორმატში, გამოიყენეთ სხვადასხვა შრიფტის გადამყვანები. აქ არის ერთი მათგანი.
როგორ დააკავშიროთ შრიფტი სხვადასხვა სერვისების გამოყენებით
თქვენ ასევე შეგიძლიათ გამოიყენოთ fonts4web სერვისი შრიფტების დასაკავშირებლად: 
შრიფტების დასაკავშირებლად უმარტივესი გზა
როგორ დააკავშიროთ შრიფტი Moguta CMS შაბლონთან 
როგორ დავამატოთ ბმული Google ფონტებით Moguta CMS შაბლონში
ახლა თქვენ იცით, როგორ დაამატოთ შრიფტი ვებსაიტზე CSS-ის და სხვათა გამოყენებით. ჩვენ სიამოვნებით ვუპასუხებთ თქვენს ყველა კითხვას დღესდღეობით, სულ უფრო ხშირად შეგიძლიათ იპოვოთ ვებსაიტები, რომლებიც იყენებენ არასტანდარტულ შრიფტებს. ეს ემთხვევა თანამედროვე ვებ დიზაინს, სადაც კრეატიულობა პრიორიტეტულია წაკითხვაზე. რა თქმა უნდა, ასეთი კომბინაცია ხშირად არ ხდება, მაგრამ ხდება. ინგლისურ რესურსებზე საკმაოდ პოპულარულია არასტანდარტული შრიფტები. აი, მაგალითად, იხილეთ ორიგინალში, ანუ ავტორის მშობლიურ ენაზე. და ჩვენ დავინახავთ, თუ როგორ გამოიყენება უნიკალური შრიფტები თითქმის ყოველ მესამე თემაში.
ავტორისგან: „ამ სტატიის დაწერამდე საკმაოდ ბევრი ინფორმაცია დავტოვე თემაზე „შრიფტები“. და მე ძალიან მკაფიოდ გამახსენდა ერთი მომენტი: ბევრი ადამიანი უარყოფითად საუბრობს არასტანდარტული შრიფტების დაკავშირებაზე. უფრო სწორედ, არ გირჩევენ, ამბობენ, რომ არასწორია, მძიმე ტვირთია და ა.შ.
სინამდვილეში, ასეთი განცხადება ხშირ შემთხვევაში განიხილება როგორც საკუთარი აზრის დაკისრება, ან თუნდაც საკუთარი თავისგან სხვისი აზრის გადმოცემა. აღსანიშნავია, რომ აბსოლუტურად ნებისმიერი დამატებითი კავშირი დატვირთვას აყენებს საიტზე, ამ არგუმენტის შემდეგ შეგიძლიათ უსაფრთხოდ გაანადგუროთ საიტის ნახევარი. თუ უფრო დამაჯერებელი არგუმენტები არსებობს შრიფტების მიტოვების სასარგებლოდ, მაშინ დიახ, გთხოვთ... წინააღმდეგ შემთხვევაში... აუცილებელია ექსპერიმენტი“.
რას ნიშნავს მორგებული შრიფტი?
ეს არის შრიფტი, რომელიც ნაგულისხმევად მიუწვდომელია პროგრამულ უზრუნველყოფაში (Windows, Linux და ა.შ.). შესაბამისად, თუ მომხმარებელს არ აქვს შესაბამისი შრიფტი თავის პროგრამულ უზრუნველყოფაში, ის ავტომატურად გამოიყენებს სისტემიდან სტანდარტულ ფონტს. ეს არღვევს ავტორის ორიგინალურ იდეას დიზაინის სასურველი ხასიათის გადმოცემის შესახებ.
თქვენი შრიფტების საიტთან დაკავშირება
შრიფტის კავშირი ხდება @font-face წესის მეშვეობით CSS კასკადურ ცხრილში. ეს მოიცავს: შრიფტს, ნათესავ ან პირდაპირ გზას და მომხმარებლის პროგრამულ უზრუნველყოფაში შრიფტის არსებობის შემოწმებას. მთელი ეს სტრუქტურა ასე გამოიყურება:
@font-face ( font-family: namefont;/*typeface*/ src: local("namefont"),/*check*/ url: (font/namefont.ttf);/* path*/ )
განმარტება: font-family თვისება განსაზღვრავს შრიფტის ოჯახს და src: ადგილობრივი ამოწმებს, რომ მკითხველს აქვს შრიფტი დაინსტალირებული. მაგრამ შრიფტის დაყენების შესაძლებლობა მილიონში ერთხელ ხდება. ამიტომ, "შემოწმების" ხაზი არც ისე სავალდებულოა, მაგრამ ბოლო url "გზა" აუცილებლად უნდა იყოს წარმოდგენილი (რადგან ეს არის გზა თავად შრიფტისკენ, რომელიც პირდაპირ იტვირთება საიტზე).
ბრაუზერის შრიფტის თავსებადობა
ბრაუზერის მხარდაჭერა უნდა აღინიშნოს, რადგან შეიძლება მოხდეს შეუსაბამობები. ყველა პოპულარული ბრაუზერი, უახლესი ვერსიები, იდეალურად მუშაობს ფორმატში შრიფტების დამაკავშირებლად ttf. და მოგვიანებით ვერსიებზე საუბრისას, კერძოდ IE, ისევე როგორც Apple-ის მოწყობილობებზე, შეიძლება იყოს სირთულეები. ეს პრობლემა მოგვარებულია სპეციალური სერვისებით, რომლებიც საშუალებას გაძლევთ შექმნათ შრიფტის ფორმატი თითოეული ბრაუზერისთვის ცალკე.
ჩემი აზრით, ეს აბსოლუტური აუცილებლობაა. ნება მომეცით აგიხსნათ: IE ქვემოთ 10 ვერსია უკვე მოითხოვს დამატებით მოქმედებებს. მაგრამ მისი გამოყენების პროცენტი ძალიან მცირეა. რაც შეეხება Apple-ის მობილურ მოწყობილობებს, ეს ყველაფერი მინიმალიზმზე მოდის. აუცილებლად უნდა იყოს უფრო სწრაფი და მარტივი ვიდრე ჩვეულებრივი.
| ფორმატი | მკვლევარი | Chrome | Firefox | Safari | ოპერა | iOS | Android |
|---|---|---|---|---|---|---|---|
| TTF | 9.0+ | 4.0+ | 3.5+ | 3.1+ | 10.0+ | X | 2.2+ |
| OTF | 9.0+ | 4.0+ | 3.5+ | 3.1+ | 10.0+ | X | 2.2+ |
| EOT | 6.0+ | X | X | X | X | X | X |
| WOFF | 9.0+ | 5.0+ | 3.6+ | 5.1+ | 11.1+ | 5 | X |
| WOFF2 | X | 36.0+ | 35.0+ | X | 26.0+ | X | X |
| SVG | X | 4.0+ | X | 3.2+ | 9.0+ | 3.1+ | X |
შრიფტის ფორმატები
ფონტებს, ისევე როგორც ბევრ სხვა ფაილს, აქვთ სხვადასხვა გაფართოება (ფორმატი). მოკლე მიმოხილვისას ჩვენ გადავხედავთ რომელი…
TTF (TrueType ფონტები)– ყველაზე გავრცელებული შრიფტის ფორმატი ოპერაციულ სისტემებში. იგი შეიქმნა ჯერ კიდევ 80-იანი წლების ბოლოს, ერთი წყაროს თანახმად, Apple-ის მიერ, ხოლო მეორეში, Microsoft-თან ერთად. ყველაზე ხშირად ეს შრიფტის ფორმატი გამოიყენება ვებ გვერდზე დასაკავშირებლად. ყველა პოპულარული ბრაუზერის მხარდაჭერის საფუძველზე უახლესი ვერსიებისთვის.
OTF (OpenType Fonts)– მისი წინამორბედის (TrueType) მოდიფიკაცია უფრო მოწინავე შესაძლებლობებით. მეტი პერსონაჟი და ნაკლები წონა. ის ოფიციალურად დაინერგა 1996 წელს Adobe-ს მიერ და შეიქმნა Microsoft-თან ერთად.
WOFF (ვებ ღია შრიფტის ფორმატი)– შექმნილია პირველი ორი შრიფტის საფუძველზე გარკვეული ცვლილებებით.
WOFF 2.0 (ვებ ღია შრიფტის ფორმატი)- მცირე ცვლილებები შეკუმშვაში.
EOT (ჩაშენებული OpenType)– შეიქმნა Microsoft-ის მიერ 2007 წელს ექსკლუზიურად Internet Explorer ბრაუზერებისთვის.
SVG ფონტები- iOS Safari-ის მხარდაჭერა.
შრიფტის კონვერტაციის სერვისი
მაგრამ მაინც, არის სხვადასხვა შემთხვევები და თუ თქვენ გჭირდებათ შრიფტის მხარდაჭერა ყველა ბრაუზერსა და მოწყობილობაში, მოგიწევთ სერვისების გამოყენება.
Ნაბიჯი 1.
ნაბიჯი 2.
სკრიპტის მარცხნივ აირჩიეთ კირიული ანბანი.
ნაბიჯი 3.
გადაწყვიტეთ შრიფტის არჩევანი და დააწკაპუნეთ „სწრაფი გამოყენების“ ხატულაზე.
ნაბიჯი 4.
გახსნის გვერდი შეიცავს ინფორმაციას, რომელიც იყოფა ნაბიჯებად:
1. აირჩიეთ შრიფტის სტილი (ნორმალური, თამამი და ა.შ.);
2. აირჩიეთ მხარდაჭერა (ლათინური, კირილიცა და ა.შ.);
3. კავშირის მეთოდები (დაწვრილებით ქვემოთ);
4. შრიფტის ინტეგრაცია.
ნაბიჯი 5.
ბოლო ეტაპზე ჩვენ განვიხილავთ კავშირის მეთოდებს. სინამდვილეში, ყველაფერი ძალიან მარტივია. სამი მეთოდიდან თითოეული არის ცალკე კოდი, რომელიც დაკავშირებულია საკუთარი გზით, არჩევანის მიხედვით.
1. სტანდარტული კავშირი ტეგის მეშვეობით ჩვეულებრივ იწერება ტეგებს შორის
(WordPress ფაილი: header.php).2. იმპორტი კასკადურ ცხრილში @import წესის მეშვეობით (WordPress ფაილი: style.css).
3. კავშირი JavaScript-ით ცალკე ფაილში ან ასევე ტეგებს შორის
.დაკავშირების შემდეგ, თქვენ დაგჭირდებათ მხოლოდ შრიფტის შრიფტის მითითება სტილში.
შრიფტი-ოჯახი: „Comfortaa“, კურსორი;
Სულ ეს არის! ვიმედოვნებ, რომ ამ მასალაში თქვენთვის სასარგებლო რამე იპოვნეთ. თუ თქვენ გაქვთ რაიმე შეკითხვები, გთხოვთ, ჰკითხეთ მათ კომენტარებში, არ მორცხვდეთ).
ტექსტის ელემენტების უმეტესობა ნაგულისხმევად არის Times New Roman. CSS-ში არის სხვა შრიფტების დაყენების ვარიანტი. თქვენ ასევე შეგიძლიათ ჩართოთ შრიფტი CSS-ში, რომელიც თავდაპირველად არ იყო მოწოდებული ბრაუზერებში. ამ თემაში განვიხილავთ როგორ გავაკეთოთ ეს.
შრიფტის ოჯახები
შრიფტები იყოფა ოჯახებად. არსებობს შემდეგი შრიფტების ოჯახები:
სერიფი - სერიფი
sans-serif - sans serif
მონოსპეისი - მონოსპეისი
კურსული - კურსული
ფანტაზია - დეკორატიული
უსაფრთხო შრიფტები
საკმაოდ ბევრი შრიფტია. მათი გამოყენების სირთულე ის არის, რომ თითოეულ ოპერაციულ სისტემას აქვს შრიფტების საკუთარი ნაკრები. გარდა ამისა, სხვადასხვა ბრაუზერში შეიძლება არ იყოს ნაჩვენები ყველა შრიფტი. თუ ტექსტის ელემენტი დაყენებულია შრიფტზე, რომელიც მიუწვდომელია მომხმარებლის კომპიუტერის ოპერაციულ სისტემაში, ტექსტი გამოჩნდება სხვა შრიფტით. შრიფტებს, რომლებიც ნაჩვენებია ყველა კომპიუტერზე და ყველა ბრაუზერში, ეწოდება უსაფრთხო შრიფტები. ითვლება, რომ აბსოლუტურად უსაფრთხო არ არსებობს. მაგრამ მაინც, არსებობს მთელი რიგი შრიფტები, რომლებიც მომხმარებელთა დიდ უმრავლესობას აქვს. ქვემოთ მოცემულია უსაფრთხო შრიფტები და მათი ოჯახები.
Times New Roman, სერია
Arial, sans-serif
ვერდანა, sans-serif
ტაჰომა, sans-serif
ზემოქმედება, sans-serif
Trebuchet MS, sans-serif
Courier New, მონოსპეისი
Comic Sans MS, კურსორი
თქვენ შეგიძლიათ იპოვოთ სხვა შრიფტები, თუ აკრიფებთ ნებისმიერ საძიებო სისტემაში: სტანდარტული შრიფტები.
შრიფტის დაყენება
CSS-ში შრიფტის შესაცვლელად ან დასამატებლად გამოიყენეთ font-family თვისება. ამ ქონების ღირებულება არის შრიფტის სახელი. მაგალითად, შევქმნათ აბზაცი და დავაყენოთ შრიფტი მასზე:
სტილი:
font-family თვისება საშუალებას გაძლევთ მიუთითოთ მძიმით გამოყოფილი მრავალი შრიფტი. თქვენ ასევე შეგიძლიათ მიუთითოთ შრიფტის ოჯახი. ამ შემთხვევაში გამოყენებული იქნება პირველი მითითებული შრიფტი. თუ ეს ასე არ არის, მაშინ გამოიყენება შემდეგი შრიფტი და ა.შ. ძირითადად, ამას აკეთებენ რეალურ გვერდებზე. ეს კეთდება იმის უზრუნველსაყოფად, რომ გვერდი გამოჩნდება ისე, როგორც მოსალოდნელია.
15 |
div (შრიფტი-ოჯახი: Tahoma, Verdana, sans-serif;) |
როგორ ჩავრთოთ მორგებული შრიფტი CSS-ში
მომხმარებლის ოპერაციულ სისტემაში შემავალი შრიფტების გარდა, სხვა შრიფტების გამოყენება შესაძლებელია. თქვენ შეგიძლიათ იპოვოთ ისინი ინტერნეტში ან თავად შექმნათ ისინი. ბევრი მორგებული შრიფტია. მათ მოსაძებნად, თქვენ უნდა ჩაწეროთ შრიფტები საძიებო სისტემაში. შრიფტის ფაილი უნდა გადმოწეროთ და დაერთოთ გვერდზე. არჩევისას უნდა გაითვალისწინოთ, რომ ზოგიერთი შრიფტი ფასიანია. ამის შესახებ ინფორმაცია უნდა იყოს გვერდზე, საიდანაც ჩამოტვირთავთ შრიფტს.
პერსონალური შრიფტების გამოყენების სირთულე ის არის, რომ თითოეული ბრაუზერი მხარს უჭერს სხვადასხვა ფორმატებს. ამიტომ, არასტანდარტული შრიფტის გამოყენებისას, თქვენ უნდა შეამოწმოთ როგორ არის ნაჩვენები გვერდი სხვადასხვა ბრაუზერში. არსებობს მრავალი შრიფტის ფორმატი. ყველაზე უნივერსალური არის woff ფორმატი. ის უნდა მუშაობდეს უმეტეს თანამედროვე ბრაუზერებში.
არასტანდარტული CSS შრიფტის დასამატებლად გამოიყენეთ @font-face წესი. ის უნდა შეიცავდეს ორ თვისებას: font-family თვისება განსაზღვრავს იმ შრიფტის სახელს, რომლის მიხედვითაც ეს შრიფტი გამოყენებული იქნება საიტზე. სახელს თავად ირჩევთ. და src თვისება განსაზღვრავს გზას არასტანდარტული შრიფტის ფაილისკენ. ამის შემდეგ, შრიფტის გამოყენება შესაძლებელია ნებისმიერი სელექტორისთვის. font-family თვისებაში თქვენ უნდა მიუთითოთ შრიფტისთვის არჩეული სახელი.
მაგალითად, მე ვიყენებ შრიფტის ფაილს, სახელად unineue.woff. ის მდებარეობს იმავე საქაღალდეში, სადაც გვერდი. ფონტს დავარქმევ Nfont.
ბევრ დიზაინერს, რომლებიც ქმნიან სერიოზულ და საინტერესო განლაგებას, ხელმისაწვდომია უამრავი უნიკალური და ლამაზი შრიფტი. ასეთი შრიფტების წყალობით, დიზაინი იძენს თავის ხალისს და ექსკლუზიურობას. თუმცა, არასტანდარტული შრიფტები გამოჩნდება მხოლოდ იმ კომპიუტერზე, რომელზედაც ისინი უკვე დაინსტალირებულია, ამიტომ მათთან გამართულად მუშაობისთვის დიზაინერმა უნდა მოგაწოდოთ ყველა ის შრიფტი, რომელსაც იყენებს თავის განლაგებაში. იმის გამო, რომ განლაგების განლაგებისას, თქვენ მოგიწევთ ამ შრიფტების დაყენება თქვენს კომპიუტერში. მაგრამ თქვენი საიტის მომხმარებელი არ ჩამოტვირთავს ყველა შრიფტს და არ დააინსტალირებს მათ თავის კომპიუტერში, ასე რომ თქვენ უნდა აიძულოთ ბრაუზერი თავად აიყვანოს საჭირო შრიფტები. წესი აქ დაგვეხმარება, ასევე არის 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 არის გზა თქვენი შრიფტისკენ, რომელიც არის ფონტებში. საქაღალდეში, მნიშვნელოვანია, რომ სახელში არ იყო სივრცეები შრიფტის ფაილში, უმჯობესია შეცვალოთ ისინი ტირეთი.
ეს არის უმარტივესი გზა, მაგრამ ის არ მუშაობს ყველა ბრაუზერში და ეს დიდი პრობლემაა.
თითოეულ ბრაუზერს აქვს საკუთარი შრიფტის ფორმატების მხარდაჭერა:
TrueTypeშრიფტები 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" ) ფორმატი ("ჩაშენებული-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") ფორმატი("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") ფორმატი("truetype" url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg": normal font-style: normal; Arial, Tahoma, Verdana, sans-serif)
ამ პარამეტრებით, შრიფტები ნაჩვენებია ნებისმიერ ბრაუზერში, მათ შორის ყველასთვის საყვარელი IE-7-8-9.
თუ იყენებთ არასტანდარტულ შრიფტებს კირიული ანბანისთვის, ანუ რუსული სიმბოლოებისთვის და შრიფტი სწორად არ არის ნაჩვენები საიტზე, მაშინ, შესაძლოა, გაფართოებული პარამეტრებით შრიფტის გენერირება დაგვეხმარება, ჩამოტვირთეთ გვერდი http://www.fontsquirrel. com/tools/webfont-შექმენით თქვენი შრიფტი და აირჩიეთ „ექსპერტის“ პარამეტრები. იქ ბევრი პარამეტრია, ყველაფერი არ ვიცი, მაგრამ ყურადღებით წაიკითხე და შეარჩიე რაც გჭირდება და კირიული ანბანის მხარდასაჭერად აირჩიეთ Subsetting ბლოკში: განყოფილება Custom Subsetting... და მონიშნეთ კირილიცას ჩამრთველი, და ასევე შეამოწმეთ თქვენთვის საჭირო ენები და ფორმატები.
აი მაგალითი იმისა, რაც მივიღე: 
შემდეგ პროექტში კიდევ ერთხელ ვხედავ სათაურებსა და მენიუებს არასტანდარტული შრიფტით. გააკეთე ეს სურათებით? წოვს: უხერხული, მოუქნელი, ნელი. ფლეში? ვერ ვიტან მას. Javascript? რა თქმა უნდა, ახლა საუკეთესო გამოსავალია, მაგრამ მაინც ყავარჯენია, რომელიც გვახსენებს ბრაუზერების შეზღუდვებს. დროა ჩავუღრმავდეთ სტანდარტებს: რას გვთავაზობენ და სად უკვე მუშაობს.
შენიშვნა
მორგებული შრიფტი, საპირისპიროდ, არის შრიფტი, რომელიც სავარაუდოდ აკლია საიტის ვიზიტორების უმეტესობას.
დავალება
განახორციელეთ მორგებული შრიფტი სურათების, Javascript-ის ან ფლეშის გამოყენების გარეშე. ჩვენ ვიყენებთ მხოლოდ უახლეს მიღწევებს.
გამოსავალი
მაგრამ IE-სთვის ეს არც ისე მარტივია. მიუხედავად იმისა, რომ ის იყო პირველი, რომელმაც მხარი დაუჭირა მესამე მხარის შრიფტების დანერგვას (1997 წლიდან Internet Explorer მე-4 ვერსიის გამოშვებით!!!), ის მოითხოვს შრიფტის სპეციალურ ფორმატს - EOT (Embedded OpenType). EOT ფორმატი ერთდროულად წყვეტს ორ პრობლემას:
- შეკუმშავს შრიფტის ფაილს, რამდენჯერმე ამცირებს მის წონას (კოლეგების ტესტებით ვიმსჯელებთ, ეს მეთოდი უკეთესად იკუმშება ვიდრე RAR, ZIP და gzip მეთოდები)
- შიფრავს ფაილს: ინფორმაცია იწერება შრიფტის ფაილში, სადაც ის უნდა იქნას გამოყენებული. ეს შრიფტი არ იმუშავებს ამ მისამართის გარეთ.
შედეგად, შრიფტის სტილში დაკავშირება ასე გამოიყურება:
/* მხოლოდ Internet Explorer-ისთვის */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* შემდგომი ყველა სხვა ბრაუზერისთვის */ @ font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.ttf); ) [...] h1 ( font-family: Scriptorama, arial; font-weight: ნორმალური;
ჰაკის ნაცვლად, შეგიძლიათ გამოიყენოთ .
განახლება 23.08.11შრიფტის ჩაშენების უფრო სრულყოფილი სინტაქსი, რომელიც ითვალისწინებს ზოგიერთ შესაძლო IE შეცდომებს და ბრაუზერის უფრო დიდ მხარდაჭერას:
@font-face ( font-family: "JournalRegular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") ფორმატი ("embedded-opentype"), url("journal-webfont.woff") ფორმატი("woff"), url("journal-webfont.ttf") ფორმატი("truetype"), url("journal-webfont.svg#JournalRegular") ფორმატი("svg" "); შრიფტის წონა: ნორმალური; შრიფტის სტილი: ნორმალური;)
შენიშვნა
განახლება 10.11.10 IE-ში ლოკალური შეიძლება არ იმუშაოს. უფრო მეტიც, ამის გამო, შრიფტი შეიძლება საერთოდ არ იყოს დაკავშირებული. ჩვენს პროექტებში ჩვენ ყურადღებას ვაქცევთ ამ პუნქტს: თუ ის არ მუშაობს, ჩვენ უბრალოდ ვხსნით მას IE local-ისთვის.
უპირატესობები:
- მოქნილობა - საიტის მფლობელს შეუძლია შეცვალოს ნებისმიერი ტექსტი, როგორც მას სურს;
- სწრაფი ჩატვირთვის სიჩქარე - გარე ფაილების მინიმალური რაოდენობა ნებისმიერი რაოდენობის ტექსტით არასტანდარტული შრიფტით;
- საიტის მაქსიმალური სიჩქარე - ნულოვანი დამატებითი ელემენტები DOM-ის სტრუქტურაში, ნულოვანი სკრიპტები და ფლეშ ობიექტები, რომლებიც ანელებენ საიტს;
- ტექსტი იქცევა როგორც ტექსტი (ბოლოს და ბოლოს, ის რჩება ტექსტად), ე.ი. გამოირჩევა, პასუხობს ფერის, გამბედაობის, სტილის და ა.შ ცვლილებებს, იდეალური SEO;
- საკმაოდ მარტივი განხორციელება, თუნდაც შრიფტის ოპტიმიზაციის გათვალისწინებით.
ხარვეზები:
შრიფტის შეკუმშვა და კონვერტაცია
თუ შრიფტის შემქმნელები ცდილობდნენ ყველას მოეწონათ, მაშინ შრიფტი, სავარაუდოდ, შეიცავს ბევრ, ბევრ სიმბოლოს და, შესაბამისად, იწონის ბევრ, ბევრს. ასე რომ, Arial Unicode MS შრიფტი შეიცავს 51 ათას სიმბოლოს და იწონის 23 მეგაბაიტზე მეტს! დროა ვიფიქროთ იმაზე, გამოიყენებს საიტი უდმურტიულ თუ ფინო-უგრიულ ენებს? და ასევე სხვადასხვა დამატებითი სიმბოლოები, პუნქტუაციის ნიშნები და რიცხვები? ასევე ყურადღება უნდა მიაქციოთ, რომ თითოეულ შრიფტს აქვს სტილის გარკვეული რაოდენობა: რეგულარული, დახრილი, თამამი, ნახევრად თამამი. შრიფტი შეიძლება შეიცავდეს 9-მდე ტიპის გამბედაობას (გაიხსენეთ მისაღები მნიშვნელობები).
Რა უნდა ვქნა
ჩვენ გამოვრიცხავთ შრიფტიდან ყველაფერს, რაც არ არის საჭირო ამოცანის მისაღწევად. მაგალითად, თუ შრიფტი გამოიყენება მხოლოდ მენიუსთვის, მაშინ პუნქტუაციის ნიშნები, სხვადასხვა დამატებითი სიმბოლოები და რიცხვები ზედმეტი იქნება.
Როგორ უნდა გავაკეთოთ
შემდეგი შეიძლება დაგეხმაროთ ამაში:
ონლაინ სერვისი @font-face Generator
Რა შეუძლია:
- მუშაობის ორი რეჟიმი: მარტივი - მათთვის, ვისაც არ სურს მასში ჩაღრმავება და ექსპერტი - მაქსიმალური ოპტიმიზაციისთვის
- შედეგების სხვადასხვა ფორმატი და ის ერთ ადგილას! იმათ. არ არის საჭირო ჯერ True Type-ის შეკუმშვა ყველა ბრაუზერისთვის, შემდეგ კი ცალკე კონვერტაცია EOT-ზე IE-სთვის
- სხვადასხვა ვარიანტები შედეგების მისაღებად. შრიფტის დაცვა ადგილობრივი გამოყენებისგან და ფაილი Cufon-ისთვის!
- სიმბოლოების ზუსტი შერჩევა შეკუმშული შრიფტისთვის. შეგიძლიათ მიუთითოთ ენა და დამატებითი სიმბოლოების ნაკრები, ან შეგიძლიათ მიუთითოთ გამოყენებული სიმბოლოების დიაპაზონი, ან უბრალოდ ჩამოთვალოთ საჭირო სიმბოლოები, ან გამოიყენოთ ყველა მეთოდის სიმბიოზი
- მათთვის, ვინც სუსტია CSS-ში, ჩამოყალიბდება სტილის წესებიც კი
ექსპერიმენტისთვის შევკუმშე 145 კბ შრიფტი „გამოიყენე მენიუსთვის“ ტესტის დავალებით. მხოლოდ პატარა რუსული ასოები დავტოვე. შრიფტის საბოლოო ზომა იყო 8 კბ. საოცარი!
ხარვეზები:
- EOT გენერირებულია კონკრეტულ დომენთან მიბმულობის გარეშე (სერიოზული პროექტებისთვის თქვენ კვლავ მოგიწევთ EOT-ის გაკეთება ცალკე)
- ყველა ლიცენზირებული შრიფტის დამუშავება არ შეიძლება (ეს შედარებით მინუსია)
შთაბეჭდილება- ფანტასტიკური, შესანიშნავი, სუპერ-დუპერი, საოცარი!!! მე თვითონ მივიღებ PayPal-ს შემოწირულობის გასაკეთებლად.
ვებ შრიფტის ოპტიმიზატორი
ონლაინ სერვისი, რომელიც საშუალებას გაძლევთ დატოვოთ მხოლოდ საჭირო სიმბოლოები. ნამუშევრები .
დადებითი: მარტივი და გასაგები. შედეგი არის True Type შეკუმშული შრიფტი, EOT შრიფტი IE-სთვის და CSS კოდი კავშირისთვის.
უარყოფითი მხარე: სერვისი ხელმისაწვდომია მხოლოდ შრიფტების მკაცრად ფიქსირებული სიისთვის, რომელიც მათ აქვთ ვებსაიტზე.
WEFT
პროგრამული უზრუნველყოფა Microsoft-ისგან. ეხმარება შრიფტის EOT-ად გადაქცევას. პლუსი შეუძლებელს ხდის შრიფტის გამოყენებას მითითებული საიტის გარეთ. შეგიძლიათ ჩამოტვირთოთ და უფრო დეტალურად გაეცნოთ სკრიპტისადმი მიძღვნილ გვერდზე.
TTF2EOT
სახელიდან ირკვევა, რომ ის აკონვერტებს შრიფტს TTF-დან EOT-ში. ის მუშაობს ლოკალურად ბრძანების ხაზის მეშვეობით, რაც თავისთავად არ არის მოსახერხებელი. შეგიძლიათ ჩამოტვირთოთ სკრიპტი და წაიკითხოთ მეტი მის შესახებ პროექტის ვებსაიტზე.
ონლაინ შრიფტის გადამყვანი
მარტივი გამოსაყენებელი, საშუალებას გაძლევთ გადაიყვანოთ ლიცენზირებული შრიფტები. ხელმისაწვდომია.
ნაკლოვანებები: აუცილებელია რეგისტრაცია.
რაც შეეხება შრიფტის დაცვას?
თუ შრიფტი მაღალი ხარისხისაა, ის შემუშავებულია მაღალი პროფესიონალების მიერ, ხშირად პროფესიონალთა გუნდის მიერ, ხშირად ერთ თვეზე მეტი ხნის განმავლობაში. ასეთი შრიფტი შეიძლება ღირდეს არანაკლებ "ჟიგული" ასამბლეის ხაზიდან. შრიფტის შემქმნელებმა დაიწყეს მათი სავაჭრო ნიშნების რეგისტრაცია, რაც უზრუნველყოფს საავტორო უფლებების მფლობელის უფლებებს შრიფტზე სამრეწველო საკუთრების დაცვის დონეზე.
იმათ. ინტერნეტში შრიფტის გამოსაყენებლად, საიტის მფლობელმა უნდა შეიძინოს შრიფტი ინტერნეტში გამოყენების უფლებით. მაგრამ შეძენა ნახევარი პრობლემაა. შრიფტი ასევე დაცული უნდა იყოს უკანონო კოპირებისგან. ასეთი პრობლემები თითქმის არ არის, თუ საიტზე ლიცენზირებული შრიფტი დანერგილია სურათებით ან Javascript-ის გამოყენებით. მაგრამ თუ თქვენ ამას განახორციელებთ @font-face-ის საშუალებით, შრიფტი ღიად მდებარეობს სერვერზე, რომლის ჩამოტვირთვა ნებისმიერ მომხმარებელს შეუძლია. და ეს უკვე საფრთხეს უქმნის სასამართლო პროცესებს.
შენიშვნა
მილიონობით პატარა საიტისთვის შრიფტების უკანონო გამოყენება შეიძლება და გაივლის უშედეგოდ, მაგრამ მაგარი, კომერციული, განსაკუთრებით საერთაშორისო პროექტები სერიოზულად უნდა იფიქრონ ლიცენზიების შეძენაზე.
როგორ დავიცვათ შრიფტი?
IE-სთვის ეს პრობლემა დაუყოვნებლივ მოგვარდა - EOT ფორმატი შიფრავს ფაილს. შედეგად, ჩვენ გვაქვს შრიფტი, რომელიც იმუშავებს მხოლოდ ამ საიტზე.
