@font-face yordamida veb-shriftlarni ulash. Shriftlardan foydalanishning huquqiy muammosi

Qalin matn

Qalin matn

Odatdagidan ko'proq

Odatdagidan kamroq

Kursiv

Kursiv

Pastki chiziq bilan

Chizilgan

Uslub atributlari imkoniyatlari

Ta'riflangan teglardan tashqari, html shriftini o'zgartirishning yana bir qancha usullari mavjud. Ulardan biri umumiy uslub atributidan foydalanishdir. Uning xususiyatlarining qiymatlaridan foydalanib, siz shriftlarni ko'rsatish uslubini o'rnatishingiz mumkin:

1) font-family - xususiyat shriftlar oilasini o'rnatadi. Bir nechta qiymatlarni sanab o'tish mumkin.
Html-dagi shriftni keyingi qiymatga o'zgartirish, agar oldingi oila foydalanuvchining operatsion tizimida o'rnatilmagan bo'lsa sodir bo'ladi..

Yozish sintaksisi:

font-family: font-name [, shrift-name[, ...]]

2) shrift o'lchami - o'lcham 1 dan 7 gacha o'rnatiladi. Bu HTMLda shriftni oshirishning asosiy usullaridan biridir.
Yozish sintaksisi:

shrift o'lchami: mutlaq o'lcham | nisbatan kattaligi | ma'nosi | qiziqish | meros

Shuningdek, siz shrift hajmini belgilashingiz mumkin:

• Piksellarda;
• Mutlaq ma'noda ( xx-kichik, x-kichik, kichik, o'rta, katta);
• Foizda;
• Nuqtalarda (pt).

Shrift hajmi: 7

Shrift hajmi: 24px

Shrift o'lchami: x-katta

Shrift hajmi: 200%

Shrift o'lchami: 24pt

shrift uslubi: normal | kursiv | qiya | meros

Qadriyatlar:

• normal – oddiy imlo;
• kursiv - kursiv;
• oblique - o'ngga qiya shrift;
• inherit - asosiy elementning imlosini meros qilib oladi.

Ushbu xususiyatdan foydalangan holda html shriftini qanday o'zgartirishga misol:

shrift uslubi: meros qilib olish

shrift uslubi: kursiv

shrift uslubi: normal

shrift uslubi: qiya

shrift-variant: normal | kichik-shlyapalar | meros

Ushbu xususiyat bilan html-da shriftni qanday o'zgartirishga misol:

font-variant: meros qilib olish

shrift-variant: normal

shrift-variant: kichik bosh harflar

shrift-weight: qalin|qalinroq|yengilroq|normal|100|200|300|400|500|600|700|800|900

Qadriyatlar:

• qalin - html shriftini qalin qilib o'rnatadi;
• qalinroq - odatdagiga nisbatan qalinroq;
• engilroq - odatdagiga nisbatan kamroq to'yingan;
• normal – oddiy imlo;
• 100-900 - shrift qalinligini raqamli ekvivalentda o'rnatadi.

shrift vazni: qalin

shrift vazni: qalinroq

shrift vazni: engilroq

shrift vazni: normal

shrift og'irligi: 900

shrift og'irligi: 100

html shrift xususiyati va shrift rangi

Shrift boshqa konteyner xususiyatidir. O'zida u shriftlarni o'zgartirish uchun mo'ljallangan bir nechta xususiyatlarning qiymatlarini birlashtirdi. shrift sintaksisi:

shrift: font-size font-family | meros

Qiymat tizim tomonidan turli boshqaruv elementlaridagi teglardagi shriftlarga ham o'rnatilishi mumkin:

• sarlavha - tugmalar uchun;
• icon – piktogrammalar uchun;
• menyu - menyu;
• xabarlar qutisi – muloqot oynalari uchun;
• kichik sarlavha - kichik boshqaruvlar uchun;
• holat satri – holat satri shrifti.

Ushbu maqolada men sizga o'zingiz yaratgan piktogramma yordamida veb-sayt uchun o'z shriftingizni qanday yaratishni aytaman. Buning uchun bizga kerak bo'lgan narsa vektor grafikalarini yaratish uchun dastur (Adobe Illustrator yoki Inkspcape) va Internetga kirish, keling, boshlaylik! Buning uchun ishlatiladigan barcha rasmlar, piktogrammalar va CSS shriftlarini maqolaning oxirida yuklab olishingiz mumkin.

Ushbu qo'llanma uchun biz oddiy narsalarni qilamiz. Birinchi belgi uchun biz oddiy yulduzni chizamiz. Ikkinchi belgi uchun - ichida W harfi bo'lgan burgut. Chizish juda oson va siz har qanday shakl va kombinatsiyalarni yaratishingiz mumkin. Ushbu maqsadlar uchun men illustratordan foydalandim.

Ijodiy qismni tugatganingizdan so'ng, ijodingiz SVG formatida saqlanishi kerak. "Boshqa saqlash" tugmasini bosing va fayl turini SVG sifatida tanlang. Endi siz to'g'ridan-to'g'ri shrift yaratishga o'tishingiz mumkin.

Ushbu maqsadlar uchun biz mashhur va bepul IcoMoon xizmatidan foydalanamiz.

Birinchi narsa - yangi loyiha yaratish, shuning uchun yuqori chap burchakdagi menyuni bosing va "Yangi loyiha" ni bosing. Keyinchalik, "Import piktogrammalari" tugmasini bosgandan so'ng biz tayyor svg fayllarimizni yuklaymiz. Ushbu amallarni bajarganingizdan so'ng, monitoringizda shunday tasvirni ko'rishingiz kerak:

Endi biz har bir belgi uchun kodni o'zgartirish imkoniyatiga egamiz (bizning holatda u e600 va e601 bo'ladi), shriftimiz nomini, CSS prefiksini va hokazo. Bularning barchasi "Preferences" da amalga oshiriladi. Shuningdek, biz “Tezkor foydalanishni yoqish” havolasini bosish orqali shriftning ishlayotganini ko'rishimiz mumkin - bu bizga shriftimizga vaqtinchalik havolani, shuningdek CodePen-da kodni ko'rish imkoniyatini olish imkonini beradi.

Har bir narsani sozlaganingizdan so'ng, sahifaning pastki qismidagi "Yuklab olish" tugmasini bosing va arxivni yuklab oling. Ushbu arxivda siz o'zingizning shriftingizni ttf, eot, svg va woff formatlarida + shrift bilan namoyish sahifasini topasiz.

Saytdagi piktogrammalardan foydalanish

Endi biz CSS shriftini @font-face yordamida kiritishimiz va boshqa parametrlarni belgilashimiz kerak (ularning barchasi siz yuklab olgan arxivdagi CSS faylida yozilgan).

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; gapiring: none; font-variant: normal shrift: 1; -tekislash: kulrang rang ) .wdm-yulduz: oldin (kontent: "\e600"; ) .wdm-eagle: oldin (kontent: "\e601"; )

Endi biz shriftimizni HTML kodida quyidagicha ishlatishimiz mumkin:

Teg uchun sinf nomini belgilash biz ikonamizni olamiz.

Biz sizga dizaynerlar uchun bepul xizmatlar tanlovini taqdim etamiz. Bu birinchi variant, biz kelajakda yangi bo'limlar va vositalarni qo'shish orqali uni kengaytirishni rejalashtirmoqdamiz.

Shriftlar

• Google shriftlari hamma uchun sevimli shriftlar kutubxonasidir. Barcha holatlar uchun turli xil shriftlarni tanlash va yuklab olish imkonini beradi.
• 1001 Free Fonts - shriftlar kutubxonasi. U oson navigatsiyaga ega - shriftlar alifbo tartibida ham, turi bo'yicha ham tartiblangan. Rus shriftlari bo'limi mavjud.
• Fontstruct - bu onlayn shrift dizayneri. O'zingizning shriftingizni yaratishga imkon beradigan juda oddiy vosita. Siz nafaqat standart kvadratchalar, balki boshqa shakllar - nuqtalar, yumaloq burchaklar va boshqalar bilan ham chizishingiz mumkin. Yangi boshlanuvchilar uchun bu tipografiyani amalda sinab ko'rish va ko'rish uchun ideal vositadir.
• Shrift Squirrel eng katta shrift kutubxonalaridan biridir. Bundan tashqari, siz rasmni yuklashingiz va unda ishlatiladigan shriftlarning nomlarini olishingiz mumkin. Shriftlar do'koni va hatto logotipli kiyim do'koni ham mavjud.
• Type light - bu to'liq xususiyatli shrift muharriri. OpenType, TrueType va PostScript shriftlarini yaratish, tahrirlash va aylantirish imkonini beradi. Yuklab olish va o'rnatish kerak. Bepul versiya bepul versiyaga nisbatan cheklangan funksiyalarga ega. Lekin oddiy shrift yaratish uchun etarli.
• Shrift nima bu veb-sayt shriftlarini tanlash uchun onlayn xizmatdir. Biz shrift faylini yuklab olamiz, saytning URL manzilini ko'rsatamiz va yuklab olingan shrift saytda qanday ko'rinishini ko'ramiz. Qulay xizmat.
• 1001 Shriftlar – shriftlar kutubxonasi (15 000 dan ortiq). Oson navigatsiya - shrift hajmi, turi, mavzusi, dizayni va boshqalar bo'yicha tanlanishi mumkin. Menyu sizga chiqishni sozlash imkonini beradi, bu har bir shriftni turli xil variantlarda ko'rish imkonini beradi: o'lcham, uslub va boshqalar.
• Font Flame bu mos keladigan shriftlar juftini tanlash uchun onlayn xizmatdir. Bu juda sodda ishlaydi - asosiy sahifada turli xil shriftlarda ikkita yozuvdan iborat varaq mavjud. Agar sizga yoqqan bo'lsa, "Sevgi" tugmasini bosing; agar yoqmagan bo'lsa, "Nafrat" tugmasini bosing. Keyin tanlanganlarni yana ko'rishingiz mumkin. Shrift nomini bosish Google Shriftlarni ochadi.
• Typecast - prototip uchun shrift tanlash. Har qanday qurilmada shrift qanday ko'rinishini ko'rishingiz mumkin. Matnning har xil turlarini - sarlavhalar, tirnoq belgilari va boshqalarni aniqlash kerak. Siz shrift, o'lcham, uslubni tanlashingiz va chekinishlarni o'rnatishingiz mumkin. Siz o'rnatgan shriftlarda kelajakdagi sahifangizni ko'rasiz. Katta ortiqcha - bu tartibni tanlash (bir ustun yoki bir nechta, turli xil bloklarni joylashtirish).
• Wordmark - matn, logotip yoki sarlavha uchun foydalanuvchi kompyuterida o'rnatilgan shriftni tanlash imkonini beradi. Maydonga matn kiritganingizda, u uni turli shriftlarda ko'rsatadi. Siz o'lchamni tanlashingiz, ro'yxatdan o'tishingiz, qora va oq rangda yoki aksincha ko'rsatishingiz mumkin. Sizga yoqqan variantlar Twitter yoki Facebook-da e'lon qilinadi - foydalanuvchining xohishiga ko'ra. Elektron pochta orqali yuborilishi mumkin.

Stok rasmlari

• Unsplash - bu doimiy ravishda yangilanadigan fotosuratlar zaxirasi. To'plamlar mavzularga bo'lingan. Siz "afro-amerikalik" dan "tabiat"gacha hamma narsani topishingiz mumkin. Har bir fotosuratning o'z reytingi bor, siz eng yaxshi yoki yangilarini ko'rishingiz mumkin.
• FoodiesFeed - oziq-ovqat fotosuratlari. Rasmlar toifalarga bo'lingan. Siz eng yaxshi, eksklyuziv, piktogramma, maket va hokazolarni tanlashingiz mumkin.
• Bepul Refe Photos - "Haqiqiy hayot" tasvirlarining katta ro'yxati. Asosan landshaft va tabiat suratlari. Noqulay navigatsiya, asosiy sahifadagi barcha fotosuratlar aylanayotganda paydo bo'ladi.
• Kichkina tasvirlar - landshaftlar va binolarning yuqori sifatli fotosuratlari. Hafta davomida joylashtirilgan eng yaxshi fotosuratlar arxivini yuklab olishingiz mumkin. Rasmlar hashtaglar bilan etiketlanadi, lekin toifalarga ajratilmaydi.
• Gratisography - bu bepul fotosuratlarning ulkan kutubxonasidir. Barcha fotosuratlar oltita mavzuga bo'lingan: odamlar, jilmayishlar, shaharlar, narsalar, tabiat va hayvonlar. Siz so'zlar bo'yicha qidirishingiz mumkin.
• Stok Fotoga o'lim – stok rasmlari. Siz shunchaki qarash va tanlash mumkin emas. Ular bir oy oldin tanlashadi va elektron pochtangizni kiritganingizdan so'ng uni yuklab olishingizga ruxsat berishadi. Arxivning og'irligi taxminan 11 MB. Eng yaxshi fotosuratlar va yuklab olish havolasi elektron pochta orqali yuboriladi.
• Superfamous - g'ayrioddiy burchakdagi fotosuratlarning katta to'plami. To'plam kichik, ammo qiziqarli.
• Naqshlar kutubxonasi - naqsh va teksturalar. To'plam juda katta, shablonlari g'ayrioddiy. Ular siljitish bilan almashtiriladi va asta-sekin. Shablon butun ekranda yoki uning bir qismida qanday ko'rinishini ko'rishingiz mumkin.
• New Old Stock - arxivdan eski fotosuratlar. Bepul fotosuratlar kam, ammo yangilari muntazam ravishda paydo bo'ladi.
• Pexels - barcha holatlar uchun ko'p sonli fotosuratlar. Ular mavzu bo'yicha bo'lingan, qidirish juda oson.
• Jey Mantri - katta fotosuratlar to'plami. Bunday tasnif yo'q, siz uni oylar bo'yicha ko'rishingiz mumkin.

Stok grafik

• Brusheezy - Photoshop uchun bepul cho'tkalar, shablonlar, teksturalar va boshqalar. 12 toifa, har biri kichik toifalarga ega. Tanlov juda katta.
• Iconfinder - pullik va bepul piktogrammalar. Siz ICO, PNG, ICNS, SVG formatlarida yuklab olishingiz mumkin.
• Brushez - bu Photoshop uchun cho'tkalarning katta to'plami. Ularga qo'shimcha ravishda vektor primitivlari, shakllar, andozalar, uslublar ham mavjud. Har bir bo'lim kichik bo'limlarga bo'lingan. Misol uchun, cho'tkalar uchun 20 dan ortiq toifalar mavjud.
• Vecteezy - bu vektor grafikasi kutubxonasi, jumladan tasvirlar va illyustratsiyalar. Ko'p sonli toifalar va juda ko'p grafikalar.
• Iconbird - bu rus tilidagi piktogramma qidirish xizmati. Siz mavzuni kiritishingiz va piktogramma to'plamini olishingiz yoki toifalar bo'yicha ko'rib chiqishingiz mumkin.
• Icons8 - bu rus tilidagi xizmat bo'lib, u turli mavzularda 42 000 dan ortiq piktogramma taklif qiladi.

Infografika

• Vizualize - bu "Men haqimda" infografikasini yaratish uchun onlayn xizmat. Asosan grafik rezyumeni yaratadi.
• Canva har qanday dizaynni yaratish uchun oddiy vositadir. Taqdimot, plakat, ijtimoiy tarmoqlarda postlar, kitoblar, xatlar, materiallar va boshqalarni loyihalash imkonini beradi. Hamma narsa shablonlar asosida amalga oshiriladi, matn o'zgaradi. Lekin tanlash uchun juda ko'p andozalar mavjud.
• Osonlik bilan - andozalar asosida infografikani yaratish. O'rnatilgan onlayn muharrir dizaynni o'zgartirish, qo'shimcha elementlarni joylashtirish va matnni o'zgartirish imkonini beradi.
• Infogram - bu infografika va interaktiv diagrammalarni yaratish uchun onlayn xizmatdir. Barcha funktsiyalar mavjud emas; siz hisobni sotib olishingiz kerak bo'ladi.
• Visage har qanday vizual kontentni (diagrammalar, infografikalar, blog tasvirlari va boshqalar) yaratish uchun oddiy vositadir. Ko'p shablonlar, oddiy muharrir. Ba'zi xususiyatlar to'lanadi.
• Gliffy - diagrammalar yaratish uchun onlayn xizmat. Muharrir Microsoft Visio printsipi asosida ishlaydi.
• Visme taqdimotlar va infografika yaratish uchun onlayn vositadir. 1000 dan ortiq shablonlar. Tahrirlovchi sizga matn (sarlavhalar, ro'yxatlar, tirnoq va oddiy), jonlantirilgan matn va vidjetlarni qo'shish imkonini beradi. Bepul hisobda siz uni JPG fayl sifatida yuklab olishingiz mumkin.
• Piktochart - Yuqori sifatli grafikalar - taqdimotlar, infografika yoki bosma materiallarni yarating. Turli o'lchamdagi PNG, JPG formatlarini yuklaydi.
• Drawio - diagrammalar yaratish uchun qulay onlayn xizmat. Siz dropbox va shunga o'xshash xizmatlarga yoki diskka saqlashingiz mumkin.
• Venngage – oson infografika, plakatlar, hisobotlar, ijtimoiy tarmoqlar uchun materiallar va hokazolarni yaratish. Bepul versiyada u faqat nashrga havolani taqdim etadi. Yuklab olish uchun siz to'lashingiz kerak.
• Cacoo - bu diagrammalar va sayt xaritalarini chizish uchun onlayn xizmat. Ehtimol, qobiliyatlar bo'yicha eng yaxshisi. Ko'p sonli asboblar va shablonlar. PNG, PDF, SVG, PPT va boshqalarga eksport qilishingiz mumkin.
• Creately - bu onlayn diagramma xizmati. Faqat nashr uchun mavjud. Yuklab olish uchun haq olinadi.
• Lucidchart - bu diagrammalar va chizmalar yaratish uchun onlayn xizmat. Microsoft Visio diagrammasini import qilish mumkin. PDF, PNG va JPG formatlariga eksport qiladi. Pulli funksiya mavjud.

Ranglar

• Color Hunt - rang kombinatsiyalarini tanlash. Siz to'rtta rangni tanlashingiz mumkin. Tanlash uchun tayyor echimlar mavjud.
• TinEye - saytni tahlil qiladi va saytdagi rasmdan foydalanadigan resurslar ro'yxatini ko'rsatadi.
• ColorZilla - ranglar va gradientlarni yaratishga imkon beradi. Ular uchun CSS xususiyatlarini ko'rsatadi.
• Adobe Color CC - rang sxemalarini yaratish.
• Colicious - bo'sh joy tugmasini bosing va yangi rang hosil qiling.
• Rang sxemasi - rang sxemalarini tanlash. Ingliz va rus tillarida versiya mavjud. Sayt uchun ranglarni tanlash imkonini beradi. Nozik sozlash mavjud va rang kodini ko'rsatadi. Oxir-oqibat, u tanlangan rang sxemasida sahifani ko'rish imkonini beradi. Eng katta afzallik - bu rangni idrok etishning og'ishi nuqtai nazaridan gamutni ko'rish. Bundan tashqari, turli rangdagi modellarni tanlash imkonini beradi. Gimp, CSS, PNG va boshqalarni palitraga saqlaydi. Bir rang modelidan boshqasiga o'tkazish uchun rang konvertori mavjud.
• Paletton - bu ranglar kombinatsiyasini yaratish vositasi. Rang sxemasidan farqi yo'q.
• Pictaculous - PNG, JPG yoki GIF rasmlari palitrasini tahlil qiladi. Rasmni yuklang va undagi barcha ranglar to'plamini oling.
• Hex Color Tool - rang tanlash vositasi. Rangni sozlash uchun slayderlardan foydalaning va siz yorqinlikni tanlashingiz mumkin. Keyin tanlangan rang saqlanadi. Siz palitrani tanlashingiz mumkin.
• (Un)clrd brauzer plaginidir, u barcha ranglarni o'chiradi va saytni qora va oq rangda qoldiradi.
• BrandColors - rasmiy brend rang kodlarining eng katta to'plami. Brend nomini tanlang va uning ranglarini, shu jumladan CSS faylini yuklab oling.
• Colortyper - ranglarni g'ayrioddiy burchakdan tanlash. Ekranda kesishgan ko'p rangli belgilar ko'rsatilgan. Kesishmaning natijasi yangi rangdir. Qiziqarli ko'rinadi.

Ilhom

• Dribbble - Dizaynerlarning eng katta jamoasi. Ish, jamoa, muloqot - bu erda hamma narsani topishingiz mumkin.
• Freebbble - Dribbble shablonlari va dizaynlari. Ba'zi narsalarni bepul yuklab olish mumkin, ba'zilarini sotib olish mumkin. Siz CMS, dizaynerlar, piktogrammalar, maketlar, ishlab chiqilgan veb-sayt shablonlari va boshqalar uchun shablonlarni topishingiz mumkin.
• Muzli - Kundalik dizayn ilhomi. Dizaynerlar uchun eng g'ayrioddiy ishlarning namunalari bilan resurs.
• Awwwards - dizaynerlarning eng yaxshi ishlanmalari. Jamoa ovoz berish sayti sifatida tashkil etilgan. Kun, oy, yil va hokazolar sayti ko'p sonli dizaynlar, videolar, ishlanmalar tanlanadi.
• Design You Trust - bu eng so'nggi tendentsiyalar, yangiliklar, portfellar, dizaynlar va ijodiy e'lonlarni baham ko'radigan dizaynerlar hamjamiyatidir.
• Haqiqatan ham yaxshi elektron pochta xabarlari - yaxshi ishlab chiqilgan elektron pochta xabarlarining katta to'plami. Shablonni tanlang va uning html, CSS va JS kodlarini oling. Siz matnni, rasmlarni va boshqalarni o'zgartirishingiz mumkin.
• Fubiz - dizayn va ijodkorlik sohasidagi nashrlar. Siz fotosuratlar, dizaynlar, grafikalar, videolar va hokazolarni topishingiz mumkin. Hamma narsa toifalarga bo'lingan.
• Designspiration - bu Pinterest uslubidagi dizaynlar to'plami. Ko'p sonli g'oyalar va misollar - tipografiya, logotiplar, harflar va boshqalar.
• Behance - bu professionallar portfellari to'plami. Siz vakansiya yoki rezyumeni qoldirishingiz mumkin.
• Mobil naqshlar - iOS va Android skrinshotlari kutubxonasi. Hammasi bo'limlarga bo'lingan. Ko'p fikrlarni topishingiz mumkin.
• One Page Love - bu eng yaxshi veb-sahifa dizaynlari galereyasi. Shablonlar va mavzularni sotib olishingiz mumkin. Bepullari ham bor.
• Uispace - dizaynerlar uchun resurs. Siz psd, eskiz, shrift, maket va hokazolarni bepul yuklab olishingiz mumkin.

Grafik muharrirlar

• DAZ 3D - 3D modellashtirish. Ro'yxatdan o'ting va ish stoli ilovasini yuklab oling.
• Gimp - bu Photoshop-ning bepul analogidir. Modulli panjarani sozlash, qoʻllanmalar yaratish, qatlamlar bilan ishlash, effektlar qoʻshish va h.k. imkonini beradi. Bu Photoshop uchun yaxshi bepul almashtirish. U kengaytirilishi mumkin - siz qo'shimcha plaginlarni yuklab olishingiz mumkin.
• Blender - 3D modellashtirish, animatsiya, renderlash, ovoz, video. O'yinlar yaratish imkonini beradi. Tez rivojlanayotgan muharrir, juda mashhur.
• Aviary - bu onlayn fotosuratlarni tahrirlash xizmati. Ko'p variantlar, jumladan, Qizil ko'z effekti, o'lchamini o'zgartirish va hk.
• Pixlr - bu onlayn fotosurat muharriri va alohida grafik muharriri. Oxirgisi Photoshop-ga o'xshaydi. Diskka saqlaydi.
• BeFunky - bu onlayn fotosuratlarni tahrirlash xizmati. Effektlar, ramkalar, grafikalar, retush va boshqalar. Rus tilidagi interfeys mavjud.
• Inkscape to'liq ochiq manbali vektor grafik muharriri. SVG formatining imkoniyatlarini qo'llab-quvvatlaydi - shakllar, konturlar, matnlar bilan ishlash, rastrli grafiklarni vektorlashtirish va boshqalar. Vektorli tasvirlarni qayta ishlashdan tashqari, u veb-sayt shablonini yaratish va uni kesish imkonini beradi - modulli panjara mavjud. Orqa fonlar, bannerlar, vektor logotiplari va boshqalarni chizish imkonini beradi.
• IconEdit2 - piktogramma chizish uchun juda oddiy dastur. Filtrlari bor. Android va Apple uchun rasmni eksport qilish imkonini beradi. Siz rang chuqurligini sozlashingiz, belgini aylantirishingiz va sozlashingiz mumkin. Shaffoflikni, har bir ICO fayliga bir nechta tasvirni va barcha chizish vositalarida antialiasingni qo'llab-quvvatlaydi.
• Falco GIF Animator - bu kadrma-kadr animatsiya va animatsion piktogramma yaratish uchun dastur. Resursda turli xil dasturlarni yuklab olishingiz mumkin.
• Krita professional ochiq manbali ish stoli muharriri. Turli xil OS uchun mavjud.
• Boxy-SVG - bu Adobe Illustrator, Sketch va Inkscape-ga o'xshash vektor grafik muharriri.
• Photopos - bu ko'p funktsiyali dastur bo'lib, unda foto muharriri, grafik muharrir va kompyuter grafikasini yaratish uchun dastur mavjud.
• 5Dfly - bu fotosuratlarni qayta ishlash uchun bepul dastur. PowerPoint yordamida slayd-shoularni yaratishi mumkin. PDF-konvertorni alohida yuklab olishingiz mumkin.
• PaintStar bepul tasvir muharriri. Interfeys Paint-ga juda o'xshaydi, lekin ko'proq imkoniyatlarga ega. Masalan, qatlamlar.
• PhotoScape oddiy foto muharriri. Yorqinlik va rangni sozlash, oq rang balansi, orqa yorug'likni to'g'rilash, ramkalar, sharlar, mozaika rejimi, matn qo'shish, tasvirlarni chizish, kesish, filtrlar, qizil ko'zni olib tashlash, rang berish, cho'tka, klon shtampi, effekt cho'tkasi va boshqalar.

Hammaga salom! Bugun veb-dizayn bo'limining bir qismi sifatida men veb-saytni ishlab chiqishda foydalanish kerak bo'lgan shriftlar haqida gapirmoqchiman.

Qoidaga ko'ra, hamma ham saytning kontent qismi uchun qanday shriftlardan foydalanish kerakligi haqida o'ylamaydi. Veb-sayt uchun chiroyli shriftlarni tanlash dizaynni rivojlantirishning eng muhim qismidir. Sayt ma'lumotlarining o'qilishi bu qismga bog'liq bo'lgani uchun va bu, biz bilganimizdek, saytdagi eng muhim narsa. Shu sababli, bu masalaga juda jiddiy yondashish kerak.

Ammo veb-sayt dizaynida faqat kelajakdagi saytga tashrif buyuruvchilar uchun mavjud bo'lgan shriftlardan foydalanishingiz mumkin. Bu turli xil operatsion tizimlar va brauzerlar bilan barcha foydalanuvchilar uchun sahifalar to'g'ri ko'rsatilishini ta'minlash uchun amalga oshiriladi. Aks holda, agar siz nostandart shriftlardan foydalansangiz, ko'pchilik tashrif buyuruvchilar hamma narsani boshqacha ko'radi va ko'p hollarda yoqimsiz tarzda ko'radi. Shu sababli, quyida keltirilgan standart shriftlardan foydalanish tavsiya etiladi. Shriftlar ro'yxati Windows XP va undan yuqori operatsion tizimda o'rnatilgan shriftlarni o'z ichiga oladi.

Ushbu maqolada men boshqa operatsion tizimlarning shriftlarini ko'rib chiqmayman. Tajribali maket dizayneri turli xil operatsion tizimlardagi shriftlarni taqqoslashni bilishi kerak va maket paytida u bu nuqtani CSS uslublarida yozadi.

Asosan, dizaynning tarkibiy qismini ishlab chiqishda ikki turdagi shriftlar qo'llaniladi:

• serif shriftlari
• sans serif shriftlari

Serif shriftlari- (inglizcha serif - serif) uslubi shtrixlar bilan boshlanadigan va tugaydigan shriftlar. Masalan, Times New Roman.

Sans serif shriftlari(chopped shriftlar) - (inglizcha sans-serif - sans serif) serifsiz qat'iy, to'g'ri chiziqli shriftlar. Masalan, Arial.

Quyida siz serif va sans serif shriftlarining skrinshotini ko'rishingiz mumkin.

Veb-dizayn uchun shriftlar:

• Arial
• Arial qora
• Arial Dar
• Antiqua kitob
• Asr gotikasi
• Komiks Sans MS
• Kuryer yangi
• Franklin Gothic O'rta
• Gruziya
• Ta'sir
• Lucida konsoli
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino linotipi
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings (turli belgilar va belgilar)
• Qanotlar (turli xil belgilar va belgilar)

Men kursiv o'rniga bir qator shriftlarda kursiv yo'qligi kabi bir narsani ta'kidlashni istardim, ular matnni o'qishni qiyinlashtiradigan qiyalikdan foydalanadilar;

Windows-da kursiv bo'lmagan standart shriftlardan:

• Arial qora
• Komiks Sans MS
• Franklin Gothic O'rta
• Ta'sir
• Lucida konsoli
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Men kursivga ega bo'lmagan shriftlar haqida gapirganim uchun, dastlab qalin shriftlar mavjudligini ham ta'kidlamoqchiman. Shu sabablarga ko'ra, qalin shriftni ko'rsatadigan uslublardan foydalanishning ma'nosi yo'q, chunki natija bizga kerakli bo'lmaydi.

Veb-saytingiz uchun to'g'ri shriftni topishning ko'plab usullari mavjud. Masalan, siz pullik obunani talab qiladigan katta shrift kutubxonalari bilan xizmatlardan foydalanishingiz mumkin.

Agar siz byudjetga ega bo'lsangiz yoki kichik loyiha bilan tajriba o'tkazayotgan bo'lsangiz, hamma uchun ochiq bo'lgan bepul veb-shriftlardan foydalanishingiz mumkin. Veb-saytingiz uchun to'g'ri veb-shriftni topish ko'p vaqt talab qilishi mumkin, shuning uchun biz sizga ularning orasidan eng yaxshisini taqdim etamiz.

1. Montserrat

Tipografiya rivojlanib borar ekan, u eski shahar plakatlari va belgilaridan uzoqlashadi. Ushbu shriftni yaratuvchisi Buenos-Ayres ko'chalarida ko'rgan shahar plakatlarining tipografiyasining go'zalligini saqlab qolishga harakat qildi.

2. Abril Fatface

Abril Fatface turli maqsadlar uchun yaratilgan 18 ta uslubda keladigan katta shriftlar oilasining bir qismidir. Ushbu shrift kuchli va oqlangan mavjud bo'lib, uni diqqatga sazovor sarlavhalar yaratish uchun ajoyib echimga aylantiradi. Ko'pincha Lato, Open Sans va Droid Sans bilan birlashtiriladi.

3. Playfair displeyi

X-balandligi va harflarning kichik pastki belgilarini hisobga olgan holda, Playfair Display, ayniqsa, bo'sh joy cheklangan bo'lsa, sarlavha yozish uchun ham mos keladi. U Gruziya bilan yaxshi birlashadi va ko'pincha Oswald, Lato va Arvo bilan ishlatiladi.

4. GT Valsheim

Bugungi kunda ko'plab bloglarda qo'llaniladigan GT Walsheim geometrik sans seriflarning vakili va Grilli Type oilasining bir qismidir. To'liq shrift to'plami uchun to'lashingiz kerak, ammo Grilli Type GT Walsheim-ning bepul sinov versiyasini taklif qiladi.

5. Merriweather

Agar sizning loyihangiz uchun ekranda o'qilishi ustuvor bo'lsa, shu maqsadda yaratilgan Merriweather-ni tekshiring. Bundan tashqari, ushbu shrift doimiy ravishda takomillashtirilmoqda.

6. Jozefina Sans

Jozefin Sans vintage shved dizaynidan ilhomlanib, nafis, geometrik estetika bilan ajralib turadi.

7. Gravitas One

Gravitas One Angliyada sanoat inqilobi davrida paydo bo'lgan qalin reklama shrifti bo'lgan "Buyuk Britaniyaning yog'li yuziga" asoslangan. Ushbu shrift o'rta va katta hajmda ajoyib ko'rinadi va sarlavhalar, sarlavhalar va yorliqlar uchun mos keladi.

8. Yura

Ushbu shriftning harflari Kaya-li harfining shakllarini takrorlaydi. Unda kirill va yunon alifbosi gliflari ham mavjud. U engil, oddiy, o'rta va qalin vaznlarda mavjud.

9. Gotika ligasi

Dastlab Morris Fuller Benton tomonidan 1903 yilda American Type Founders Company uchun ishlab chiqilgan, League Gothic yangilanish va yangi gliflar qo'shilishi bilan yangi foydalanishni topdi.

10. Fyord

Fjord dastlab bosma kitoblar uchun yaratilgan serif shrifti bo'lib, ayniqsa uzun matnni kichik bosma formatga joylashtirish uchun juda mos keladi. U saytdagi katta hajmdagi matn mazmunini yaratish uchun ishlatilishi mumkin, chunki shrift aniq tuzilishga, ko'zga ko'ringan seriflarga va uzun, oqlangan bosh va oyoqlarga ega.

11. Amaranth

Amaranth shriftlari oilasi qiya bo'lmagan kursiv dizaynga ega bo'lib, kichik kontrast va sezilarli egri chiziqlarga ega. Amaranthning uchta uslubi deyarli har qanday boshqa shrift bilan yaxshi mos keladi. Siz ushbu shrift bilan o'ynashingiz mumkin - tajriba va eng yaxshisini tanlang.

12. Poli

Ushbu o'rta kontrastli shrift dastlab mahalliy Wayuunaiki tili uchun yaratilgan bo'lib, u keng gliflarni talab qiladi. U kichik poyalari va katta x-balandligi bilan ajralib turadi, bu uni ayniqsa kichik o'lchamlarda foydali qiladi.

13. Gentium Basic

Ushbu shrift lotin va yunon harflarini o'z ichiga olgan ko'p tilli shrift sifatida yaratilgan, shuningdek, Gentium Plus versiyasida kirill va kengaytirilgan yordam. Gentium Basic va Gentium Book Basic bepul veb-versiyasida mavjud, lekin faqat lotin alifbosi bilan cheklangan.

14. Ochiq Sans

Open Sans - gumanistik grotesklarning vakili. Ushbu shrift juda tushunarli va veb va mobil interfeyslarga mos keladi. Bu oddiy harflar uslubiga ega, qiya bo'lmagan shrift bo'lib, u turli maqsadlarda ishlatilishi mumkin bo'lgan neytral, ammo etarlicha yoqimli ko'rinish bilan ajralib turadi.

15. Regular daftar

Bu ko'p funktsiyali shrift bo'lib, katta x balandligi, kuchli rang kontrasti va matnning o'qilishiga hissa qo'shadigan yaxshi aniqlangan seriflarga ega. Ushbu shrift bosma nashrlarda ham, piksellar sonini past ekranda ham yaxshi ko'rinadi.

16. Signika

Ushbu bepul veb-shrift sans serifning vakili. Past kontrast va yuqori x-balandligi Signika-ni ekranda yaxshi ko'rsatishga imkon beradi. Belgilarning keng tanlovi belgilar, piktogrammalar va o'qlarni o'z ichiga oladi.

17. Jozefin plitasi

1930-yillarga xos bo'lgan geometrik shrift kanonlari bo'yicha yaratilgan, Skandinaviya xususiyatlarini qo'shgan holda, Josefin Slab plita shriftining xususiyatlariga ega va yozuv mashinkasi shriftini eslatadi. Qizig'i shundaki, uning x balandligi bosh harf balandligining yarmiga teng.

18. Forum

Nomidan ko'rinib turibdiki, bu Rim shrifti bo'lib, u bosh harflar bilan sarlavhalar uchun yaxshi, lekin matnni ko'rsatish uchun ham mos keladi. Ushbu shriftning nafis nisbatlari yarim doira arklar, gorizontal kornişlar va vertikal ustunlar bilan klassik arxitekturani eslatadi.

Mayalarning eng mashhur shaharlaridan biri nomi bilan atalgan Tikal Sans Janubiy Amerika tsivilizatsiyasini yozishda ishlatilgan gliflarning xususiyatlariga ega. Uning yaratuvchisi shriftga zamonaviy ko'rinish beradigan va uning o'qilishiga foydali ta'sir ko'rsatadigan katta x balandlikni tanladi va uslublarning katta tanlovi uni turli maqsadlarda ishlatishga imkon beradi.

20. Arvo

Chop etish va internet uchun mos bo'lgan bu geometrik shrift Rim, Kursiv, Rim qalin va qalin kursivda mavjud. Arvoning past kontrasti uning ekranda o'qilishini oshiradi.

21. Bevan

Bevan 1930-yillarning an'anaviy slab shrifti asosida yaratilgan. Harflar raqamlashtirildi, yangi shakl berildi va veb-versiyasi uchun optimallashtirildi. Bu veb-saytlar uchun mos bo'lgan bir nechta o'ta qalin shriftlardan biridir.

22. Eski standart TT

Old Standard TT 19-asr oxiri va 20-asr boshlarida mashhur boʻlgan va keyin uzoq vaqt davomida unutilgan Modern serif shriftiga asoslangan edi. Ushbu shrift ilmiy tadqiqot yoki yunon yoki kirill alifbosidagi matnlar kabi ma'lum turdagi kontentga uslub qo'shish uchun javob beradi.

23. Kreon

Yangiliklar veb-saytlari va bloglar uchun ideal bo'lgan bu serif shrifti, shuningdek, slab shriftining xususiyatlariga ega, ammo uning muvozanati va past kontrasti Kreonni sezilarli darajada shaxsiy qiladi.

24. Droid Sans

Droid Sans hatto mobil telefon ekranlaridagi menyular kabi kichik interfeyslarda ham maksimal darajada o'qilishi uchun optimallashtirilgan. Bu oddiy, ochiq harf shakllariga ega neytral, qiya bo'lmagan shrift.

25. Italiana

Ushbu shriftni yaratuvchisi klassik italyan xattotligidan ilhomlangan, shuning uchun shrift nafislikni qo'shish kerak bo'lgan loyihalar uchun juda foydali bo'ladi. Italiana ham bosma va elektron formatda yangiliklar sarlavhalarini yozish uchun javob beradi.

26. Vollkorn

Ushbu batafsil, xususiyatlarga boy serif shrifti juda mashhur. Uning ravshanligi va mustahkamligi ishonch va energiya beradi, bu shriftni sarlavhalar va sarlavhalar uchun katta o'lchamlarda, shuningdek, kichikroq formatlardagi katta hajmdagi matnlarda teng darajada samarali qiladi.

27. Aktyor

Ushbu shrift ayniqsa katta x balandligiga ega, bu juda ko'p joy talab qiladi. Aktyor, shuningdek, 6 va 9 raqamlari kabi ba'zi belgilar uchun eski uslubga ega.

16-asrga borib taqaladigan ildizlarga ega Garamond gumanistik shrifti haqiqiy tipografik ikonka aylandi, ko'pincha zamonaviy shriftlarni, jumladan EB Garamondni yaratish uchun asos bo'lib xizmat qiladi.

31. Ubuntu

Ubuntu Grotesque ish stoli va mobil qurilmalarda veb matnni shaxsiylashtirish uchun yaratilgan. Foydalanuvchilar ushbu shriftni sinab ko'rishlari, o'zlari xohlagancha o'zgartirishlari va yaxshilashlari tavsiya etiladi.

32. Rosario

Rosario - bu klassik gumanistik sans serif bo'lib, u matn paragraflarini stilizatsiya qilish uchun juda mos keladi.

33. Roboto plitasi

Roboto Slab - Roboto oilasining shriftlaridan biri. Blok versiyasi, ayniqsa, geometrik shakllari va ochiq egri chiziqlari bilan diqqatni tortadi. Bu gadjet ekranlari va matnlarning bosma versiyalari uchun bir xil darajada mos keladi.

34. Osvald

Shrift klassik Alternativ Gothic sans serifning qayta ishlangan versiyasidir. Osvald yaqinda turli og'irliklar, kengaytirilgan belgilar to'plami va yaxshi kerningga ega bo'lish uchun yangilandi.

35. Turg'un

Stalemate - bu qo'lda yozilgan shrift bo'lib, o'ziga xos vintage xislatiga ega. U aksanlar yaratish va veb-saytingizni shaxsiylashtirish uchun javob beradi.

36. Crimson matn

Ushbu ehtiyotkorlik bilan ishlab chiqilgan klassik proportsional shrift katta hajmdagi matnlarni ko'rsatish va sarlavhalarni yozish uchun ishlatilishi mumkin.