Вэб хөгжүүлэхэд зориулж өөрийн фонт хийх. Хэрхэн html дээр сайхан фонт хийх вэ: хэмжээ, өнгө, html үсгийн шошгууд

Сайн уу! Өнөөдөр би вэб дизайны хэсгийн нэг хэсэг болгон вэб сайтыг хөгжүүлэхэд ашиглах ёстой фонтуудын талаар ярихыг хүсч байна.

Дүрмээр бол, сайтын агуулгын хэсэгт ямар фонт ашиглах ёстой талаар хүн бүр боддоггүй. Вэбсайтад зориулж гоё фонт сонгох нь дизайн боловсруулах хамгийн чухал хэсэг юм. Сайтын мэдээллийн уншигдах чадвар нь энэ хэсгээс хамаардаг бөгөөд бидний мэдэж байгаагаар энэ нь сайтын хамгийн чухал зүйл юм. Ийм учраас энэ асуудалд маш нухацтай хандах ёстой.

Гэхдээ та зөвхөн ирээдүйн сайтад зочлох боломжтой фонтуудыг вэбсайтын дизайнд ашиглах боломжтой. Энэ нь янз бүрийн үйлдлийн систем, хөтөч бүхий бүх хэрэглэгчдэд хуудсуудыг зөв харуулахын тулд хийгддэг. Үгүй бол, хэрэв та стандарт бус фонт ашигладаг бол ихэнх зочдод бүх зүйлийг өөрөөр, ихэнх тохиолдолд үзэмжгүй байдлаар харах болно. Ийм учраас доор жагсаасан стандарт фонтуудыг ашиглахыг зөвлөж байна. Фонтын жагсаалтад Windows XP ба түүнээс дээш үйлдлийн системд суулгасан фонтууд багтсан болно.

Энэ нийтлэлд би бусад үйлдлийн системүүдийн фонтуудыг авч үзэхгүй. Туршлагатай зохион бүтээгч нь янз бүрийн үйлдлийн систем дэх фонтуудын харьцуулалтыг мэддэг байх ёстой бөгөөд зохион байгуулалтын явцад энэ цэгийг CSS загварт бичнэ.

Үндсэндээ дизайны агуулгын хэсгийг боловсруулахдаа хоёр төрлийн фонтыг ашигладаг.

• serif фонтууд
• sans serif фонтууд

Serif фонтууд- (Англи хэлний serif - serif) фонтууд нь зураасаар эхэлж, төгсдөг. Жишээлбэл, Times New Roman.

Sans serif фонтууд(жижиглэсэн фонтууд) - (Англи хэлээр sans-serif - sans serif) хатуу, шулуун шугамтай, серифгүй фонтууд. Жишээ нь Arial.

Доор та serif болон sans serif фонтуудын дэлгэцийн агшинг харж болно.

Вэб дизайны фонтууд:

• Ариал
• Ариал Хар
• Ариал Нарийн
• Antiqua ном
• Зууны готик
• Comic Sans MS
• Шуудангийн шинэ
• Франклин Готик дунд
• Гүрж
• Нөлөөлөл
• Lucida консол
• Lucida Sans Unicode
• Microsoft Sans Serif
• Палатино Линотип
• Сильфаен
• Тахома
• Times New Roman
• Требучет МС
• Вердана
• Webdings (янз бүрийн тэмдэг, тэмдэг)
• Далавч (янз бүрийн тэмдэг, тэмдэг)

Налуу үсгийн оронд хэд хэдэн фонт дээр налуу байхгүй байгаа нь текстийг уншихад хэцүү болгодог гэдгийг би бас тэмдэглэхийг хүсч байна.

Windows дээрх налуу үсэггүй стандарт фонтуудаас:

• Ариал Хар
• Comic Sans MS
• Франклин Готик дунд
• Нөлөөлөл
• Lucida консол
• Lucida Sans Unicode
• Microsoft Sans Serif
• Сильфаен
• Тахома

Нэгэнт налуу үсэггүй фонтуудын талаар дурьдсан болохоор эхэндээ тод фонттой фонтууд байдгийг бас сануулмаар байна. Эдгээр шалтгааны улмаас тод фонтыг харуулсан хэв маягийг ашиглах нь утгагүй бөгөөд үр дүн нь бидэнд хэрэгтэй зүйл биш болно.

Энэ нийтлэлийн зааварт би өөрийн бүтээсэн дүрсүүдийг ашиглан вэбсайтын фонтыг хэрхэн үүсгэхийг танд хэлэх болно. Үүний тулд бидэнд хэрэгтэй зүйл бол вектор график (Adobe Illustrator эсвэл Inkspcape) болон интернетэд нэвтрэх програм юм. Та өгүүллийн төгсгөлд үүнд ашигласан бүх зураг, дүрс, css фонтыг татаж авах боломжтой.

Энэ хичээлийн хувьд бид энгийн зүйл хийх болно. Эхний дүрсний хувьд бид ердийн од зурна. Хоёрдахь дүрсний хувьд дотор нь W үсэг бүхий бүргэд. Энэ нь зурахад маш хялбар бөгөөд та ямар ч хэлбэр, хослолыг үүсгэж болно. Би эдгээр зорилгоор illustrator ашигласан.

Бүтээлч хэсгийг дуусгасны дараа таны бүтээлийг SVG форматаар хадгалах ёстой. "Save As" дээр товшоод файлын төрлийг SVG болгон сонгоно уу. Одоо та фонт үүсгэх ажлыг шууд үргэлжлүүлж болно.

Эдгээр зорилгоор бид алдартай, үнэ төлбөргүй IcoMoon үйлчилгээг ашигладаг.

Хамгийн эхний хийх зүйл бол шинэ төсөл үүсгэх тул зүүн дээд буланд байрлах цэсэн дээр дарж "Шинэ төсөл" дээр дарна уу. Дараа нь бид "Импортын дүрс" товчийг дарсны дараа бэлэн svg файлуудаа ачаална. Эдгээр алхмуудыг гүйцэтгэсний дараа та монитор дээрээ иймэрхүү зураг харагдах болно.

Одоо бид дүрс бүрийн кодыг (манай тохиолдолд e600 ба e601 байх болно), фонтын нэр, CSS угтвар гэх мэтийг өөрчлөх боломжтой болсон. Энэ бүгдийг "Тохиргоо" хэсэгт хийдэг. Мөн бид "Шуурхай хэрэглээг идэвхжүүлэх" холбоос дээр дарснаар фонтыг хэрхэн ажиллаж байгааг харах боломжтой бөгөөд энэ нь бидэнд фонт руу түр зуурын холбоос авах, мөн CodePen дээр кодыг харах боломжийг олгоно.

Бүх зүйлийг тохируулсны дараа хуудасны доод хэсэгт байрлах "Татаж авах" товчийг дараад архивыг татаж авна уу. Энэхүү архиваас та өөрийн фонтыг ttf, eot, svg, woff форматаар + үсгийн фонттой танилцуулга хуудаснаас олох болно.

Сайт дээрх дүрсүүдийг ашиглах

Одоо бидэнд хэрэгтэй зүйл бол @font-face ашиглан CSS фонт оруулах, бусад параметрүүдийг зааж өгөх явдал юм (тэдгээрийг бүгдийг нь таны татаж авсан архивын css файлд бичсэн болно.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; ярих: none; font-variant: normal: 1; -smoothing: grayscale; ) .wdm-star:before (агуулга: "\e600"; ) .wdm-eagle:fore (агуулга: "\e601"; )

Одоо бид фонтыг HTML кодонд дараах байдлаар ашиглаж болно.

Тагийн ангийн нэрийг зааж өгч байна Бид өөрсдийн дүрсийг авдаг.

Удаан хугацааны турш юу ч бичээгүй ч яахав.
Би одоогоор вэб хөгжүүлэлт хийж байгаа бөгөөд сайхан цэсний талаар асуулт гарч ирэв. Хөдөлгөөнт дүрстэй, гэхдээ JS эсвэл Flash-гүй. Мэдээжийн хэрэг, энэ бүгдийг CSS3 ашиглан хийдэг бөгөөд үүнээс гадна бид зураг ашиглахгүй. Бүх.

Бид үүнийг ажиллуулж, цонхыг харж байна

"Text > SVG Font Editor..."-г нээвэл баруун талд самбар гарч ирнэ

1-р фонт дээр дарж, үсгийн нэрээр сольж, жишээ нь MySomeFont, баруун талд байгаа *Typeface* талбарыг арилгана уу.

Одоо табыг нээнэ үү *Glyphs * манай самбар дээрх бүх зүйлийг *SVG Font Editor*. Бидний харж байгаагаар англи хэл дээрх бүдүүвчийг аль хэдийн нэмж оруулсан болно. Хулганы баруун товчийг дарахад саад болсон бүх зүйлийг устгаж болно. Та мөн глифийн нэр болон түүний тодорхойлсон тэмдгийг засах боломжтой

Зургийг өөрсдөө нэмж эхэлцгээе.

"Файл > Импорт..." (Ctrl+I) үсгийн фонтанд оруулахыг хүссэн зургийг импорт хийнэ үү. Хэрэв энэ нь растер график бол түүнийг нэмсний дараа та "Outline > Vectorize Raster" (Alt + Shift + B) хийх хэрэгтэй. Би хувьдаа сонголттой хутгалдаж байгаагүй, зүгээр л *OK* дээр дарахад вектор зураг үүснэ.

Бид растерийг устгадаг (Үүнийг сонгоод Устгах товчийг дарна уу) - объектыг сонгохдоо мөрний доод хэсэгт энэ нь растер (Зураг) эсвэл вектор (Тойм) эсэхийг бичнэ.

Дараа нь тоймыг ажлын талбар руу сунгана (дээд самбарт оролтын хэсгүүд байдаг - x: 0, y: 0; W: 1000 ба H: 1000). Би тоймыг сонгоод орхиод *Глифс* таб дахь дуртай самбар *SVG Font Editor* руу очно уу. Одоо бидний тоймтой холбохыг хүсч буй глифийг сонго. Энэ нь *a* тэмдэгтэй глиф байх болтугай. Дараа нь *Сонголтоос муруй авах* товчийг дарна уу. Бид бүгдийг зөв хийсэн эсэхийг шалгахын тулд доорх *Текст* талбарт нэмсэн тэмдэгтийг оруулаад бидний зураг гарч ирнэ. Шалгасны дараа контурыг ажлын талбараас цааш зөөж эсвэл устгаж болно;

Мөн бид үсгийн фонтын бүх ашиглагдаагүй тэмдэгтүүдийг *Глифс* таб дахь *Сонголтоос авах* гэснийг *Алга болсон Глиф*-ээр дамжуулан дурын тоймтой холбож болно. Үйл ажиллагаа нь дээр дурдсанчлан явагдана.

Ерөнхийдөө бид тэмдэг дээрээ бүх контурыг нэмсэн. Одоо бид XML файлыг өөрөө бага зэрэг засах хэрэгтэй. *XML Editor*-ийг нээнэ үү (Shift+Ctrl+X) - товчлуур нь үндсэн самбар дээр - баруун талаас дөрөвт байна. Мөн бид тухайн зүйлийн *id* шинж чанарыг өөрчлөх хэрэгтэй *

@фонт-нүүр (
font-family: "MySomeFont";
src: url("fonts/font.svg") формат("svg");
}

Ер нь тэгээд л болоо.

Таны вэбсайтад тохирох фонтыг олох асар олон арга бий. Жишээлбэл, та төлбөртэй захиалга шаарддаг асар том фонтын сангуудтай үйлчилгээг ашиглаж болно.

Хэрэв та төсөвтэй эсвэл жижиг төсөл туршиж байгаа бол олон нийтэд нээлттэй үнэгүй вэб фонтуудыг ашиглаж болно. Вэбсайтдаа тохирох вэб фонтыг олох нь маш их цаг хугацаа шаарддаг тул бид танд хамгийн шилдэг фонтыг санал болгож байна.

1. Монцеррат

Типографи хөгжихийн хэрээр хотын хувцасны чимэг зурагт хуудас, тэмдгүүдээс холддог. Энэхүү фонтыг бүтээгч Буэнос-Айресын гудамжинд харсан хотын зурагт хуудасны хэв маягийн гоо сайхныг хадгалахыг хичээсэн.

2. Абрил бүдүүн царай

Abril Fatface нь янз бүрийн зорилгоор бүтээгдсэн 18 загвартай том фонтын гэр бүлийн нэг хэсэг юм. Энэхүү фонт нь хүчтэй, гоёмсог дүр төрхтэй тул анхаарал татахуйц гарчиг үүсгэхэд маш сайн шийдэл болж өгдөг. Энэ нь ихэвчлэн Lato, Open Sans, Droid Sans-тай хослуулагддаг.

3. Playfair дэлгэц

Үсгүүдийн х-өндөр, жижиг дэвсгэртүүдийг харгалзан Playfair дэлгэц нь гарчиг бичихэд тохиромжтой, ялангуяа орон зай хязгаарлагдмал бол. Энэ нь Жоржиатай сайн хослодог бөгөөд Освальд, Лато, Арво зэрэгтэй ихэвчлэн ашиглагддаг.

4. GT Walsheim

Өнөөдөр олон блогт ашиглагддаг GT Walsheim бол геометрийн хэмнэлтгүйн төлөөлөл бөгөөд Grilli Type гэр бүлийн нэг хэсэг юм. Та бүхэл бүтэн фонтыг төлөх ёстой, гэхдээ Grilli Type нь GT Walsheim-ийн үнэгүй туршилтыг санал болгодог.

5. Мерривезер

Хэрэв дэлгэцэн дээр унших чадвар нь таны төслийн нэн тэргүүний асуудал бол энэ зорилгоор бүтээгдсэн Merriweather-ийг шалгаарай. Үүнээс гадна энэ фонтыг байнга сайжруулж байдаг.

6. Жозефина Санс

Жозефин Санс нь Шведийн хувцасны чимэг загвараас санаа авсан бөгөөд гоёмсог, геометрийн гоо зүйн онцлогтой.

7. Gravitas One

Gravitas One нь Англид аж үйлдвэрийн хувьсгалын үеэр гарч ирсэн "UK fat face" хэмээх тод рекламны фонт дээр суурилсан. Энэ фонт нь дунд болон том хэмжээтэй бол гайхалтай харагддаг бөгөөд гарчиг, гарчиг, табуудад тохиромжтой.

8. Юра

Энэ үсгийн үсэг нь Кая-ли үсгийн хэлбэрийг давтдаг. Мөн кирилл болон грек цагаан толгойн үсгийн дүрсийг агуулсан. Энэ нь хөнгөн, хэвийн, дунд, тод жинтэй байдаг.

9. Готик лиг

Моррис Фуллер Бентон анх 1903 онд Америкийн төрлийн үүсгэн байгуулагчдын компанид зориулан зохион бүтээсэн Лиг Готик нь шинэчлэлт болон шинэ глифүүдийг нэмсэн шинэ хэрэглээг олсон.

10. Фьорд

Fjord нь хэвлэмэл номонд зориулж анх бүтээгдсэн сериф фонт бөгөөд урт текстийг жижиг хэвлэх форматад оруулахад онцгой тохиромжтой. Үсгийн фонт нь тодорхой бүтэцтэй, тод харагдацтай, урт, гоёмсог толгой, хөлтэй тул сайт дээр их хэмжээний текст контент үүсгэхэд ашиглаж болно.

11. Амарант

Amaranth фонтын гэр бүл нь ташуу бус налуу загвартай бөгөөд бага зэргийн ялгаатай, мэдэгдэхүйц муруйлттай. Амарантын гурван загвар нь бараг ямар ч фонттой сайн хослодог. Та энэ фонтоор тоглож болно - туршилт хийж, хамгийн сайныг нь сонго.

12. Поли

Энэхүү дунд зэргийн тодосгогч фонтыг уугуул Wayuunaiki хэлэнд зориулан бүтээсэн бөгөөд энэ нь өргөн глиф шаарддаг. Энэ нь жижиг иштэй, том х өндөртэй тул жижиг хэмжээтэй үед хэрэглэхэд тохиромжтой.

13. Gentium Basic

Энэхүү фонт нь олон хэлтэй фонт хэлбэрээр бүтээгдсэн бөгөөд үүнд латин, грек үсэг, мөн кирилл болон Gentium Plus хувилбарт дэвшилтэт дэмжлэг орно. Gentium Basic болон Gentium Book Basic нь үнэгүй вэб хувилбарт байдаг боловч зөвхөн латин цагаан толгойн үсгээр хязгаарлагддаг.

14. Нээлттэй Sans

Open Sans бол хүмүүнлэгийн гротескүүдийн төлөөлөгч юм. Энэ фонт нь гаргац сайтай бөгөөд вэб болон гар утасны интерфейсийн аль алинд нь зохицдог. Энэ нь янз бүрийн зориулалтаар ашиглах боломжтой төвийг сахисан боловч хангалттай тааламжтай дүр төрхөөр тодорхойлогддог энгийн үсгийн хэв маягтай, налуу биш фонт юм.

15. Тогтмол дэвтэр

Энэ нь том x өндөртэй, өнгөний тод ялгаатай байдал, сайн тодорхойлсон сериф бүхий олон үйлдэлт фонт бөгөөд текстийг уншихад хялбар болгодог. Энэ фонт нь хэвлэмэл болон бага нягтралтай дэлгэц дээр сайн харагддаг.

16. Сигника

Энэхүү үнэгүй вэб фонт нь sans serif-ийн төлөөлөл юм. Бага тодосгогч, өндөр x өндөр нь Signika-г дэлгэцэн дээр сайн харуулах боломжийг олгодог. Дүрсүүдийн өргөн сонголт нь тэмдэг, пиктограмм, сум зэргийг агуулдаг.

17. Жозефин хавтан

1930-аад оны үеийн ердийн геометрийн үсгийн дүрмийн дагуу бүтээгдсэн бөгөөд Скандинавын онцлогийг нэмсэн Жозефин хавтан нь хавтангийн фонтын шинж чанартай бөгөөд бичгийн машины фонтыг санагдуулдаг. Сонирхолтой нь түүний x өндөр нь том үсгийн өндөртэй тэнцүү юм.

18. Форум

Нэрнээс нь харахад энэ нь том үсгээр бичихэд тохиромжтой, гэхдээ текстийг харуулахад тохиромжтой Ром фонт юм. Энэхүү үсгийн гоёмсог харьцаа нь хагас дугуй нуман хаалга, хэвтээ эрдэнэ шиш, босоо багана бүхий сонгодог архитектурыг санагдуулдаг.

Маяачуудын хамгийн алдартай хотуудын нэгээр нэрлэгдсэн Тикал Санс нь Өмнөд Америкийн соёл иргэншлийн бичиг үсэгт ашигласан глифийн онцлогтой. Үүнийг бүтээгч том x-өндөрийг сонгосон бөгөөд энэ нь үсгийн фонтыг орчин үеийн харагдуулж, уншихад сайнаар нөлөөлдөг бөгөөд олон төрлийн хэв маягийн сонголт нь үүнийг янз бүрийн зориулалтаар ашиглах боломжийг олгодог.

20. Арво

Хэвлэх болон вэбийн аль алинд нь тохиромжтой, энэ геометрийн хавтангийн фонт нь Ром, Налуу, Ромын Болд, Тод налуу хэлбэрээр байдаг. Arvo-ийн бага тодосгогч нь дэлгэцэн дээр унших чадварыг сайжруулдаг.

21. Биван

Bevan нь 1930-аад оны уламжлалт хавтангийн фонт дээр тулгуурлан бүтээгдсэн. Үсгийг дижитал болгож, шинэ хэлбэрийг өгч, вэб хувилбарт тохируулсан. Энэ бол вэб сайтад тохиромжтой цөөн тооны тод фонтуудын нэг юм.

22. Хуучин стандарт TT

Хуучин Стандарт TT нь 19-р зууны сүүл, 20-р зууны эхэн үед алдартай байсан, дараа нь удаан хугацааны туршид мартагдсан Modern serif фонт дээр суурилсан байв. Энэхүү фонт нь шинжлэх ухааны судалгаа, Грек, кирилл үсгээр бичсэн бичвэр зэрэг тодорхой төрлийн агуулгад хэв маяг нэмэхэд тохиромжтой.

23. Креон

Мэдээллийн вэбсайт болон блогт тохиромжтой, энэ сериф фонт нь хавтангийн фонтын шинж чанарыг хуваалцдаг боловч тэнцвэртэй байдал, бага тодосгогч нь Kreon-ийг илүү хувийн болгодог.

24. Droid Sans

Droid Sans нь гар утасны дэлгэц дээрх цэс гэх мэт жижиг интерфэйсүүдэд ч хамгийн их уншигдахуйц байхаар оновчтой болсон. Энэ бол энгийн, нээлттэй үсэг бүхий төвийг сахисан, ташуу бус фонт юм.

25. Итали

Энэхүү фонтыг бүтээгч нь Италийн сонгодог уран бичлэгээс санаа авсан тул фонт нь гоёмсог байдлыг нэмэх шаардлагатай төслүүдэд маш их хэрэгтэй болно. Italiana нь хэвлэлийн болон цахим хэлбэрээр мэдээний гарчиг бичихэд тохиромжтой.

26. Воллкорн

Энэхүү нарийвчилсан, онцлог шинж чанартай сериф фонт нь маш их алдартай. Түүний тод байдал, бат бөх байдал нь өөртөө итгэх итгэл, эрч хүчийг илэрхийлдэг бөгөөд үсгийн фонтыг том хэмжээтэй гарчиг, гарчиг, мөн жижиг форматтай их хэмжээний текстэд адилхан үр дүнтэй болгодог.

27. Жүжигчин

Энэ фонт нь маш том x өндөртэй тул маш их зай шаарддаг. Жүжигчин мөн 6, 9-ийн тоо зэрэг зарим дүрд зориулсан хуучинсаг хэв маягийг харуулсан.

16-р зуунаас эхтэй Garamond хэмээх хүмүүнлэг фонт нь жинхэнэ хэвлэмэл дүрс болж, орчин үеийн үсгийн хэлбэрийг бий болгоход үндэс суурь болж, EB Garamond гэх мэт үйлчилдэг.

31. Ubuntu

Ubuntu Grotesque нь ширээний компьютер болон гар утасны төхөөрөмж дээрх вэб текстийг хувийн болгох зорилгоор бүтээгдсэн. Хэрэглэгчид энэ фонтыг туршиж үзэх, өөрчлөх, сайжруулахыг зөвлөж байна.

32. Розарио

Розарио бол текстийн догол мөрийг загварчлахад тохиромжтой сонгодог хүмүүнлэгийн санс сериф юм.

33. Робото хавтан

Roboto Slab нь Roboto гэр бүлийн фонтуудын нэг юм. Блок хувилбар нь геометрийн хэлбэр, задгай муруйгаараа онцгой анхаарал татдаг. Энэ нь гаджетын дэлгэц болон текстийн хэвлэмэл хувилбаруудад адилхан тохиромжтой.

34. Освальд

Фонт нь сонгодог Alternate Gothic sans serif-ийн дахин боловсруулсан хувилбар юм. Освальд саяхан шинэчлэгдсэн бөгөөд төрөл бүрийн жин, өргөтгөсөн тэмдэгтийн багц, илүү сайн тэмдэгттэй болсон.

35. мухардмал

Stalemate бол ямар нэгэн хувцасны чимэг хийх чадвартай гар бичмэлийн гоёмсог фонт юм. Энэ нь өргөлт үүсгэх, вэбсайтаа хувийн болгоход тохиромжтой.

36. Crimson текст

Энэхүү болгоомжтой зохион бүтээсэн сонгодог пропорциональ фонтыг их хэмжээний текст харуулах, гарчиг бичихэд ашиглаж болно.

Html дээр үсгийн хэмжээ чухал үүрэг гүйцэтгэдэг. Энэ нь сайтын хуудсан дээр байрлуулсан чухал мэдээлэлд хэрэглэгчийн анхаарлыг хандуулах боломжийг танд олгоно. Хэдийгээр үсгийн хэмжээ нь зөвхөн чухал биш, харин тэдний өнгө, зузаан, тэр ч байтугай гэр бүл нь чухал юм.

HTML фонттой ажиллахдаа шошго ба шинж чанарууд

Гипертекст хэл нь фонттой ажиллах өргөн хүрээний хэрэгсэлтэй. Эцсийн эцэст, текст форматлах нь html-ийн гол ажил юм.

HTML хэлийг бий болгосон шалтгаан нь хөтчүүдэд текст форматлах дүрмийг харуулахтай холбоотой асуудал байв.